2015-for-wkwkrnhtの軌跡-RT狂の思考ログ

この記事は2015-for-wkwkrnht制作時のものの焼き直しです。

現時点でRT狂の思考ログは、このwordpress.com版とgegahost.net版とがあります。これは、私のツイートから、察しが着いていた方もいらっしゃると思います。しかし、

このツイートにある通り、現状に満足してません！ よって、記事は最優先でwordpress.com版に、外部ドメイン版はgegahost.net版を記事に使い、エックスドメイン版は今後のテーマ作成のために半クローズド状態で運用することにしました。
また、現時点の予定としましては、Habakiriをベースとしてマテリアルデザインぽいモノを目標として創っていく次第です。つきましては、副産物である子テーマをここにちょこんと、置いて閉めさて頂きます。以上で、場末ブログの大改造話のプロローグおしまい。その後、彼はtwentyfifteenにほれ込み、自作テーマを組み上げるに至った。

Simplicityからなんでわざわざ変えんのさ(2016-03-19T16:21:00+09:00)

これはですね、私は昨今のマテリアルデザインブームで

• モバイルは1カラム＋ハンバーガーメニュー＋固定ヘッダー
• PCは2カラムで影を強調する

のが、至高だと陶酔しきったせいですね。ハイ。()そのために、これまで長い長い旅をしていました。Stingerに始まり、マテリアル、Habakiri ……  その中で、一番しっくり来た形がSimplicityだったんです。

その折に颯爽と現れたTwenty Fifteen

そうなんです。偶然、さわったところ思いのほかに理想通り過ぎて一目惚れしちゃったんです。これはもうこいつで逝くしかねえと。

とはいっても、機能性は……

それはもう最悪です。なんせ、二大日本製テーマを経験してしまった私。カスタマイザーを見て、膝を落とすしかなかったのです。そこからは、Google先生との闘いでした。まず、子テーマを作って、なんだらかんだら……と。その結果、以下の機能を移植できました！

• TOPへ戻るボタン
• はてなブログカード
• アイキャッチ自動設定
• ＠なんとかと書くとツイッターアカウントにリンクする機能（例:@wkwkrnht）
• OGP設定
• シェアボタン
• 関連記事表示
• 検索ヒット数表示
• 検索キーワードのハイライト
• アナリティクスコードの出力
• ウェブマスターツールへの対応(GoogleとBingのみ)
• 無駄に長いプロフィール入力欄

もう満足です！(こんなブログエントリー書いてる時点でお察しですが…………)

デザインもちょこちょこと

見出しデザインと月別アーカイブ、記事一覧についてスクロール量が少なくなるように、影が強調されるように変更しています。シェアボタンやらコメント欄やらが固まってない状態ですし、AMPについても未対応。カスタマイザーでの色変更に未対応部分があるので、少しずつ改善して行きたいところです。

進捗報告です(2016-01-17T19:33:47+09:00)

先行公開とか言いつつすっかり専用記事になってますが、一応、少しづつ進めてはいます。代表例がここの再公開とエックスサーバーエックスドメイン版の非公開化になります。 しかしもって、リツイートとリアルのせいで疲れ果てた結果まったくソースに手を付けないという結果に……。

このサイトを公開するのに、余計なことをしていたせいもあるんですけどね。

今後の方向性

とりあえず、simplicityカスタム(要はこのサイト)はヘッダーと記事一覧に影付けを。サイドバーとモバイルメニューの全体調整を行ったら終了という形にして。エックスドメイン版で、思いのほかいい動きをする「Twentty Fifteen」と、しばらくイチャコラしてようかなと。
ある程度まで、まとまったら記事にしたいと思います。

2015 for wkwkrnhtを大規模アップデート(2016-04-24T20:19:21+09:00)

AMPのデバックをメインにずっといじってました。(だから、ブログ書けって！)いつものようにリスト化すると、

