nDiki : Bootstrap

冬休み最終日 【日記】

今年は1月4日が特別おやすみになったため年明け側が長いパターンの9連休となった。これだけ長く休んだのはゴールデンウィーク含め何年ぶりだったかなあ。

連休中は、ウィラ大井へ行って朝マックへ行って年末年始の買い出しして初詣行ってIKEA船橋行ったって感じ。

計算機系はここの Bootstrap 化したいなと思ってたんだけれど、その前の CVS リポジトリの Git リポジトリ化まで。こちらはちょっとずつ進めるかな。

あとはポモドーロテクニックのプライベートでやってみるのをちょっと始めてみたぐらい。それと冬休みに入ってから日記他1日1記事を復活。今のところ継続中。

それぞれ大きな事は無かったけれど充実した冬休みだったな。

今日のさえずり: デスクの上に片方土足を置いていたので「これは大物だ!」と思っていた

2013年02月04日

• 07:38 “お前このサブネットでも同じ事言えんの？ - 知らないけどきっとそう。” http://t.co/w3c4pLf1
• 09:24 @y_aki 今後は Bootstrap あたりを使って、どのデバイスでも見やすくなるようにはしたいです。サイドバーは他人の Blog 見てる時に無意識に脳内フィルタリングしてるのでいらないかなあと。
• 09:48 福は内。 (@ 株式会社ミクシィ (mixi, Inc.)) http://t.co/grL7yVGi
• 10:07 いつもバッグに入っているクレジットカードと折り畳みバッグを今日は忘れた。帰りにスーパー寄る予定があるのに。
• 10:12 今日は体調不良で2人お休み。昨日豆をまかなかったに違いない。
• 15:37 いただきもののブランチに add 忘れられているものがあるっぽい。
• 15:40 「個人の端末で無線 LAN を使えますか?」を「故人の端末で無線 LAN を使えますか?」と書き間違えていた。
• 19:12 渋谷区2Fのポールンロボ。 / “花粉プロジェクト - ウェザーニュース” http://t.co/0Fx21bLs
• 19:12 JASGAガイドライン及び運営体制基準を策定。 / “JASGA自主規制の概要” http://t.co/sSSAbllv
• 19:27 Perl やっててよかったー。 / “Perlの食えない事情 - 演算子編 - アリ” http://t.co/i7pyFIPD
• 19:27 “そりゃそうだ！ iOS版公式『Tumblr』アプリのレーティングが17歳以上になる | NANOKAMO BLOG” http://t.co/TGRtlycg
• 20:16 2月1日に入社した人がデスクの上に片方土足を置いていたので「これは大物だ!」と思っていたのだけれど、今日よく見たら靴型のペンケースだった。
• 20:17 っていうか雪降る前に靴欲しい。
• 20:42 “『Twitterカード』を設定してサイトへの流入数を「若干」増やそう！1万6742文字に渡る開発者向けドキュメントの日本語訳まとめ。” http://t.co/m1ZjsLQV
• 21:29 @py0n 誕生日おめでどうございます!
• 21:37 今日帰りにレジ袋を買わなければならないのか、口惜しい……。

Bootstrap 3 に移行して Web 日記を延命

この Web 日記 (nDiki) がスマートフォンで見にくいのがずっと気になっていたので、さくっと Bootstrap 3 に移行した。スタイルシートを Bootstrap 3.0.2 のものに変えて、navbar を使うようにコードをちょっと変更程度の軽い対応。

もともと tDiary テーマスタイルシート用の HTML 構造を生成していたんだけれど、そのあたりが問題で崩れることはなく Bootstrap のスタイルシートを当てることができた。もともと Wiki 記法で書いたソースドキュメントを HTML に変換しているので、変な構造の HTML は吐かないようになっていたというのもサクっといけた点かな。

細かいところういうと画像の回り込みに対応させなければならなかったり、テーブルなど適宜 Bootstrap のクラスを指定した方がいいところがあるけれど、まあ追い追いで。

あとそもそも iPhone や Android などのスマートフォンで見にくかったのはスタイルシートの問題というよりは、viewport の指定がなかったからだった。Bootstrap に差し替えただけではやはりスマートフォンでは見にくくて、Bootstrap の Getting started の通り、

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

と書いたら文字サイズなど見易くなった。

2004年2月22日にハイパー日記システム(hns)から自作の DiKicker に移行してからもうすぐで10年。そういえば2004年2月22日は奇しくも mixi がプレオープンした日だっとはなあ。何かの縁か。

Bootstrap 3 での画像横へのテキスト回り込みと画像のレスポンシブ化

