nDiki : HTML

HTML (HyperText Markup Language)

関連情報

Perl モジュール

  • HTML::PopupTreeSelect
    • ディレクトリツリーなどのツリー構造のノードを選択させるウィンドウをポップアップさせるためのモジュール。
  • Template Toolkit

HTML への変換

スポンサード リンク

2018年10月13日 (土)

Ulysses で TextBundle を使うのどうなのか調べてみた

Markdown 形式ファイルと、そこから参照されている画像ファイルを1つにまとめて管理する形式として TextBundle がある。ライティングアプリ Ulysses が対応しているのでちょっといじってみた。

TextBundle は package format と compressed format がある。 package format は macOS のパッケージの形になっていて、 textbundle という拡張子をつけたディレクトリの中に info.json と text.* (Markdown なら text.md)、それからテキストファイルから参照しているファイルを asserts/ サブディレクトリに置くという仕様である。macOS の Finder からは1つのファイルのように表示される。

TextBundle を使うメリット

メリットは以下。

  • テキストファイルと参照されている画像ファイルを一緒に管理できる(ばらけないで移動したりできる)。
  • TextBundle に対応していないテキストエディタでも text.md を簡単に開いて編集できる。

TextBundle を使うデメリット

非対応アプリケーションから使う場合にデメリットを感じる。

  • 非対応アプリからみると TextBundle 毎にディレクトリがあることになるので、ディレクトリだらけな感じになる。ドキュメント毎にディレクトリを開いて中のテキストファイルにアクセスする必要がある。
  • Markdown ファイル名が text.md 固定なので、ファイル名だけでは区別できなくなる。

Ulysses for Mac の場合

Ulysses は TextBundle に対応しているので通常の Markdown ファイルと同様1つのシートとして自然に扱える。

普段 Ulysses for Mac では Dropbox の中のディレクトリを外部フォルダとして指定して使っているので以下、外部フォルダの時の話し。

Ulysses の外部フォルダ上の Markdown ファイルに貼った画像エディタ上でプレビューできるのは現状 TextBundle だけ。エクスポート時も TextBundle 内の画像ファイルは書き出されれるけれど、(相対パス・絶対パス問わず)ファイル名で参照しているものは書き出されない(http/https な URL で指定した画像HTML でエクスポートする際は画像が貼られる形になるが PDF ではだめ)。Ulysses だけを使って画像を扱いたいなら TextBundle を使う以外選択がない感じだ。

Ulysses 上で TextBundle なシートを保存するたびに参照されている画像ファイルを残して他は assets/ から消されてしまう。なので assets/ の下に画像作成に使ったソース・ファイル(マインドマップファイル)を一緒に置いておくおような管理はできない。そもそもテキスト編集で間違えて画像参照を消して保存実行してしまうと、画像ファイルだって消えてしまうので、画像ファイルだってオリジナルを別で保存しておく必要がある。

TextBundle は使うのは控えた方が良さそうだ。

スポンサード リンク
[ 10月13日全て ]

2018年11月1日 (木)

階層が深くなった TaskPaper ファイルはアウトライナー無しではもはや読み書きできない

事業方針について TaskPaper で要素を分解しながら考えていたらかなり深いツリーになってきた。アウトライナーなら折り畳み・フォーカス・検索でのフィルタリングなどの機能があるおかげで大きなツリーでも難なく考えを広げたり整理してまとめたりをできるので楽しい。

TaskPaper ファイルはテキストファイルで他のテキストエディタでも閲覧・編集できるのが良いところなんだけれど、ある程度大きくなるとアウトライナーの助けがないともはや読み書きが難しくなるんだよね。

誰かと共有するのにせめて折り畳みのできる HTML ファイルに変換できるようにしておかないとなあ。

[ 11月1日全て ]

2019年1月19日 (土)

Web 日誌 / Web 日記を書き始めてから20年

途中ブランクがあったりするけど、書き始めてからついに20年だ。

いつ始めたか?

個人 Web サイトを作り始めたのが1995年1996年ぐらい。それから数年経った1999年1月19日にコンピュータ日誌として日付ベースの記事を書き始めた。

