今年の振り返り

こんばんわ!basara669です。
9月にブログを更新すると書いたのに数回更新したら、もう年末ですよ…。ホントちゃんと書かずにすみません…。
そして、ブログのテンプレートを書いている途中みたい状態で読みづらかった申し訳ございません。

来年はちゃんとブログを書く工数をちゃんと見積もっていこうと思います。

さて、今年の振り返りと来年どうしていこうかというのを書きます!

9月28日版_現場のプロが本気で教える HTML/CSSデザイン講義の正誤表の更新

こんちは!basara669です!

先日僕が書いた本『現場のプロが本気で教える HTML/CSSデザイン講義』正誤表をアップデートしました!

本当に買っていただいた方には、ご迷惑をおかけしております。

こちらで気づいたものや、問い合わせ頂いてものは随時アップデートしていきます。

今回で追加した内容は以下となります。

誤植や表記についての解説の追加

FAQの追加

– scssコンパイルのエラーについて
– P118について

正誤表

– P18 上部画像について
– P23 test.htmlについて
– P30 対象HTMLについて
– P156 下部のscssについて
– P221 中部scssについて
– P250 上部scssについて

以上です!どうぞよろしくお願いいたします!

シルバーウィークだぁ〜!休みだ〜!!

気を抜くと、すぐ更新しなくなっちゃうbasara669 です!!
ほんとダメなやつでごめんなさい! 

今日のエントリーはホントなんでも無いです!嬉しさを書きたいだけです!w

休みです!!シルバーウィークですよ!!シルバーウィークwって言ってもこの投稿も既に3日目が終わろうとしていまけどねww

いやぁ、マジ休み最高!うれしいw嬉しい!!
※休みは飛び石的ですけど、全部有給にしてお休みをいただいてます。

『現場のプロが本気で教える HTML/CSSデザイン講義』を書きました〜!

どうも basara669です!
前回のブログでも書いた通り、最近本の執筆をしておりました!

本のタイトルは『現場のプロが本気で教える HTML/CSSデザイン講義』です!!!

この投稿では、制作秘話的な内容ではなく、どんな本でどんな人が買うと嬉しいかについて書いていきます!

MacBookではなくSurface3を買おうと思う

こんちは!basara669です。

春になって新しいガジェットが色々とリリースされてますね!これからgoogle IOもあるので、さらに色々発表されそうで、すごい楽しみです!

そんな中、Apple Watchと同時に発売された、新しいMacBookなのですが、みんなから、当然買ったんでしょ?と言われます。

しかし、今回は買ってません!www

Appleファンの僕が、どうしてMacBookではなく、Surface3を買おうと思います!

Marionette.jsのitemViewに追加されるdivを消す方法

色々便利なMarionette.jsなのですが、CollectionViewに配列を入れてrenderした場合に、itemvViewにClass名を指定しておかないと、divが入ってしまいます。

これによって、CSSが崩れてしまったりtableがおかしくなってしまったりすることがあると思います。
今回はこれの対処方法について書いていきます。

Backbone.jsで3桁ごとにカンマをつける方法

こんちは!basara669です。

久々の更新になっちゃいました。

かなり細かい部分の実装なんですけど、Backbone.jsやMarionette.jsを使ってループで数字を表示した時に、3桁ごとにカンマを付ける方法を紹介しようと思います。

実装で困った点

今回の実装をするにあたってサーバサイドで行う方法と、クライアントサイドで行う方法の2つがあると思います。
簡単に行うなら、カンマを付属した状態でサーバサイドから送ってもらって、それを受け取って表示する方法だと思うのですが、そうするとカンマが入ってしまうことにより、思った通りソートが動かなくなってしまったりします。

なので、どうしてもクライアントサイドで行う必要がありました。

modelやcontrollerでの実装

他の方法だとajaxで、数字を受け取った時点で、modelやcontroller側で数値を取り出して、カンマを付けて、また、数字を戻せばよいと思います。
ただ、そうすると、結局ソートの対象となるデータにカンマが入ってしまうため、サーバ側で実装するのと変わらなくなってしまいます。

ということで、元のデータを変えず表示上カンマを加えるということで、テンプレート側に実装します。

jsで3桁毎にカンマをつける

このあたりはすごいたくさんコードが出回っているので、いまさら解説する必要も無いと思うので、さらりといきます
具体的なコードとしては下記のような感じです。

[javascript]
var num = 1111;
String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, ‘$1,’ );
[/javascript]

正規表現を使って、カンマを挿入します。

実装のコード例

[javascript]
<scrip type="text/template" id="commaTest">
<%
//dataの部分には入れるmodelから表示する値を入れます
var numAddedComma = String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, ‘$1,’ );

%>
//入れたかったdataの要素にcommaが付いたものが挿入されます
<li><% numAddedComma %></li>
</scrip>
[/javascript]

コメント部分を読んでもらえればだいたいわかると思います。
もともと挿入する予定だった値に対して、commaを付属する処理を行い、付属後の値を挿入しているだけです。

こうすることによって、元のデータに関係することなく、カンマ付属するという処理を加えて挿入することができます。

まとめ

結構マニアックな部分な実装なのですが、同じように困った人の助けになればいいなと思います。
ではでは

iPad air用のLogicool Ultrathinキーボードの使い勝手が良すぎる!

こんちは!basara669です。

iPad用のキーボードはいくつか買ってきたのですが、Logicoolから出ているUltrathinキーボードはこれまでのipad用のキーボードが抱えていた問題を解決した凄いキーボードでした!

Ipad air ultrathin 27

※これはipad air版のレビューです。

Scroll to top