Bootstrap 3 で画像を float: right; するには

 class="pull-right"

を指定。あとスマーフォンのブラウザでの表示時に、端末の画面の横幅より大きい画像がはみださないようにするには

 class="img-responsive"

を指定する。max-width: 100%; と height: auto; がかかるようになる。

ということで、ここの Bootstrap 3 対応作業の続きでコンテンツ中の画像には適宜上のクラス(片方あるいは両方)が指定されるように HTML 生成を修正。画像まわりがいい感じになった。 Bootstrap お手軽。

2013年日記まとめ

mixi日記で2013年の月毎のふりかえりを書いている人がいていいなあと思ったので日記まとめという形で今年の1年をふりかえり。

1月 再び毎日日記を書こう

再び毎日日記を書こうということで数年前まではほぼ欠かさず1日1記事書いていた Web 日記を毎日書くことにした。結果継続成功! 来年も続ける。

正月休みは3年ぶりに IKEA に行って、ダイニングテーブルを新調。ちょっと高さが高いかなという声もあるけれど結構満足している。IKEA は11月にも行って今年2度。

仕事始めは氷川神社への初詣からスタート。今年は本厄だからというわけではないけれど厄除け含めて結構ちょくちょく神社へ行った感じがする。なんか落ち着くんだよね。

1月には久しぶりに東京タワーも上った。昔ながらの土産店も健在だったので嬉しい。来年はまだ行っていないスカイツリーに行きたい。

2月 20年の時を経てソバアレルギー無罪判決

20年の時を経てソバアレルギー無罪判決。ソバアレルギーだと思ってずっと生きてきたのだけれど実は違ったことが判明! 残りの人生で蕎麦を食べられるようになった。でも今年数回しか食べてないな。ずっと食べてこなかったから口が欲しがらないというのもあるんだよね。来年はおいしい蕎麦を食べてみたい。

それから仕事で使うキーボードを Happy Hacking Keyboard Lite から ThinkPad USB トラックポイントキーボード(英語)に交換。打鍵のストレスが減ったので良かった。今年はワイヤレス版が出でるのでずっと欲しいと思っているのだけれどちと高いんだよね。50%オフになるのをずっと待っている(40%オフまではセールになることがある)。

2月にはチームに優秀なエンジニアが join。ハイパフォーマー。

3月 煙霧

税務署で初めての確定申告。3月10日には大騒ぎになった煙霧。東京生活長いけれどこんなの初めて。

あと3月末にはサントリーホールのオープンハウスへ。なかなか上がる機会のないステージに上がった。年に1回あるので来年もぜひ。

去年末から取り入れていたポモドーロテクニックは3月中旬に止めることにした。学ぶことはあったけれども、自分のワークスタイルには合わなかった。

Android の日本語入力は3月に ATOK から Google 日本語入力に変えた。入力補正が秀逸でとても捗る。iPod touch (第5世代) を8月に買ったんだけれど、やっぱり日本語入力環境は圧倒的に Android の方が上。

ツールといえば WorkFlowy というオンラインアウトライナーサービスを使い始めた。その後ずっと使っていて、今年出会った当たりサービス。お薦め。

3月29日には PerlCasual に参加。今年行った勉強会系は YAPC::Asia Tokyo 2013 以外だと

• PerlCasual #05
• Google I/O 2013 報告会@ mixi
• WWDCに行ってきたけど内容については一切離せません @ mixi
• 第3回coconala未来会議「コンテンツビジネスの未来」
• ソーシャル×カスタマーサービス・サミット2013
• Shibuya Plack/PSGI Conference (shibuya.pl) #1
• GitHub トレーニングチームから学ぶ Git の内部構造
• Hatena Engineer Seminar #2

あたり。

4月 宇宙戦艦ヤマト2199テレビ放送開始

4月6日で Twitter を使い始めて6年。一番気楽。ただフィードバックは mixi > Facebook > Twitter > Google+ な印象。 アイコンを近影に変更した。

4月7日(日)から宇宙戦艦ヤマト2199のテレビ放送が開始。週末の楽しみとなった。やっぱり宇宙戦艦ヤマトいいわー。来年はオリジナルの宇宙戦艦ヤマトを DVD レンタルして全話観るぞ。

4月16日にはミクシィ歴3年目突入。

レジャー的にはゴールデンウィークに国立科学博物館附属自然教育園へ。穴場スポット。新緑の季節にまた行きたい。

5月 フレッツ光へ