当時既に Web 日記を書いている人はいたが、まだ HTML ファイルとして直接書いている人も多かったんじゃないかな。自分は当時マクロプロセッサ m4 を通して静的 Web ページを生成していたので、当初 Web 日誌も m4 マクロで生成していた。

ハイパー日記システムが公開されたのが前年の9月、 tDiarySourceForge.net に公開されたのは3年後の2002年2月20日であった。その翌年の1月16日にはてなダイアリーベータ版がリリース、さらにその翌年日記機能をもつ mixi がオープンとなる。

そこそこ早い時期から Web 日記 (Web 日誌)を書いていたんじゃないかな。

20年続けて得られたものは?

20年続けて得られたものは以下だな。

20年続けて失ったものは?

一方失ったものは時間。公開している以上、下調べしたり文章を整えたりするのにある程度時間がかかり1週間に数時間は費やしている(1日分で数時間の場合もザラ)。Web 日記を書いていなければ数千時間、他のことができていたであろう。

あ、もちろん無駄な時間だったとは思ってはいない。調べたり考えたり内省したり、日記を書き続けたから今の自分がいるんだよね。

続ける?

Web 日記は趣味だからね。

[ コンピュータ日誌 ]

[ 1月19日全て ]

2019年6月25日 (火)

HTML ページ中の mermaid 定義を自動的にクライアント側で SVG 変換し表示させる

6月上旬に使い始めMarkdown エディタ Typora で mermaid を使いダイアグラムを作成してみたらなかなか良かったので、先日 mermaid のデータから画像を単独で生成できるよう CLI を入れてみた。しかしやはり都度画像ファイルに変換して管理するのは面倒。ちょっとしたノートを置いておくスペース nNote では事前に画像ファイルに変換しないで直接ページ上に書かれた mermaid ダイアグラムを SVG 変換して表示されるように設定してみた。

mermaid.min.js を Web サーバに配置し、ページの下部に以下が含まれるようにフッタファイルを編集。

 <script src="/path/to/mermaid.min.js"></script>
 <script>mermaid.initialize({startOnLoad:true});</script>

これでページ中に

 <div class="mermaid">
 graph LR
     a --- b
     a --- c	
 </div>

のようにダイアグラムの定義をmermaid クラスの要素の中に書いておくと、ダイアグラムの SVG 要素が生成し置き換えてくれる。表示は以下のような感じ。

graph LR a --- b a --- c

画像ファイルの管理から解放されるのでいろいろ捗って嬉しい。

とりあえず nNote 全フッタで mermaid.min.js を読み込むようにしちゃったけれど 8.0.0 ので 1.11MB ありダイアグラムの無いページで読み込ませるのはちょっと忍びない。 mermaid ダイアグラムの定義がある時だけ読み込むようにした方が良いね。

[ 6月25日全て ]

2019年6月26日 (水)

HTML ページ中の Graphviz 定義を自動的にクライアント側で SVG 変換し表示させる

昨日 HTML ページ中の mermaid 定義を自動的にクライアント側で SVG 変換し表示させるようにしたらいい感じなので、勢いで Graphviz の DOT 言語で書かれたグラフ定義も Viz.js を使って SVG 変換できるようにしてみた。

mermaid では HTML ページ中の mermaid クラスをもつ要素を SVG 要素に変換するコードが入っているのだけれど Viz.js にはそれは無さそう。なので mermaid の実装を参考に dot クラスの要素を変換するようにしてみた。

 <div class="dot">
 digraph {
   graph [rankdir = LR];
   a -> b;
   a -> c;
 }
 </div>

と書いたら以下のように変換される。

digraph { graph [rankdir = LR]; a -> b; a -> c; }

mermaid よりずっとメジャーな Graphviz (互換)が使えるとさらに捗って嬉しいぞ。

Viz.js は mermaid よりさらに大きいので、さすがに全ページで読み込ませるのはまずい。なので Viz.js と mermaid についてそれぞれの定義があった場合のみ動的ロードするようにしておいた。

