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

DSC02006.jpg

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

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

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

続きを読む

Amazon.comからSurface3を輸入してみた!

surface302.jpg

こんにちは!basara669です。
前回のブログで書いたように持ち歩きのPCを検討した結果、Surface3を買ってみようかなということで、アメリカから輸入てみました!
どんな手順だったかいくらくらいかかったのか書いていこうと思います。 続きを読む

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

surface3.png

こんちは!basara669です。

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

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

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

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

続きを読む

最近モンストに凄いハマっている

thumbnail.jpg

こんちは!basara669です。

ずーっとソシャゲはやらないと思っていたのですが、僕馬鹿にしてました。
本当にごめんなさいww

今物凄いモンストにハマっていますw

ホント暇さえあればやっている感じで、モンハン以来凄くハマったって感じです。

続きを読む

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

marionettejs_logo

色々便利な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桁毎にカンマをつける

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

var num = 1111;
String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' );

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

実装のコード例

<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>

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

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

まとめ

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

textBladeに感動したので予約してみた!

textBladeReserved_01.png

こんちは!basara669です。

またキーボードの話ですwどんだけキーボード好きなんだ…

少し前のEngadgetさんの記事とかで紹介されていた3つのパーツを組み合わせて、フルサイズキーボードと同じ体験ができる「TextBlade」という製品に感動して予約しちゃいました!

続きを読む

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

ipad_air_ultrathin_27.JPG

こんちは!basara669です。

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

Ipad air ultrathin 27

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

続きを読む

ブログを書くならiOSかAndroidか?

aad8bd4b47749784a56dedb909586d42.png

こんちは!最近AndroidとiOSの両方をいつも使い続けているbasara669です。

両者の使い勝手についての投稿はたくさん上がっているのですが、あまりブログを書くというところにフォーカスした投稿が無い気がするので、「ブログを書く」というところにフォーカスした内容を書こうと思います。

スクリーンショット 2015 01 02 17 46 32 続きを読む

LogicoolのKeys-To-Goを買ってみた!

keys-to-go11.JPG

こんちは!basara669です。

常にスマホやタブレットでの入力方法の最適なものを探し続けているのですが、決定版になりそうな気がしている物を発見しました!

Keys to go11

それが今回購入したLogicoolのKeys-To-Goです!2014年末に発売されたのですが、早速購入したので開封したいと思います。

続きを読む

まだNexus5は買いか!?

nexus5_2014_review04.png

こんちは! basara669です!

このブログに来ていただいている方の役に三割くらいはnexus5のネタを探しに来ているので、2015年の1月1日という時期に、まだnexus5は買いなのかについて、今一度考えてみようと思います。

Nexus5 2014 review04 続きを読む

2014年振り返って

IMG_8373.jpg

IMG 8373

こんちは!basara669です!

12月31日になったので、今年について振り返ってみようかなと思います。

ちょっと恥ずかしいのですが、昨年のエントリーを読んでみました。
【反省多し】2013年を振り返って
なんかやけに反省してますねwww

これを踏まえて今年はどんなだったかを考えようと思います。

続きを読む