nDiki : CSS

今日のさえずり: Firefox の Pearl Crescent Page Saver Basic 使ったら固定ヘッダ重複することなく全体キャプチャできました!

2013年08月27日

• 19:43 ヘッダ固定の Web ページをスクロールキャプチャできるいいソフトウェアが見つからなくて、結局 GIMP で結合する世界へ流れてきた。
• 19:53 @maru_kei 試してみます!
• 20:21 @maru_kei おお Firefox の Pearl Crescent Page Saver Basic 使ったら固定ヘッダ重複することなく全体キャプチャできました! (下の方に固定の要素がキャプチャに繰り返し出たけど、そちらは CSS いじって対応できました)
• 22:32 新しいあれの plackup まで環境構築できたので帰る。 (@ 株式会社ミクシィ (mixi, Inc.) w/ 2 others) http://4sq.com/14AwLqU

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

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

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

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

あとそもそも iPhone や Android などのスマートフォンで見にくかったのは CSS の問題というよりは、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 がプレオープンした日だっとはなあ。何かの縁か。

プレゼンテーションスライドを Markdown で書いて pandoc で reveal.js なページを生成する

ちょっとした勉強会などの資料は Markdown とかで軽く書いて、Web ブラウザでプレゼンテーションするための HTML ファイルと、参照用のシンプルな HTML ファイルを生成したいなと思ってちょっとチェックしてみた。pandoc を使うと Markdown から reveal.js を使ったスライドページを作れるし、普通に HTML5 なページにも変換できるので良さそげ。

• http://johnmacfarlane.net/pandoc/

pandoc をインストール

pandoc は Haskell で書かれている。 GHC + Haskell Platform が入っている環境なら

 cabal update
 cabal install pandoc

を実行すればインストールできる(Fedora 17 の home 以下に GHC + Haskell Platform をインストールした時のメモ)。Debian GNU/Linux sid にも pandoc Debian パッケージはあるのだけれど、まだちょっと古めなので cabal で入れた。

スライド原稿を用意する

 mkdir pandoc-sample
 cd pandoc-sample
 emacs source.md

してサンプルを Markdown で書く。

• source.md

できたら reveal.js をとってくる。

 git clone https://github.com/hakimel/reveal.js.git

CSS の微調整が必要なら reveal.js/css/reveal.min.css に手を入れる(自分の場合 text-align: center を left にしたり、.reveal h<n> のサイズを小さくしたりする)。

reveal.js な HTML を生成する

 ~/.cabal/bin/pandoc -s -t revealjs -V theme:default -o slide.html source.md

でスライド HTML ファイルが生成される。

• slide.html

HTML のテンプレートを変更したい場合は、例えば

 cp -a ~/.cabal/share/pandoc-1.12.2.1/data/templates/default.revealjs .

とコピーしてきて編集後、

 ~/.cabal/bin/pandoc -s -t revealjs -V theme:default --template=default.revealjs -o slide.html source.md

とする。

シンプルな HTML5 版を生成する

 ~/.cabal/bin/pandoc -s -t html5 --toc -c /path/to/bootstrap.min.css -o doc.html source.md

などとしてシンプルな HTML5 版も作っておける。

• doc.html

今日のさえずり: 東急東横線だいぶ撤去された

2013年12月17日

• 10:32 “渋谷駅前、大みそかに大規模通行規制へ－地下出入り口封鎖も - シブヤ経済新聞” http://bit.ly/1cxES7g
• 10:32 “株式会社ミクシィを退職しました。そして・・・ - ○○おねえさんのつぶやき” http://bit.ly/1ejRRk0
• 14:03 “日本企業のガラパゴスっぷりを例示するのに高強度コンクリート技術はふさわしくない - concretism” http://bit.ly/JBnQ1v
• 14:03 I'm at サイゼリヤ 渋谷新南口店 (渋谷区, 東京都) http://4sq.com/J1omod
• 14:22 東急東横線だいぶ撤去された。 http://flic.kr/p/ioDmgn
• 14:28 I'm at 金王八幡宮 (Konno-Hachiman Shrine) (渋谷区, 東京都) http://4sq.com/1bMophY
• 14:28 実ってる。 http://flic.kr/p/ioCWBF
• 14:31 今回はぎんぎつね。 http://flic.kr/p/ioDLg6
• 14:42 前回の東京都神社庁のおしごと。 http://flic.kr/p/dEcoUx
• 25:17 reveal.js の CSS いじってたらこの時間。

今日のさえずり: 加水分解でベトベトになっていたグレゴリーのクイックポケットを処分

2014年09月07日

• 11:43 HTML と CSS の。 / “コーディングガイド by mdo” http://bit.ly/1wcWSj0
• 22:29 加水分解でベトベトになっていたグレゴリーのクイックポケットを処分(この間のバッグとは別の)。