ゴールデンウィークに風邪をひいてしまったのでパズドラとケリ姫スイーツをやり始めた。これがきっかけで今年はスマートフォンゲームアプリをちょこちょこやるように。長続きしているのはチェインクロニクルとモンスターストライク。チェインクロニクルはストーリーと世界観がしっかりしていてロールプレイングゲームらしいゲームで非常に良くできている。モンスターストライクはマルチプレイができる点が新しくまだまだ伸びそう。

5月4日には国立科学博物館。1回じゃ全然みきれない。何度もリピートする必要あり。

自宅ネットワーク的にはようやくフレッツ・ADSL からフレッツ光へ変更。ワイヤレスブロードバントルータも10年以上ぶりに新しいものにかえて YouTube がストレスなく快適に見られるようになった。素敵。

新調と言えば今年は NEX-5N 用としてEマウント用広角パンケーキレンズ E 20mm F2.8 SEL20F28 を買った。今年買ったレンズはこれ1本。NEX-5N につけると気軽に持ち出せるようになるので、結構重宝している。手ブレ補正まで入っていれば夜も持ち出せるんだけどね。

6月 15年ぶりの東京ディズニーランド

15年ぶりの東京ディズニーランド。健歩大会さまさま。トムソーヤ島が探検ぽくて意外と面白かった。来年はディズニーシーへ行くぞ。

久しぶりに献血をしようと思ったところなんと貧血で見送り。以前からではあるけれども、秋の健康診断でも「貧血疑 要経過観察」となっていたので引き続き注意。あとなんと「左腎結石(症) 要経過観察」という診断結果もセットで出たのでより健康には注意しなくちゃ。

あと生活的には妻が Xperia A でスマートフォンデビューしたというのが大きな変化。spモードメールにかえて LINE で連絡を取るようになったり Google カレンダーの共有を果たしたりといろいろ便利になった(自分的に)。

7月 隅田川花火大会大波乱

Haskell をやりかけたけどすぐ飽きた。

「おさわり探偵 なめこ栽培キット」を始めたのも7月。最近は起動するとたいがい枯れてる。

7月中旬にはコンタクトセンター・アワード 2013 全申請発表会を見に。ビューティフル・ドリーマーの話が印象に残っている。

7月のお祭は、桜新道の盆踊り大会。今年初めて行ってきた。あとは行かなかったけれど今年の隅田川花火大会は土砂降りで大波乱だったねー。

8月 iPod touch (第5世代) 購入

8月中旬からチームにインターンがやってきた。最初にさわったのが Windows XP という。想像以上に飲み込みがはやく優秀だった。青春の夏休みに我々のインターンシップを選んでくれてありがとう!

8月のお祭りは天祖・諏訪神社。巡行だけじゃなくて夜のお参りも済ませた。今年はちょっとずついろいろやれることが増えてきたなー。あと大井どんたくも例年通り。

iPod touch (第5世代) を買ったのも8月。iOS アプリをいろいろ試せるようになったのは収穫(iPad 2 しか持っていなかったので)。Android 端末より電池がよくもつのでサブ機としていいんじゃないかな。チェインクロニクルを始めたのは iPod touch (第5世代) を買ったせい。今は iPad 2 と2台でやっている。

ネットサービスとしては TeamGantt を使い始めたのだけれど、使い勝手はまずまずなのだけれどフルに使うわけでもなかったので解約。もうちょっと安ければ維持してもとは思ったんだけれども。

月末には初めてアーバンドック ららぽーと豊洲へ行った。「らーらぽーと」のサウンドロゴは昔の音程の高いのが好き。

9月 よこはまコスモワールド

iPod touch で QWERTY 配列だと小さくて厳しいのでフリック入力を練習し始めるも習得ならず。今も QWERTY。

9月の外出はよこはまコスモワールド。ファミリー・バナナ・コースターにライド。

あと YAPC::Asia Tokyo 2013 は例年通り参加。

• 前夜祭
• 1日目
• 2日目

10月 大井競馬場

雨で行きそびれていた東京シティ競馬のトゥインクルレースをようやく見に行けた。すごくロマンチックで興奮した。

それと10月はキャッシュカード・クレジットカードの暗証番号を一斉変更。 IC チップ付きのカードの暗証番号変更は要返却というの結構ネック。

11月 Remember The Milk から Google Tasks に

ネルフからエンジニアが配属された。今年は CS 開発はエンジニア2増1減。来年もさらにチーム力を高めて一丸となって CS 向上に取り組んでいきたい。

アイテム的には今年後半バンナイズに注目。301プラスはスマートフォンを持ち歩くのにばっちりで重宝している。