で、まずます動くようになったのでちょっとしたノートを置いておくスペース nNote だけでなく nDiki でも動くように設定しちゃった。Viz.js や mermaid が使えなくなった時のことを考えて記事の寿命が長い nDiki の方では多用はしないつもりではある。

[ 6月26日全て ]

2019年10月30日 (水)

HTMLCSS についての勉強会【日記】

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

[ 10月30日全て ]

2020年10月1日 (木)

iA WriterWeb プレビューGoogle ドキュメントに貼り付けて共有する

テキストファイルと Google ドキュメント間で内容を同期したい件について引き続き検討。

Markdown ファイルをローカルで更新したら Google ドキュメントに自動できれいに反映されればベストだけれど、そういうのは無さそう。共有したいノートの作成・更新頻度を考えると手動にするか。

iA WriterWeb プレビューを全選択しコピーするとリッチテキストとしてクリップボードに入る。これを Google ドキュメントに貼り付けたところいい感じに書式付けされた。

Markdown ファイルの最初の見出しの次に Google ドキュメントURLHTML コメントで書いておけば、更新時にさっと開ける。 Google ドキュメントへの反映も思ったほどは億劫で無かった。

うん、これでいいかなと。

今日から運用開始する。

2020年12月12日 追記

画像を データ URL 化して埋め込めば、その画像Google ドキュメントに貼り付けられた。

[ ノート・日記はテキストファイルに ]

[ 10月1日全て ]

2020年12月1日 (火)

今日のさえずり: Nintendo Switch で撮影した画面写真動画をスマートフォンに転送できるようになったの、メチャいいな

[ 12月1日全て ]

2020年12月23日 (水)

Markdown ファイルを Marked 2 で self-contained HTML に変換して Google ドキュメントに貼り付けて共有する(画像付きで)

Markdown ファイルを iA WriterWeb プレビューしたものを Google ドキュメントに貼り付けて共有する(記事1)時、画像データをデータ URL 化して Markdown ファイルに記述すれば一緒に貼り付けられることが分かった(記事2)。

でもやっぱり管理が面倒くさい。

そこまでするなら「別のアプリで self-contained HTML に変換」→「Web ブラウザで表示」→「コピー & ペーストで Google ドキュメントに貼り付け」を実行する方がいいのでは。いったん HTML書き出すのが嫌だなと今まで思っていたけれど。

と思って調べたら、インストールしてある Marked 2 が self-contained HTML に変換できたし、Google Chrome で表示して全選択からのコピー & ペーストで画像付きで Google ドキュメントに貼り付けられた。

こちらの方法にしよう。

[ 12月23日全て ]

2021年1月4日 (月)

iA Writer#nNote

iA Writer for Mac

Markdown

Markdown から HTML への変換に MultiMarkdown を使っているので MultiMarkdown 固有の文法が一部使える。

検索

ファイルリストのフィルタで検索しても探せない文字列がある。検索文字列の最後に * をつけると検索できる場合がある。

iA Writer for Android

フォーカスモード

AndroidiA Writer はフォーカスモードにするとカタカタ上下に画面が動くので逆に集中しにくい。

Dropbox 自動保存

テキストファイルを開いた状態でホームに戻った際に変更があれば自動保存される。ただし再度開いた時に Dropbox 上のファイルが更新されているかのチェックはないので、コンフリクトが起きる可能性はあり。一度編集画面からファイル一覧画面に戻る必要あり。

[ 1月4日全て ]

About Me

Naney Naney (なにい)です。株式会社ミクシィで SNS 事業の部長をしています。

nDiki1999年1月に始めたコンピュータ日誌を前身とする NaneyWeb 日記(兼パーソナルナレッジベース)です。

#nNote タグがついている記事は他の記事に比べて、より断片的・未整理・不完全なちょっとしたノートです。まだ結論に至っていない考えなども含まれます。頻繁/大幅に更新したり削除したりすることがあります。 それとは別に nNote にもちょっとしたノートがあります。

※内容は個人的見解であり所属組織とは関係ありません。

月別インデックス
Process Time: 0.083401s / load averages: 0.49, 0.51, 0.55
nDiki by WATANABE Yoshimasa (Naney)
Powered by DiKicker