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

Site

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

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

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

URL スキーム "file"

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

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

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

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

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

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

アイコンが並ぶよ

Site

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

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

すべて改善したつもり。

→ 続きを読む

幅が広くなった

Site

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

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

変更後の姿

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

---

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

いくつか変更:記事リスト、“続きを読む”、...

Site

先日サイト全体をリニューアルしたときに“ひ to り go と”は変更なかったんだけど、見た目の変更は必要なくてもユーザのことを考えるといくつか直す部分があるだろうと思ったので PHP で動く“ひ to り go と”システムをアップデート。

ナビゲーションバーをデフォルトで表示

これまでのデザインは「記事を読むのに余計なものは視界から消したい」という作者の気持ちが大きく反映されていたけど、いろいろ省略しすぎていてほかの記事へ行き来する方法がわからない人が多かったのではないかと反省。

ページ上部にナビゲーションバーがあったんだけど普段は隠れていた。カテゴリーや月の一覧を表示するのに上部の▼を押すなんて気づかないか。なので表示するのをデフォルトにしました。
(記事を読むときに邪魔な人は▲で隠すことができます。作者以外にわざわざ隠す人もいないだろうけど。)

記事の一覧

複数の記事を表示しているとき、ページ上部にそれらのタイトル一覧を表示するようにしました。

続きを読む

Timinder の紹介記事を書いて HTML5 の video タグを使ってビデオを置いてみたけど、これがサイトトップで表示されると毎回読み込まれてサーバの負担が心配になる。
なので“続きを読む”に対応しました。

もともと記事を省略されていちいちページを移動するのが好きではなかったので記事単独ページ(パーマリンク)に移動しなくても全文読めるようにしていたけど、何か記事を探しているとき興味のない長いコードなどあったら邪魔だろうという気もしてきたので過去の記事もいくつか省略するようにしてみた。

今回の記事のようにわざわざ省略するほどでもない記事は全文表示する方針なのでご安心を。

過去/未来のボタン

ナビゲーションバーには [←|→] ボタンがあるけど、ページの最後まで読んだときに押すのが面倒なので最後の記事の下にも同じ役割のボタンを追加しました。

ツイートボタン

シェアシェアうるさい世の中。基本的にソーシャルメディアが嫌いだけど Twitter のシンプルさは割と好き。なので記事単独ページの下部にツイートボタンを置きました。

サイト公式 Twitter アカウントも用意しているくせに今更の対応ではあるけれども。

サイトをリニューアル:モノクロアイコンメニュー

Site

前回のリニューアルでは、homepage.mac.com からの乗り換えということもあって大きく作り直した。サイト内を Documents / Products / Hitorigoto で分類して、上部のメニューで行き来するという構造もそのときに生まれたものだった。

最近のデザインの流れに“フラット化”というものがある。テクスチャ、凹凸、光沢など取り払って、見る側も作る側もコンテンツに集中できるようにしようというものである。
個人的にはそれに対して否定的な部分もあるけど、確かに味付けを濃くしすぎてコンテンツを邪魔していた部分もあった。なので今回は一部その流れも取り入れつつ、シンプルで見やすくて飽きないデザインを目指してみた。

→ 続きを読む

“ひ to り go と”の更新頻度が落ちている理由

Site

忙しい

これを言っていたらきりがない。

このサイトが @2x 画像を用意していないので Retina ディスプレイで見るとモチベーション低下

Retina 対応させるため、画像を Sketch で作り直している。意外に数が多いので大変。

そういえば Sketch は Adobe の Creative Cloud 一本化騒動のあと、日本でもだいぶ有名になった感じがする。勉強会まで開かれたらしい。

バージョン 2.0 の頃DrawIt と同じバグを引きずっていたりしてまだまだ未完成感が強かったけど、その後いい勢いでバージョンアップを重ねてバグは減り、パフォーマンスや描画品質も大幅に改善されている。今後も期待できそうなアプリケーションだ。

更新の手間が増えた

MobileMe の時代は RapidWeaver で作られていた“ひ to り go と”。記事を書いたらボタン一つでサーバ(iDisk)にアップロードできた。

サーバを変えてからは PHP + SQLite + .txt ファイルによる自作システムに移行。
Web ブラウザ上の作者専用ページで記事の管理をできるようにしたけど、動的なページをサポートしない Apple のサービスに長年いたせいか、「Web サーバのデータはローカルのコピーである」主義を引きずっているためちょっとややこしい。

手間がかかるけど、ローカルの管理ページで更新したあと、変更されたファイルをサーバにコピーしている。

あらゆる記事に貼ってある画像が一つのフォルダに入っているなどディレクトリ構造がごちゃごちゃしている部分を 1 日かけて整頓したのでだいぶ更新しやすくなった。

zumuya.com

Site

MobileMe まであった homepage.mac.com の機能があと数ヶ月でなくなってしまうため、移転したのだ。

homepage.mac.com/dy4/zumuya → zumuya.com

ついに取得、夢の zumuya.com ドメイン! URL もすっきりしたよ。

ほんとは余っていた PowerBook G4 で自宅サーバを運用しようかと思ったけど、電気代やセキュリティ、処理能力、設定の手間などを考えレンタルすることに。

でも最初に PowerBook G4 をサーバにしていたおかげで Apache の設定や PHP(homepage.mac.com では使えなかった)を試して覚えることができたのは大きな収穫。

ナビゲーションバー

すべてのページの上部に表示されるので移動が楽。このスライドしそうなデザイン、Max Themes の影響を受けたことは否定できない。

PHP テンプレートを作ってあるのでページを追加するのも楽。

Documents

Documents という名前のページを追加。定期的に更新する文書やちょっとした配布物などを置いていく。

Products

Products という名前のページ。ここには zumuya で発売しているアプリケーションの情報をまとめる。

ひ to り go と

“ひ to り go と”はこれまで RapidWeaver + 独自テーマで運営してきた。
確かに記事を追加するのは楽だったけど、人の作った型の上では、自分の理想を表現するには自由度が低く、余分な手間がかかる。

...ということで、自作。“ひ to り go と”専用システム。PHP で動くのだ。
自分しか使わない投稿/編集のページも丁寧に作ったので不満なし。

今回はついにカテゴリ機能を追加。記事の右上に、カテゴリに対応したアイコンが表示される。それをクリックすればカテゴリページの、その記事のあるところまで移動できる。月名も同様。

特徴的なのが、ナビゲーションバーの下にさらに表示されるバー。前回のリニューアルで追加した、1 2 3... と月が並び [←|→] ボタンがあるバーを拡張したのだ。カテゴリ/年の移動もここからできるようになった。

Twitter を始めたとき、もともと記事の短めな“ひ to り go と”とどう使い分けるか悩んだけど、あちらは下書きメモみたいに使って、こちらに内容をまとめることにした。

iPhone 対応

自分は iPod touch(非 Retina)しか持っていないが、できるだけすべてのページが iPhone でも読めるようにした。

それでは今後も zumuya をよろしくお願いします。