個人的にはタスク管理ツールを Remember The Milk から Google Tasks に変更したのも大きな出来事。やはりサブタスクが使えるとブレークダウンするのに便利。Remember The Milk がサブタスクをサポートしないかなあ。

レジャー的には久しぶりのプラネタリウム。五反田文化センタープラネタリウムで星空投影を鑑賞。リーズナブルなのが嬉しい。

12月 喜正を呑む

この Web 日記(nDiki) を Bootstrap 3 ベースに変更。スマートフォンでも見やすくなったし更新するモチベーションもアップ。

自分の名前と同じ綴りの酒をついに買って呑んだ。マジめでたいので正月にも呑もう。

今年のイルミネーション鑑賞は目黒川で。夜桜を楽しんだ。

ツールとしては pandoc に出会った。Markdown で書いえ reveal.js なプレゼンテーション用 HTML5 ファイル生成できる。発表系はしばらくこれを使いたい。

まとめのまとめ

年末にざざっとまとめをすると、どうしても行ったところとかまとめやすいのに偏るね。あと後半力尽き気味。(HootSuite + IFTTT の話題のような)数カ月に渡るものや、じっくり考え直す系のものは取り上げそびれた。

あとまとめていると「やはり書いていないことはふりかえり対象にもあがってこず記憶から薄れていく/消されていく」という背筋の寒さを感じる。プライベートや仕事での出来事や思いなど、Web 日記には載せないことをどう書き留めていくか最近考えている。今年は Web 日記継続の習慣が復活できたので、来年はそちらにも力を入れたいな。

なにはともあれ今年一年も良い年でした。ありがとうございました。

nDiki の Bootstrap 3 スタイルシートを調整

Bootstrap 3 を使っているんだけれど見出しが本文とちょっと区別がつきにくいなどちょっと気になる点があったので修正。

• 見出しが目立つように h2 h3 h4 に "font-weight: bold;" を追加。
• フォントファミリを指定していなかったので body, h1, h2, h3, h4, h5, h6 に "font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;" を追加。
• 段落が詰まった感じなので p に "line-height: 1.7;" を追加。
• 短いセクションに "float: right;" 画像があるとその高さまで文章の無い空白ができて、間延びするので h4 に自分で設定していた "clear: both;" を削除。
• 前記の h4 の "clear:both;" 指定で各セクションの "float: right;" な画像が同じ段にならないようにしていたのだけれど、これを消したことで画像が階段状に並んでしまうケースが出ることになるので img に "clear: both;" を追加。

サイト訪問者と運営者とのチャットを簡単に設置できる Zopim が面白い

最近はチャットでユーザーサポートを提供しているサービスが増えてきている。自分も過去チャットのサポートで解決が迅速に進んだ経験があってチャットサポートについては肯定的である。最近のチャットサポートはどうなっているのだろうと自分でも試してみたいと思い、人気が高そうな Zopim を実際に設置して試してみることにした。なお Zopim はカスタマーサービス・プラットフォームを提供する Zendesk に去年買収されている。

• Zopim

簡単に登録と設置ができた

実際にこのサイトのページの右下に出ているのがそれ。

上記のページの「SIGN UP」か「TRY ZOPIM」ボタンで登録ページへ。Name (後で変更できる) と、Email Address (後で変更できる)を入力してサインアップ。メールアドレス確認メールが届いたらそこのリンクから残りの登録ステップ済ませる。

あとはダッシュボードの「ウィジェット」のところにある HTML コードをページの HEAD 要素の中に追加すれば設置 OK。

HTML コードは PC 向けサイトでもスーマートフォン向けサイトでもどちらでも使えるのでサイト側では意識しなくて良い。 Bootstrap を使ってデザインした両対応しているページでも、Zopim もアクセスしてきたブラウザに合わせて機能してくれる。日本語も問題なく使えている。

「設置してみたのでテストしてみて」と言ったら一気に5人チャットがきて、慌てて返信してみたりした。実際にはリラックスして訪問者とやりとりするのが良さそう。

使って感じた点

• 設置
  • 簡単。
• 訪問者に対して
  • スマートフォンからの訪問者ともチャットできるのが良い。
• サイト運営者にとって
  • iOS アプリ・Android アプリがあって、どこでもチャットサポート対応ができる。スタートアップなサービスなど、いつでもユーザーのフォローを出来るようにしたいというフェーズに良さそう。
  • Google Analytics のリアルタイムのように、サイト訪問者の状況がリアルタイムに分かるのが面白い。
  • 1箇所からしかログインできない(Web 版とモバイルアプリで同時にはログインしておけない)という点は注意。

Zopim Lite パッケージは無料なので立ち上げたばかりのサービスや、Blog などに設置してみるのに良いと思う。