• ブログカードをはてな経由からEmbed.ly経由に変更
• 同時にEmbed.lyで共有できるように
• ソーシャルナビでツイログとついフィールがアイコンフォントで表示できるように
• ログインボタンとか管理者に必要なメニューが表示されるように
• AMP対応(？)
• ソースコードハイライトに対応(by highlight.js)
• アイコンフォントを純正からFont Awsomeに変更
• AMPのバリテーションエラーを解消
• ブログカード(はてな・embed.ly)を生成するショートコード追加
• 上記に伴いURL直書きの挙動をノーマルに
• シェアボタンからプッシュ通知登録ボタンを消したうえで、Pinterestへのシェアボタンを追加などの整理
• ヘッダー内に著者のGoogle＋ページを出力するように
• ソーシャルナビゲーション内でonesignalとpush.dog、push7.jpのURLを登録するとベル(push7.jpは雷)が表示されるように
• feed.lyもソーシャルナビゲーション内でそれっぽく表示されるように
• スクリーンショットとQRコード生成を、URLベースで行うショートコードを追加
• Disqusウィジェットを追加
• author.phpで”あの”長いプロフィール情報が表示されるように(本当に入力内容を表示するだけです)
• ようやくモバイル表示でのシェアボタンの表示調整をしました

こんな感じかな。まだスタイルなど微調整が済んでないので、早めに済ませたいところです。上から4番目のものは、新しくできたベルの隣にあるボタンのことでこの記事の埋め込みコードが自動的に排出されるようになっています。ぜひとも活用してください。そのほか、新しくamp.phpをcreatorclipをガッツリ使いながらつくりました。固定ページと投稿ページのURL末尾に/?ampだの/?amp=1とつけると体験できると思います。AMPぺージのデザインは未完成なので、いい案を募集中です。また、AMPでもブログカードが使えるぽいのですが、英語力不足で該当ドキュメントが読めないのでまだ実装できてないのが歯がゆいです。次の安定版(≒こちらのサイトのテーマ)では、Mediumにあるという共有方法をなんとか実装してみたいです。まああとは、Githubにソース公開してるから読んでください。モチベーションが続けば、2015 by wkwkrnhtとして親テーマ化の後に、カスタマイザー対応なんかをしていければいいなと思います。

やっぱり、自分には自分の作法がある(2016-05-10T00:39:46+09:00)

予想の付きやすい結末ですが、結局、TwentyFifteenベースのテーマは諦めます。それで、1カラム+固定メニューな新テーマをイチから作ることにしました。その経過の成果物である二つのテーマについては、後日、しっかりとしたページをつくって配布したいと思います。それを待てない方はGithubの方からどうぞ。（いらっしゃるかなぁ（汗））

なぜ方針転換したか

これは、 * 開発中ずっと見ていて飽きたから * 他人の書いたコードを上書きするから、どこがどう作用しているのか等の全体像が掴みずらい この二点に集約できると思います。さらに、環境上仕方ないのですが、サイドバーがうっとうしくて1カラムが羨ましくなったということもあります。今後は、これらの反省点を活かしてシンプルであり、機能性はしっかりあるテーマを完成させていきたいと思います。

指針

特徴は、常に下部のボタンから共有とメニュー呼び出しが出来るということ。それを今回、新テーマ（仮）としてHTMLから作りたいと思います。
流れは、HTMLファイル作成→アイキャッチ(仮)作成→CSSで整える(ここで骨組み半分完成)→仕組みの要であるメニュー部分のスクリプト部分とかを作成→レビュー(ここでしっかりさせる)→[SNS部分も同様に](ここで骨組み完成)→WPテーマ用にリファイン(林家次男さんの連載参考に)→レビュー→カテゴリーのように少し手間のかかるページに対応→レビュー→見つかりません系ページの作成→リファクタリング→今まで必死につけてきたfunction.phpにある便利機能を追加→レビュー→WpTHKを参考に高速化、最適化→レビュー→ロゴ作成→SEO(主に構造化)→完成
こんな感じになると思います。ファイル構成は、

• style.css
• functions.php
• 一覧ページ用のテンプレート
• 投稿ページ用のテンプレート
• 固定ページ用のテンプレート
• メニューと共有メニュー用のスクリプト
• ロゴ画像
• 「イメージがありません」な画像
• 404テンプレート
• 関連記事表示テンプレート

ぐらいかな。関数内で場合分けをして、特殊カードを出力するから大分ファイル数が少なくなる見込み。頑張って完成させるぞ！オー！