見た目は変わらずとも

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 周年! 記事の内容の方も幅を広げたいものです。

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

Site

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

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

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

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

記事の一覧

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

続きを読む

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

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

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

過去/未来のボタン

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

ツイートボタン

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

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

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

Site

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

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

→ 続きを読む

© 2005-2018 zumuya