nDiki の Bootstrap 3 CSS を調整

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;" を追加。

Markdown でプレゼンテーションスライドを書ける Deckset for Mac

ここ最近はプレゼンテーションスライドを用意する時は reveal.js を使っています。Markdown で内容を書けるので便利なのですが、個人的には書き始めが億劫というネックがあります。ディレクトリを作って reveal.js のファイル一式を最初に用意するのがちょっとしたことなのですが面倒くさいのです(自分用に若干アレンジしたサンプル一式をコピーする作業)。

Markdown で書けるもので、かつもうちょっとさくっと書けるツールがあるかなと探してみたところ Deckset for Mac が良さそうなので使ってみることにしました。

• http://www.decksetapp.com/

スライドを書く

Deckset 方言の Markdown で記述したファイルを1つ用意すれば Deckset でスライドとしてレンダリングしてくれるのでお手軽。Deckset アプリ自体には Markdown エディタは内蔵されておらず Emacs や Atom など好みのテキストエディタで編集するスタイルというのも良いです。テキストエディタ側で保存すると Deckset 側が更新を検知してスライドを更新してくれます。

スライドに使う画像は URL で指定することができる(そして推奨している)ので、ローカルディレクトリに用意してという必要がありません(もちろん Markdown ファイルと同じディレクトリに用意して読み込ませることもできます)。「プレゼンテーション時にネットワークにつながっていなかったり URL 先から消えていたら困るのでは?」というのが気になるところですが、 Deckset 側でローカルホスト上にキャッシュしてくれるので大丈夫になっています。

テーマ

テーマは Deckset が用意しているものから選びます。欧文系らしいちょっと派手なのが多く、個人的に使えるなというのはそれほど多くない印象です。個人的には Titillium がいちばんしっくりくるかなと。

エクスポート

PDF ファイルや画像でエクスポート可能なので困ることはなさそうです。

好みの設定

スライドの冒頭にそのスライドの設定を書いておくことができます。

 theme: Titillium,1
 footer: [各ページ下部のフッタに載せたい文字列]
 slidenumbers: true
 autoscale: true

が良さそげ。

reveal.js との比較

reveal.js と比べて良いなというところは以下です。

• すぐ書き始められる。
• さくっと画像を貼れる。
• 「右半分画像」というレイアウトが簡単にできる(reveal.js だと厳しい)。
• autoscale を有効にするとページに収まるようにフォントサイズを調整してくれる。

reveal.js では Web ブラウザで表示するため縦横比が変わる前提である程度余裕をもってページを書く必要があるのですが、Deckset はそこを気にしなくて良いのが楽です。CSS や JavaScript コードをいじれる reveal.js に比べると細かいカスタマイズは全然できないのですが、その分デザインは Deckset に任せると割り切って内容だけに集中してさくっと書けます。

reveal.js が便利なところもあるのでプレゼンテーションシーンに合わせて使い分けることにします。

(画像は http://www.decksetapp.com/ より。)

nNote を最近使うようになってきたとか 【日記】

先月末に作った「ちょっとしたノートを置いておくスペース nNote」、どう使うか定まっていなくて当初はあまり書くこともなかったのですが、最近はちょこちょこメモを置くようになってきました。気軽に書き留めておける場所があるのやはり楽でいいです。小さいエントリが多いのでぱっと自分で見られるようにトップページに表示する記事数を増やしてみました。

それから nDiki(と nNote) に画像が無い記事がシェアされた時にフッタにあるプロフィール写真が機械的に選ばれる場合が多くてちょっとなと思ったので、フッタの上に 1200x630 の画像を置いておくことにしました(ページ上では大きくならないように CSS でサイズ制限)。

記事ごとに OGP 画像を指定する機能・記事に OGP 画像が無い場合にデフォルトを指定する機能を用意せねばと思いつつとりあえずということで。

mixi日記風スライドにしてみた

昨日は部署で、今日は本部で、上半期ふりかりと下半期キックオフのミーティングを行った。今回は SNS の事業部らしくということでmixi日記風スライドでプレゼンテーションしてみた。

PC 版 mixi の CSS を見ながら色やフォントサイズ比をピックアップして Google スライド上に図形を使ってそこそこmixi日記風にできてちょっと自己満足(実際にプレゼンテーション資料を作る段階では見やすさを考慮して適宜本文テキストを大きくしたりした)。

半期を日記形式で時系列にふりかえるの割といいんじゃないかと思っちゃうの、どんだけ自分日記好きなんだろと。

HTML・CSS についての勉強会【日記】

今年2回目の部内での HTML・CSS についての勉強会が今日あった。 複数人・複数チームでで開発保守する大規模サイトにおける共通部品化のデメリットの話など、なるほどと。