nDiki : 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 についての勉強会が今日あった。 複数人・複数チームでで開発保守する大規模サイトにおける共通部品化のデメリットの話など、なるほどと。

百科事典型ナレッジベースに向いているナレッジベース Obsidian

以前ノート間リンクのできるノートアプリを探してみた時に触った Obsidian をもう少し試してみた。

• https://obsidian.md/

Obsidian はナレッジベースアプリケーションで、一般的なノートアプリよりも情報間のネットワークを重視している。ローカルホスト上の特定フォルダ以下に置いた個別の Markdown ファイルを [[ファイルベース名]] 形式で内部リンクしていくのが基本。

ファイルの拡張子が md 固定で txt では駄目というのが個人的に不便(拡張子 txt にできないと Google ドライブ的に困る)なのだけれど、過去のノートテキストファイルの拡張子を変更してお試ししてみた。

内部リンク

ファイルベース名を指定して内部リンクを文中に書いていくのだが、ファイル名の先頭を日付にする流儀との相性が良くないな。[[ファイルベース名|表示テキスト]] 形式でプレビュー時のテキストを指定できるけど、編集モードだと文章として読みにくい。各ファイルで YAML front matter 形式で別名を宣言しておけばその別名で内部リンクできる機能があるので、丁寧に管理すれば読みやすくはできる。

ただ Obsidian 方言で書きすぎると「ローカルホスト上の Markdown ファイルなので特定アプリケーションに依存しない」良さがスポイルされてしまう。Markdown のショートカット参照リンク形式で内部リンクを張れるようになると良いのになと感じた。

グラフ表示

1ファイル1トピックにしてきちんと内部リンクを張っていかないと価値あるグラフにならない。1日1ファイル + 個別トピックファイルというスタイルだと役に立たないかな。

その他

検索は使いやすい。TaskPaper ほど優れてた UI ではないけれど、フォールディングやアウトライン表示もできたりする。デフォルトのスタイルは個人的に見出しが大きいなと感じるので、常用するなら CSS をいじる必要がありそう。

パーソナルナレッジベースとして

「時間とともに記録・整理しておきたいことが変遷していく」「ナレッジベースを作ること自体が主目的ではない」パーソナルナレッジベースの世界では、静的な情報を丁寧にネットワーク化していく百科事典型よりも日誌/日記型の方が良いと思ってる。内部リンクは編集・維持コストが高いので、パーソナルナレッジベースでは頑張らないのが幸せだ。

Obsidian は百科事典型のナレッジベースが欲しい人にはあいそう。一方自分のような日誌/日記型派にはやはり検索主体の howm 系の方がいいなとあらためて感じた。

[ Mac アプリケーション ] [ ノート・日記はテキストファイルに ] [ ファイル名の先頭を日付にする ]

今日のさえずり: Zettlr 2日目。カスタム CSS を設定して見出しが大きすぎるの直したら使いやすくなった。

• 21:47 Zettlr 2日目。ちょっと分かってきて楽しい。カスタム CSS を設定して見出しが大きすぎるの直したら使いやすくなった。

Obsidian Publish サイトでノート埋め込み部分の CSS 変更失敗

Obsidian はノートに別のノートの全体や一部を埋め込む機能があるのだけれど、埋め込むコンテンツの量が多いと全部は表示されず縦スクロールバーが出てしまう。

max-height が指定してあったので Obsidian アプリケーション用の CSS スニペットや Obsidian Publish サイト用の publish.css で max-height 設定を上書きするようにしてみた。

アプリケーションの方はうまくいったのだけれど Obsidian Publish サイトの方は何か変(リロードすると表示されなくなったりする)。やはり埋め込みは使わないのがいいかなあ。

Obsidian の CSS スニペットから publish.css を生成する

Obsidian の表示のカスタマイズ用に複数の CSS スニペットを用意して個別に有効・無効を切り替えられるのに今頃気が付いた。

「プレビュー画面用の CSS と編集画面用の CSS」「Obsidian 標準の構造用の CSS と独自の構造・クラス用の CSS」など分けたらずいぶん見通しが良くなった。

今までアプリ用の CSS と Obsidian Publish サイト用の CSS (publish.css) の2重管理が手間だった。「アプリだけ用の CSS」「Obsidian Publish だけ用の CSS」という切り口でもファイルを分けておき、 必要な CSS ファイルだけを make でマージして publish.css を生成するようにしたら解決できた。なるほどー。