シンタックスハイライト

Site

“ひ to り go と”は技術ブログとかではなく“机の上系情報サイト”のつもり1なのだがコードを扱う記事も増えてきた2のでシンタックスハイライトを導入。

こういう誰にでも需要があるものは高機能なライブラリがいくつも存在するけど、まずはシンプルで軽量な highlight.js を採用することにする。行番号を表示したりはできないから必要があればそのうち強力なものに乗り換えるかもしれない。


  1. 本当は写真を載せた賑やかな記事を増やしたい。 ↩︎

  2. コードを貼ると長い記事を書いたような錯覚で簡単に満足感を得られるからついつい書いてしまう。 ↩︎

毎月更新できた

Site

今年は月に一度は更新できたことになる。“ひ to り go と”史上初かも。やればできる!

ここ数年は記事を書く頻度が落ちていた。 気軽に短文でつぶやく場ができてしまうと記事を書くほどのアウトプット欲がなかなか貯まらない問題がある。どうせ記事を書くなら内容がないといけないと思ってハードルが上がってしまうし。

そんなハードルを少しでも下げるため、独自 CMS に少しずつ積み重ねてきた対策が明らかに効果を発揮している。直接的に大きく貢献したのは生の HTML を書くのをやめて Markdown1 で書けるようにしたことだが、それを実現できたのは数々のリファクタリング2のおかげであることも忘れてはいけない。そして“ひ to り go と”専用エディタ for Mac も気持ちを盛り上げてくれる3

記事の数は増えたものの青いカテゴリ(MacDev)の記事ばかりに偏ってしまったのが反省点か。コードがあると長さが増えて簡単に「それっぽい記事を書いた満足感」を得られてしまうけど自分の理解力が高いとは思えないし、基本的な用語を検索したときにヒットしているのを見るといつも恥ずかしいというか罪悪感がある...4


  1. 正確には Markdown をベースに“ひ to り go と”のために拡張(→ 2017.12.3)したもの ↩︎

  2. CSS → SCSS の書き換えも ↩︎

  3. というか工程に Mac っぽくない体験が混ざることによって気持ちが盛り下がるのを防いでくれている。 ↩︎

  4. なのでみんなもっと Cocoa 記事書いて! ↩︎

見た目は変わらずとも

Site

2018 年にもなってホームページの見た目や内部実装をいじくりまわすのが趣味な人間です。

昨日“Mac 開発話が聴ける Podcast エピソードまとめ”を公開(→ 2018.9.8)したけど、それをきっかけとして Web サイト全体のシステムに手を入れたので変更点をメモとして残しておく。

ファイルを加工して表示 - HTML のように管理

Documents に新しいページ(前述のまとめ)を追加するにあたり、この作業を効率化したくなった。Markdown で書きたいし。

→ 続きを読む

記事はなくとも

Site

最近は記事を書く頻度がずいぶんと落ちていたけど、決してこのサイトを放置しているわけではない。一区切りついたのでこれまで加えた変更をメモしておこう。

レスポンシブデザインになった

このサイトのスマートフォン対応といえば、iPhone をユーザエージェントで判別して分岐した CSS で、PC 用のページ幅のまま -webkit-text-size-adjusttransform: scale() を組み合わせて必要な部分を無理やり拡大するというあまりにひどい状態だったけど、今はもうレスポンシブ。ウインドウをリサイズするとポコポコと変化するのが楽しい。

広くても
狭くても

特にアナウンスはしていなかったけど、これはもう 1 年ぐらい前に加えた変更である。

→ 続きを読む

記事編集画面に“Finder に表示”ボタンを追加 - ShowInFinder

Site

記事を書くモチベーションの 3 割ぐらいは記事編集画面の出来にかかっている。

以前のリニューアルのときにもちらっと見せたように(→ 2015.3.14)文章はすべてあのブラウザ上の画面で編集している。JavaScript ベースのエディタ CodeMirror を貼り付けてそこそこ快適になったと書いたのはその通りなのだけど、まだ不便なことが。

PHP で書かれたこの画面には添付するファイルを管理する機能がない。なので画像などを貼ろうと思ったら記事ごとに作成されるフォルダを Finder で開いて用意したファイルを入れるという作業をしている。Finder を使ったファイルの移動なんて大した作業ではないし、参考資料や元画像も同じ場所に入れておけるのでこの管理方法は便利なんだけど、Finder に切り替えてフォルダを探すのがとても面倒。これはなんとかしたい。

URL スキーム "file"

最初に試したのが、"file" という URL スキーム。フォルダへのパスを元に <a href="file:///Applications/">〜</a> みたいなリンクを作って記事編集画面に置いておけば簡単に開くことができるはず。でもこのリンクをクリックするとわかるように、機能しない。

マシン上にテストの HTML ファイルを作って直接 Safari で開いた場合は動くので、たぶんセキュリティ上の問題(システム関係のファイルを開いてしまうような?)を避けるためにこんな仕様になっているのだろう。外部のページじゃなくて localhost へのアクセスでもダメ。localhost ぐらい有効になってくれればいいのに。

専用アプリケーションを用意

こうなったら自分で“Finder に表示”する URL スキームを用意してしまおう。Mac で好きな URL スキームを追加しようと思ったら専用のアプリケーションを作るのが早い。早速 ShowInFinder.app を書いた。

↑ 記事編集画面はこんな感じに。小さくてわかりにくいけど、カーソルのところのボタンを押すだけで Finder がフォルダを開いてくれる。便利になった!

役に立つ人がいるかどうかはわからないけどせっかく作ったので配布します。

アイコンが並ぶよ

Site

先月、幅を広くする(→ 2015.2.14)のと同時にいくつか細かい変更をした“ひ to り go と”だけど、まだまだ不満は残っていた。

  • せっかく各カテゴリにアイコンがあるのに、記事の右上に表示するだけでは活かしきれてない。
  • @2x 画像を用意していないから Retina ディスプレイで見ると悲しくなる。
  • 月ごとの記事を表示するページだけでは読者が好みの記事を探しにくい。
  • HTML で textarea を貼り付けただけの編集用ページが使いにくい。

すべて改善したつもり。

→ 続きを読む

幅が広くなった

Site

昔からこのサイトのデザインを考えるときは初代 iBook の“幅 800 px”のスクリーンに入りきるように作っていたのだけど、近頃はどうも窮屈で字が小さく思えてきた。“ひ to り go と”はサイドバーがないから余計にそう感じる。

なので、初代 iBook をメインで使っている方々には申し訳ないけど、記事の表示幅を広げました。

変更後の姿

  • 記事の表示幅が 100 px 広くなった。- - フォントサイズが 13 px から 15 px になった。
  • “続きを読む”が目立つようになった。
  • 記事の上にある記事リストやページの下部にあるナビゲーションボックスのデザインを変更。
  • 長い記事タイトルが途中で折り返して複数行になったときの問題を修正。
  • iPhone での表示をより最適化。
    日付が記事ボックスの外に表示されるようになったのでタイトルが広く表示できる。
  • その他の細かい修正。

---

“ひ to り go と”は今年で 10 周年! 記事の内容の方も幅を広げたいものです。

© 2005-2019 zumuya