どうも！
Ganapatiです。
先日鈴木みそ先生の「ナナのリテラシー」というマンガを読みました。5年くらい前のマンガで電子書籍業界やアプリ業界の課題と将来への道筋を描いているのですが、今見ても「おおーーーっ」て思う所が数多くありました。
ITによって社会は大きく変わっていますが、非エンジニアであってもチャレンジして自分を大きく変えるチャンスはあるのでしょうね。そういえば今年は81歳の日本人のおばあさんがiPhoneアプリの開発でアップル社のイベントに招待されていましたね。おばあさんの人生は81歳にしてさらに変わったのだと思います。
非エンジニアの私でもはてなブログテーマを公開できた
昨日のエントリーでも書きましたが、はてなブログテーマを公開しました。
2か月くらい前からずっと作りたいと思いつつ、手を付けたのが今月のあたま。
実際に作業としてコードをいじり始めたのが10月11日頃だったと思います。
作業時間は1日2時間くらい。総作業時間は20時間くらいでしょうか。
コードのことなどまともに勉強したことがない私ですが、トライアンドエラーで何とか公開にこぎつけました。（コードを良く知る人は多分総作業時間5時間くらいでできるかと思います）
同じようにこれからチャレンジする人のために、公開までの工程と注意事項などをメモっておきます。
やったこと・考えたことリスト～前編～
まずは序盤の工程の紹介です。考えることがメインです。
人気のテーマ・サイトの研究
まずははてなブログのテーマストアから人気のテーマベスト10くらいを研究します。あとは珍しいデザインのテーマも。
具体的には次の点に注目してメモメモします。
- 人気テーマのデザインの傾向
- 人気テーマから採り入れたい要素（見出しデザイン等）
- 人気テーマがどうやって差別化しているか？
- 人気テーマのデモサイトでわかりやすかったのはどれか？
- 珍しいテーマが作られた経緯・理由
よく目にするサイトの研究
次に頻繁にソーシャルメディアやキュレーションメディアで見かけるサイトをピックアップしてメモメモします。これらは実際に多くの読者に受け入れられている要素があるということなのでしっかりチェックします。
- どんなカスタマイズをしているか？
- 真似したいデザインは？
特にデザイン面では人気テーマよりも人気サイトが参考になります。
はてなブログ系であればベストですが、その他のCMS(wordpressなど）もCSSベースのカスタマイズなら問題ないのでとにかくメモしましょう。
メモするときのポイントは後から利用しやすいようにURL付きでメモすることです。なお、ふと思いついたときにメモしたり見返したりできるようにクラウド系のメモサービスを使うことをお勧めします。
私はNotionを使用しました。
ナニコレ？すごすぎ！サクサク操作の多機能オンラインノートサービスNotionが無料＆便利でやばい - ワクワクして働くための生産性↗向上Hacks
自分はどんなコンセプトでテーマを作りたいか？
ある程度いろんなサイトを見たら、今度は「自分がどんなテーマを作りたいか」を考えます。
正直、はてなブログのテーマでやれることは限られています。デザイン面でのカスタマイズが9割になります。
逆に言えばデザイン面でどうしたいのか？そのデザインにはどんなコンセプトがあるのか？が考えるポイントになります。
もしかしたら、後になって「CSSでは実現不可能だ」と思うこともあるかもしれません。しかし、それでも一度は自由な発想で考えてみることをお勧めします。
自由な発想をする以前に目指したいサイトがあるのであればそれを目標にしても良いかもしれません。私が執筆時点で使用しているZenoTealだってワードプレステーマのStorkがデザインの参考になっていますし、Gigazineっぽいテーマもありますよね。
基本的な2カラムレイアウトであれば大体のデザインは真似できます。
ちなみに私はゆきひーさんの左メニューのサイトが最初の目標でした。あれってNakedをさらにカスタマイズしたテーマなんですよね。。。今度また真似します。
自分の技術の限界を設定
どんなコンセプトのデザインにしたいかが決まったら、念のため自分ができることも確認しておきます。
できないことはパクるか、頼むか、あきらめるかです。
私はできないことの方が多いので、一から開発は絶対にしないと決めました。
そしてパクりまくったテーマでも良いと決断しました。
実現したいリストを見本ベースで作成
さて、この段階でもしメモが雑多なものであったのなら、一度整理しておきます。
自分がやりたいことをリストにして、それに対応する見本サイトなどのURLを貼っておきます。
ここであまり力を入れる必要はありません。実際に作業する際にさっと見返すことができるようにしておくだけです。
カスタマイズ元にするテーマを決める
次に、１からテーマを作成することができない人は、カスタマイズ元となるテーマをどれにするか決めます。
実際にテーマのCSSを見てその中にできればカスタマイズメモが書いてあるテーマがベストです。
何のためのコードなのか最初から書いてあることは非エンジニアにとって重要です。
また、テーマによっては著作権的にカスタマイズしていけないものもあります。はてなのテーマストアもしくはテーマの中にその記載があるのでチェックしましょう。
GNUライセンスやMITライセンス、CC0 とか書いてあれば問題なしです。
なお、デモサイトなどでコードを公開していないテーマのコードを見るには次のような方法を使います。
① デモサイトにアクセス
② 右クリックして「ページのソースを表示」
③ 「stylesheet」で検索
④ 上から2番目にヒットしたのがテーマのソースになる
⑤ リンク先をクリックして表示。すべて選択してコピペする。
これでテーマが丸裸になります。
※こんな感じでページのソース上でわかります。1番目ははてなブログの基本となるCSS。2番目がテーマとデザインCSSが一緒になったCSSです。
なお、親切な人はテーマのコードをMinifyして改行などを消しています。
お手持ちのエディタで整形できない時は次のサイトで整形すると見やすくなります。
カスタマイズ元のテーマのCSSと対応するWEB要素を比較研究
カスタマイズ元のテーマのCSSが入手出来たら、どんな構成になっているかをチェックします。
できればデモサイトをChromeのデベロッパーツールで確認しながら行うと良いです。
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider
難しい機能は覚えなくてOKです。
上記ページの①で表示される「要素をクリックして調べることができるツール」さえ使えこなせれば問題ありません。
CSSに関してある程度慣れている人であれば、理解が進みます。
CSS初心者はGoogleで検索しながら勉強しつつ、値の部分を変更してどんな風に変わるか実際に操作しているうちに覚えます。私はそうして覚えました。
さて、ここまでは時間はかかるもののストレスの少ない作業です。ストレスがかかるのが次からのステップになります。
ここからが大変～やったことリスト中編～
HTML/CSSの知識がない人はここからストレスがかかります。。。
楽しむか強い意志を持つかどちらかです。
まずはデモ用のサイトを作る
デモ用のブログを一つ立ち上げます。公開・非公開はどちらでもOKです。公開してもどうせ誰も見ません。むしろ公開して自分でアクセスしないと「注目記事」モジュールによる表示チェックを後でできません。
既にあるサイトを使っても悪くはありませんが、カスタマイズしている間に訪れる読者に影響が出てくるのでお勧めしません。
カスタマイズ元のテーマのCSSをそのままコピペして新テーマを作る
デモサイトを作ったら次にテーマストアから新しいテーマを作成します。
テーマの名前や説明は適当で構いません。ただ、テーマ名が被ると使えないようなので、あらかじめ決まっている人は正式名で入力しておくに越したことはありません。
はてなブログProの人で独自ドメインを充てたい人はデモサイトのコンテンツを作りこむ前に独自ドメインを充てておきましょう。後からURLを貼り直すのは面倒です。
また、テーマの編集前後の変化を見たい人は2つテーマを作成しておくのもありです。（その代わりテスト用のブログをもう一つ作る必要がありますが・・・）
テーマのコードはとりあえずカスタマイズ元のテーマのコードをコピペします。
ただし、前述の手法（デモサイトからのコピペ）でコードを入手した場合、コードの途中から「デザインCSS」に入力したコードになっている可能性があります。
「system section」で検索するとその区切りがわかります。参考まで。
なお、テーマを作るときの注意事項ですが、
- テーマ一覧表示用の何らかの画像が必須です。適当でOK。
- ライセンス選択は後で変えられません。形式的なものですが良く読んで選択を。
もちろんこの時点ではテーマ非公開です。公開して途中でコードを誰かに盗られて先に公開されたらショックです。
デモサイトにインストール
テーマを作成できたら、とりあえずデモサイトにインストールしましょう。
2つテーマを作成した場合は当然それぞれ別のデモサイトに充てます。
ここで覚えておくと良いこととしては、今後テーマを編集した時、、、
- もしインストールし直す場合はデザインCSSの中身は白紙状態になるのでバックアップを取っておく。
- インストールし直さない場合はブラウザのキャッシュをクリアしてからデモサイトの再読み込みをする。
ということです。
私は安易にインストールし直してデザインCSSをすべて失くしてしばらく呆けた経験があります。かなり精神的に痛かった思い出です。
最低限必要なアセットをセッティング
立ち上げたばかりのデモサイトは何もなくてデザインがどうなるのかわかりません。
最低でもブログで使用する見出しや装飾がわかるような記事を作成しておきましょう。（よかったら私のデモサイトで公開しているアセット一覧のページを参考にしてください。）
また、サイドバーやパン屑リスト、サムネイルなども忘れずに設定しておきましょう。とにかく使えるものは全部出すのが基本です。
これを私は「アセットリスト」と呼んでいます。一般的な言い方かはわかりません。
見た目のちょっとしたカスタマイズから始める
アセットリストが準備できたらカスタマイズ開始です。先に紹介したChromeのデベロッパーツールをフル活用します。
まずはやりたいことリストとURLメモを持ってきて、実際に見本とするサイトのコードとデモサイトのコードを置き換えてみます。(詳しいやり方は割愛します。適当にググってください）
置き換えつつ適当に調整していい感じに仕上がったら、カスタマイズ元のテーマに書き加えるのではなく、いったんデザインCSSに書き加えていきます。
何故デザインCSSに書き加えていくかというと、理由は2つあります。
- いちいちテーマストアでテーマを更新するのが煩わしい。
- ものによってはテーマ内よりもデザインCSSでのカスタマイズ紹介にしたほうが良いものもある。
ということです。
（※ただし、ものによってはテーマのCSSに書き加えないと変更できないものもあるので、そこは臨機応変に）
ちなみに、面倒でもメモをコード内に書いていきましょう（こういうやつ⇒/＊ XXXXX ＊/ とか <!- XXXX -> ）。また、完了したリストはそれがわかるようにメモに書き加えていきましょう。
また、エディタは色々使ってきましたが非エンジニアにはBracketsがちょうどいい感じです。とにかくわかりやすいし使いやすい。
テーマにない機能・デザインを盛り込む
次にやることは、カスタム元のテーマ上にはなかったものの自分なら採り入れたいもののコードを記入する事です。
例えば、はてなブログのカスタマイズ記事とかが参考になります。
これはやる必要がるかと言われればそうでもないので、各自の価値観で決めましょう。
基本的に人気テーマのCSSを元にカスタマイズする場合は必要と思われるものがしっかりそろっていますので、必要以上に手を加える必要がありません。その結果、各ユーザーが自分独自にデザインをカスタマイズできるようになりますが、一方で何も手を加えられない人にしてみると「シンプル過ぎる」傾向があります。
逆にテーマにない機能、例えば「併せて読みたいボックス」や「カエレバヨメレバデザイン」などを設定しておきたいのであれば、それはユーザーにしてみれば便利ではありますが、デザインを自分独自のものにする余地が狭められてしまいます。
この辺りは一長一短。
私の場合は「オールインワン」というメリットもあるだろうと思い、できるだけ盛り込むようにしました。
カスタマイズしながらはてなブログの構造を理解する
さて、カスタマイズをしていると、なかなかうまくいかなくて壁にぶつかることがあります。というか非エンジニアにはしょっちゅう出てきます。
教えてくれる人がいないときはトライアンドエラーしかありません。
私もその一人です。ボッチなのです。
しかし、トライアンドエラーをしていると、次第にはてなブログの構造が理解できるようになります。
そして人気テーマの制作者や、人気のカスタマイズ用コードを開発した人がどんな工夫をしてそのコードにしたのかがわかるようになります。
ここでの苦労は決して損しませんので、苦しくてもあきらめずに調べてみることをお勧めします。
私の場合、3カラムレイアウトをスッキリ見せるためのJavaScriptコードとそこから生成されたコードを見てものすごく理解が進みました。ゆきひーさんの左メニューのCSSもすごかったですね。真面目に勉強になります。
ちなみにざっくり構造をメモしておきます。
- サイト名や説明が表示されるタイトル部分
- TopEditAreaと呼ばれるタイトルの下に表示される部分
- 記事がメインコンテンツ部分
- サイドバーとして表示されるBox2
- フッタ部分
id名などはご自身でお確かめください。初心者が知っておくと良いことは、これらの四角形のエリアが縦横に並んだり重なったりしてはてなブログは構成されているということです。逆に言えばこれらをどのようなサイズでどのような位置に表示するかからカスタマイズが始まるということなのです。また、レスポンシブなテーマにしたいときは画面幅毎に設定を変える必要があるということでもあります。
ユーザーの環境を想定したカスタマイズ
カスタマイズがある程度進んでくると、サイトの全体像が見えてきます。
このあたりに来るとテンションが上がってきます。
カスタマイズの後半でやるべきことは、ユーザーの環境を想定したカスタマイズです。例えば以下のようなことをチェックします。
- デバイスによってどう表示が変わるか？
- ブラウザによって表示が変わるものがないか？
- Proユーザーと無料ユーザーでどのような差が発生するか？
- テーマユーザーが自分でカスタマイズしたい項目はどれか？
テーマ用CSSとデザインCSSの整理
最後にテーマストアにアップするテーマ用のCSSとユーザーにデザインCSSに入れてもらうCSSを分けて整理します。
もちろんデザインCSSに入れるものは少ない方が良いのですが、ユーザーの気持ちになって整理すればよいと思います。
整理する際の注意事項としては、おなじファイル内で重複がないようにすることです。そのためにも、カスタマイズ元の記載順番にそって該当箇所に上書きしていきましょう。
ついでにですが、すべてのコードにどのようなものが入っているかメモしておくと後で混乱しにくくなります。サポートもしやすいですね。
※私はこんな感じで作りました。
整理後のCSSを再度適用し抜けがないかチェック
整理が終わったら、テーマストア上でテーマのコードを更新し、デザインCSSを入れ直しましょう。
ブラウザのキャッシュをクリアして再読み込みしたら、表示がおかしくなってないか確認します。
おかしいときはだいたい必要なコードを入れ忘れている時です。何度もカスタマイズしていると、どれが望んでいるコードだったか忘れてしまいやすいので、きっちり管理しておく必要があるのです。
気が抜けないリリース～やったことリスト後編～
さて、最後にリリースがあります。これも結構手間です。公開するだけでしたら結構簡単ですが、不親切なテーマは誰にも使ってもらえないので・・・。
完成したデモからコードを抜き出して記録する
まずは、完成したデモサイトから必要なコードを改めて抜き出しましょう。
デモサイトをイメージしてテーマをインストールしたのに、実際にはそうならなかったときのガッカリ感をユーザーに味合わせたくないじゃないですか？
なので、自分がデモサイトで使っているものは全部オープンにするのです。
そのための準備です。
私の場合
- head内
- タイトル下
- 記事上
- 記事下
- サイドバー内HTML
- フッタHTML
- デザインCSS
私はこれらをデモサイトが完成した時点で全部保存しています。
もちろん、予め別途コードを保存している人もいるのでしょうが、ユーザーは動いているデモサイトで判断するわけなので、バックアップとしてデモサイトからコピペするようにしています。
テーマ用のCSSはMinifyする
テーマストアで入力するCSSは他のサイトにも影響します。
なのでMinifyしておくと親切です。特にメモを多く残したテーマほど効果があります。
テーマストア上にアップ、動作確認
Minifyしたらテーマストアに再度アップして、デモサイト上で動作確認・表示確認をします。
Minifyをするツールの性能によっては上手く表示されなくなることがあるためです。
説明文を作成
テーマを公開する前にテーマの説明文を作成します。
はてな記法が使えるそうなので、デモサイト上で作成してからコピペしてアップしたほうが楽です。
デモサイトに直接来た人にも親切ですしね。
導入ガイドを作成
できれば、デモサイト上にテーマの導入ガイドを記載しておくと良いと思われます。（私はまだまだ記載途上ですが・・・）
主には以下のようなものが良いでしょう。
- テーマのコンセプト
- テーマの主な特徴・機能
- テーマで使用しているコード
- 初期設定でやってほしいこと
- グローバルメニューの設定方法
- その他デモサイトに近づけるための方法
- 更新情報を受け取るための方法
フィードバックが来るようにする
最後に、フィードバックをいただくための仕組みを考えます。
要望や欠陥の報告がテーマをさらに良くします。
最後に公開！！
後は公開するだけです。画像を作るのが難しい人はモックアップ作成サービスで画像を作ると楽です。（良いデザインのものは有料ですが・・・）
いかがでしょうか？結構長い道のりですが、最後に公開したときの感動と言ったら・・・。
参考になれば幸いです。