• Zopim

(画像は https://zop.im/press-kit より。)

nDiki に貼る写真を Flickr ではなく同じサーバに置く

この nDiki に写真を載せる際は2005年から Flickr にアップロードしてそれを貼りつけるようにしています。これを今後は普通に画像ファイルを Web サーバ側に置くことにしました。

Flickr に写真を置いておくメリットは以下があります。

• スマートフォンから簡単にアップロードしておける。Flickr アップロード + Twitter シェアした写真をそのままあとで nDiki に貼れる。
• Flickr で様々なサイズの画像にしてくれるので自前でリサイズしなくて済む。
• Web サーバの容量を圧迫しない(当時は 容量が少なかった)。

一方デメリットとしては

• Flickr にベンダーロックインされている。長期的には一抹の不安。
• 一度画像の URL が変わったタイミングで過去の写真が一部表示できなくなっている(記事側の URL を変更していく必要がある)。今後も同様の自体があり得る。

があります。

Flickr 利用で使い勝手的には問題が無いのですが、長期的に継続する Web 日記のコンテンツとしては他のサービスに依存しすぎないようにした方が良いということで、今後は普通に Web サーバに置くことにしました。

そうするとどのサイズの画像ファイルを用意するかを改めて考える必要が出てきました。

画像サイズ

今までは Flickr で生成されるから適当そうなもの(たいがい長辺 500px のもの)を選んで貼っていました。今後は自分で適切なファイルを作ってアップロードすることになるので画像サイズについてちょっと見直してみました。

Bootstrap 3 でのサイトの幅の見直してコンテナを 970px までに

Bootstrap 3 だと広くても幅 1140px (1170px - 30px) なので画像幅もこれだけあれば十分です。しかし考えてみると nDiki は1カラムなのでラージデバイス(≥1200px)向けのコンテナ 1170px はいささか広すぎます。ということでいったんミディアムデバイス向けのコンテナ 970px までしか広げないようにしました。

 @media (min-width: 1200px) {
     .container {
         width: 970px;
     }
 }

写真は基本 max-width: 100% の .img-responsive で表示しているので、これで最大 940px 幅で表示されることになります。

表示される写真の高さは最大 480px に

幅 940px だと 4:3 なら高さは 705px、3:2 なら高さは約 627px になります。13インチMacBook Pro 上の Google Chrome でこのサイズの写真を貼るとほぼ縦いっぱいになってしまいます。記事中の写真では 480px ぐらいまでかなという印象でした。ということで

 max-height: 480px;

としました。

これだと 4:3 なら 640x480px、3:2 だと 720x480px の画像サイズがあれば十分なことになります。縦位置だと 3:4 で 360x480px、 2:3 だと 320x480px です。

画像ファイルの画像サイズは長辺 1200px に

これで 640x480px (4:3) や 720x480px (3:2) にリサイズして Web サーバに置けば現時点では過不足ないということがわかりました。

ただこれだとデバイスの変化でサイトデザインを見直す時がきた時に解像度不足になってしまいます。Bootstrap のラージデバイス向けのコンテナサイズを考えていったん長辺 1200px で画像ファイルを用意することに決めました。

ついでに .pull-left と .pull-right の画像幅も調整

写真を左右に寄せた際に現状テキスト部分が狭くなりすぎることがあるのでこのあたりも合わせて今回調整しました。

 .img-responsive {
     display: inline-block !important;
     max-height: 480px;
 }

 @media (min-width: 768px) {
     .pull-left.img-responsive {
         max-width: 50%;
     }

     .pull-right.img-responsive {
         max-width: 50%;
     }
 }

 @media (min-width: 992px) {
     .pull-left.img-responsive {
         max-width: 50%;
     }

     .pull-right.img-responsive {
         max-width: 50%;
     }
 }

 @media (min-width: 1200px) {
     .pull-left.img-responsive {
         max-width: 50%;
     }

     .pull-right.img-responsive {
         max-width: 50%;
     }
 }

2017年05月01日(月)の #nNote

nDiki・nNote の nabvar

Bootstrap 3 を使っている nDiki・nNote から nabvar-fixed-top を外した。

nDiki Bootstrap 3 でのサイトの幅の見直してコンテナを 750px までに

一昨年にサイトの幅の見直してコンテナを 970px までにしたのですが、やはりそれでも文章の幅としては広すぎでした。 970px までから 750px までに変更してみました。

なんとなくずっと昔から固定幅は悪のように思えて、Web ブラウザを広げたらできるだけ広がる方が良いと今まで思っていたのでした。