ブログリニューアルの制作手順についてつらつらと。

はい！Reoです！

先ほどの記事「ブログをリニューアルしたので変更点を紹介します！」を書いてる途中にSSL化できてないところを見つけ、記事を全部見て回ってましたorz

 

css勉強・環境構築から約2ヶ月かけてようやく一区切りつけました。一区切りつきましたではなく、つけましたです。

これからも進化させていくつもりなのですが、そうこうしていたらいつまでも区切りがつかないので、今回結構無理やり区切りをつけちゃいました。

 

ここまでの制作について少し書いていこうと思います。

CSSの勉強し直し！

このブログを改装するにあたって、まず最初にcssの勉強をし直しました。

というのも、2ヶ月前の自分はflexboxって何？border-box？っていう状態でした。

html/cssを勉強したのがそもそもhtml5に成り立てでcssもflexboxがない時代でした。（あったのかも知れないけど）

自分はずっとその知識でやってきていたので、以前のブログデザインはfloatでめっちゃ頑張ってました。それでレスポンシブまで頑張ろうとしてました。

 

やばいなと思ったのは人のコードをチラッと見てから。border-boxってなんだ？って（最初はこれがflexboxのことなのかと思ってましたｗ）

というわけでまずは知識の更新作業から始めました。

「いちばんよくわかるHTML5&CSS3デザイン きちんと入門」を一読しました。

 

これは本当に読んでおいてよかったです。flexbox死ぬほど使いました。

 

WordPressのローカル環境を構築する！

次にWordPressのローカル環境の構築をしました。

VVV+WordMoveでWordPressのローカル環境を構築するぞッ！【Xserver】

 

今まではFTPで直接ファイルいじって飛ばしてってしながら、テスト用ドメインでテーマを作って、テーマができたら本番に適用していました。

今回流石にそれはやばいなーと思ってローカル環境を構築することにしました。

 

WordPressのローカル環境のお勧めを人に聞いたところ「Local by Flywheel」がいいよと言われ、まずはこれを使ってみました。

が、

合わなかった…。既存サイトを丸っと持ってくる方法がよくわかりませんでした。挑戦はしたんですけどよくわからんエラーがいっぱい出てましたねー。

 

んで結局VVV+WordMoveで構築しました。これもハマって数日戦ったんですけどね。でもこっちの方が頑張れました。

結果的にこっちのほうが自分に合ってました。GUI操作ってイマイチどこ触っていいやら探さないといけなくて面倒いんですよね。ターミナルでコマンド打つ方がとても楽。

 

ここまでで約2週間かかりました。

 

デザインを考える・・・が

いやーーーー今回デザインするのが一番しんどかったです。

ザクザクとノートに書いてみる。

雑ですが、単一記事の画面は作りたい形が決まっていたので、大方最初に決めた通りです。

この4カラムの形はDiscordリスペクトです。Discord本当に好き。

 

しかし本当にトップページと記事一覧が全くといってほどなんのアイディアも出てこないんですよ。

しょうがないからまずはこの形だけ実装しました。

これをベースにデザインをしていったのですが本当になかなか迷走してました。

ビルに見立ててみたり。

今までのブログが、画像ある時は潜水艦、ない時は魚っていう絶妙なセンスだったのでそれに負けないもの…と考えてしまいとにかく全然デザインが進まない。

 

これはもうだめだ、先にトップページのデザインをしよう！と思いたつ。

こっちも結構つらかったんですが、記事一覧よりはマシでした。

んでこれを実際に絵を描いてはめてみる。

これはむしろPhotoshopにスクショ撮った上から描いてます。

ちょっとしっかり描いて載せてみる。

 

なんか納得いかないわけです。

そこからさらにトップページのデザインを投げて、とりあえず単一記事の実装しよう！と思い立つ。

そんなこんなしてたらですね、デザインを決めないとこれ以上コードが書けないっていう状態になりました。めちゃくちゃデザインを後回しにしました。

 

なんとなくドット絵でしたいとは思ってたんですが、ドット絵ツールは持っていても書き方もオレオレだし、ドット絵警察怖いしで躊躇っていたんですが、誰だって最初は初心者だし好きなもんは好きだし良いよね！って開き直ってやりました。

このブログ内の一番最初の素材がコレ。

今はただポツンとおかれてるだけになってますが！！！

使ったツールとして表示してるんですが、WordPressの絵とかまだ描いてないのでデフォルトのままになってます。早めに描いて差し替えておきます。

 

それからトップページの絵を描き直しました。

コレ本当めちゃくちゃ時間かかった。でもドット絵って１ドットのズレがめっちゃ気になってダメね・・・。修正できずにいるんですが、その辺も余裕あるときに直さねば。

頑張って描いたけれどコレを動かすにはなかなか死ぬのではと思ってます。

ドット絵描いてる人本当すごい…。尊敬します。

 

んでふと目にはいるAsepriteファイル。

もはや一目見てパクリだとわかりますね。リスペクト！！！！（

でもAsepriteのファイルはちゃんと内側も影があるんですが自分のにはないので、パクりきれていないです。

 

でもこれのおかげで死ぬほど悩んだ記事一覧の画面ができました。コレダーーーーーー！！！！ってなりましたからね。ここから今のデザインになるまでは本当早かったです。

ドット絵は至らないところばかりだと思うので、その至らないところがわかるようになるまで頑張って描きたいと思います。

そしたらまた都度差し替えします。まずは足りないところを埋めねば。

 

記事に追記を表示する！

以前までは追記ってなかったんですが、書く場所と表示する場所を設けました。

投稿画面に追加してあります。右側の使ったツールのところは左サイドバーのアイコンと連動してます。

追記タイトルがある場合にのみ、記事の一番初めに追記があると明示する実装になっています。

ほとんどの記事に追記をしたんですが、大事な追記の場合のみ、最初にリンクが出るようになっています。

 

全ての記事をチェック！

全ての記事を一度全部読みました。140記事くらいあります。

んで思ったことを追記に書くってことをしてました。暇なんですかねぇ。

 

全てのSwiftの記事をSwift4に対応！

140記事中50記事ちょいぐらいがSwift記事でした。

頭おかしいんじゃないですかねえ。暇なんですかねえ。

 

いやーーーーしんどかったですね。

その後ですね、gistを貼ると何故かレスポンシブがおかしくなったり、移行したばかりのHighlight.jsが関係ない

タグでも反応しちゃったりで、すごいハマってました。

 
全てのシンタックスハイライトをprism.jsに移行！
既に全記事確認を2周しておりますが、さらにここからシンタックスハイライトをprism.jsに移行しました。
最初はSearch Regexを用いての移行をしたんですが、全てが抽出できたわけじゃなかったので結局チェックも含めて全ての記事見て回りました。せっかく手打ちで変えるんだからと、ちゃんと言語に合わせたハイライトになるように修正しました。
なので以前よりコードは見やすくなってるはず！です。
 
記事の参照リンクを表示！
これも追記と同様に、参照リンクを貼る場所を投稿画面に設けてやりました。
そして全ての記事の参考って書いてあるところのリンクを
こんな感じでまとめて表示するようにしました。
これが4周目です。要領悪すぎて泣けるね。
 
ひとことメモを実装！
こっちのデザインはなんも考えてないですね。付箋ぽくなれば良いやって適当に作ってます。
ひとことメモはカスタム投稿です。
自分のWordpressの管理画面はこんな感じになっています。

つくったものリストも簡単に投稿できるようにしてあります。
ひとことメモのカテゴリに合わせて関連記事を出したり、投稿記事に合わせて同じカテゴリのひとことメモを表示させたり、地味に凝っています。本当地味ですが。
 
カスタム投稿を作るのはなれているので機能自体はすぐできたんですが、配置するとうまいことレスポンシブしなくてちょっとハマりました。
 
そういえばレスポンシブなんですよ。あんまり綺麗ではないですが。これでもモバイルファーストのcssを書いてあります。断然PCから見て欲しいですけどね！
 
この時点で仮リニューアルさせました。この後は仮リニューアル後の作業です。
 
プロフィールページを作りました。
管理人についてのページですね。その前にこのサイトについてのページも作りました。サイトについては適当に書き直しただけです。
 
管理人についてはPCからだとこんな感じのページになっています。

デザインはもはや考えてないですね。これまで使ったパーツを元に手の赴くまま作ってます。
このページは固定ページなんですが、吹き出しの近況部分が実際の記事部分になっています。なので管理画面からすぐに変えることができます。
残りは配列作ってそれをテーブルに表示していくってことしてます。
 
例えばlikeの部分は
<?php
    $like_data = array(
        'programming' => 'Swift',
        'game' => '<a href = "https://duelyst.com/">Duelyst</a> / <a href = "http://store.steampowered.com/app/486310/Meadow/?l=japanese">Meadow</a> / THE IDOLM@STER',
        'music' => '<a href = "https://www.youtube.com/watch?v=RwCl11tyWP0&index=20&list=PL20A42D0A826C3BBD">BUMP OF CHICKEN</a> / <a href = "https://www.youtube.com/watch?v=8d7q5I2ScLk">WEAVER</a> / <a href = "https://www.youtube.com/watch?v=ESx_hy1n7HA">Mili</a> / <a href = "http://www.nicovideo.jp/watch/sm19969663">波音リツ</a> / <a href = "http://www.nicovideo.jp/watch/sm28413235">重音テト</a> / <a href = "https://www.youtube.com/watch?v=gttDL1szd4E">コゲ犬</a>',
        'comic' => '花とゆめ全般 / ヒナまつり / 少女終末旅行',
        'anime' => 'キルラキル / 宇宙よりも遠い場所 / 東京ミュウミュウ',
        'character' => 'すみっコぐらし',
        'animal' => 'ねこ',
        'food' => 'たこやき',
        'etc' => 'ドット絵 / 18切符旅行 / 文房具'
    );

    foreach ($like_data as $head => $value) {
        echo '<tr>';
        echo '<th>' . $head . '</th>';
        echo '<td>' . $value .'</td>';
        echo '</tr>';
    }
こんな感じの実装がしてあります。
phpが使えるってだけでめちゃくちゃ楽な実装。でもこれコードじゃなくて管理画面から追加できる方が良かったかなともちょっと思います。
 
あとはvivicamblogの記事呼び出しをしています。これが結構面倒くさい。
同じドメインですが別のWordPressなので取得するにはｺﾞﾆｮｺﾞﾆｮしないといけません。結局ちょっと重いけどfeed使って取得しています。
 
historyは結構赤裸々に、でも深いところはついてない感じで書いてます。
あと忘れてたけどサイドバーになんかいます。

何がやりたかっただけかはわかるかと思います。本当クソしょうもないです。
でもこれが人生で一番javascriptと向き合った時でした。頑張って自分で書きました。
ここの実装は、Free Online Image Map Generatorでhtmlを生成して、クリックした時の処理等をjavascriptで書きました。
本当はトップページでも同じ実装をする予定です。でもまだオンマウスできるほど物置いてないからね・・・。
 
アプリを紹介するページを作りました。
本当に動画撮るのが面倒だったやつです。Robinの紹介ページ

管理人についてのテンプレートをベースにしました。
ちなみに管理人についてのページとアプリの紹介ページの配置は実は結構早い段階で決まってました。今回本当に配置は決まってるけれど細かいデザインができない・・・ってのが多かったです。
 
サイドバー固定して動画流すってのは決めてたけど、動画の圧縮がうまくいかなくて結局でかいまま載せることになってしまいました。圧縮できたら置き換えておきます・・・・。
 
ちなみに！配信停止になったAppAppもちゃんと載せてあります。
一応こんなもの作れるよっていうアピールしてあります。
あとはアプリ以外のテンプレートを作り、このリストをトップページや管理人についてのページに配置して実装は終了です。
 
ブログをSSL化する！
最後に、ブログをSSL化しました。アドレスがhttps://〜になってるはずです！
Search Regexを使ってワンクリックで終わったんですが、ついさっき鍵グリーンになってないところを見つけ、調査してみると、どうやら広告画像と追記に貼った画像がhttpのままになってて先ほど修正しました。
なので最後の最後にまた全部の記事をチェックする羽目になりました。
 
つかれたよパトラッシュ・・・
 
あとjQueryを使ってたところを結局自分の手でバニラのjsで書き直しました。なのでこのブログは脱jQueryしてます。
途中までVanilla.jsって本当にあると思ってましたからね。すっかり騙されてましたよ。
あっフレームワーク使ってないんだって思ったらjsも少し好きになれました。
 
残っている作業

右サイドバーの子に役割を持たせること。
トップページのアイキャッチ絵に物を増やし、オンマウスで動きをつけること。
ロゴ・アイコンを考える（半分諦めてる）。
フッターにサイトマップをつけるかどうか検討。

って感じですね。後は細かい不具合を都度修正していく予定です。
 
後は今まで以上にガンガン記事を書いていきたいです。このブログ内の実装のことも書いていきたいですね。
 
最後に。
リモートで完結するお仕事探してます！
このブログ作業の区切りをつけた理由です。
こんなことばっかりしてる場合じゃなくなりました。バカですね。今まで何も言わない親に頼りきって仕送りをもらっていましたが、遂にその時がきてしまいました。
 
つまりはもう仕送りができないと言われてしまったのです。
自分もこのままだとダメなのは重々承知なので、自立をするなら今しかないと思うのです。多分、来月も土下座すれば（しなくても）頼めば仕送りをくれる親なんです。
だからこそこれ以上頼りたくない。だからこそ今しかない。今頑張らなくていつ頑張れるんだ。
 
とは言っても、23年間まともに働いたことないんですよ。
実家の手伝いで毎日一日中ブルーベリー取るのも働くってことではあるし、チームで今やってる作業も働くってことではあるかもしれません。昔はCROWDで1万円分記事を書いたりもしました。
でもどこかで働いたことがない。そもそもバイトの面接すら1回しか行ったことない。
自分が働くことがうまく想像できない。この学歴で？数年ニートしてて？マトモに働いたことなくて？
それ以上に最近誰とも会ってない、喋ってない自分が人と会って喋ることなんて本当にできるのか？と考えてしまう。
ぐるぐる堂々巡りなんです。むしろ数年ずっとそうです。
 
でも今回は頼れる人に相談することができたんです。相談するかどうかに数日悩んだんですけども。
今は自分のできそうな受託の仕事を探してもらっています。本当にありがたい話です。
人頼りにしてしまって本当自分ってやつは・・・って思うんですが、これでも今一歩踏み出すのに必死です。
 
しかもかなり面倒な条件で探しています。
対面なし、電話なしの完全リモートで探しています。チャット完結です。
相当頑張れば電話に出ることはできるんですが、Appleの代理人さんと3分の電話するのに1週間ぐらい何もできずに鬱になるレベルなので結構しんどいです。
 
今の所一日中手は空いているので、ガッツリ時間を割くことはできます。
多分ここに書いても意味がないとは思うので、またTwitterで呼びかけてみるつもりです。（しかもこんな時間の投稿で・・・）
 
とりあえずどうなるかはわからないですが受託のお仕事いただけそうではあります。本当泣いちゃう。
しばらくはお仕事募集してます。iOS開発できます。WordPressできます。
お問い合わせからご連絡ください。
 
 
iOSデキるって幅広すぎて大分怖いんですけどね・・・。Swiftで、出来ればStoryBoard使わずにやりたい派です。他のiOS開発者と一緒に作るの向いてなさそうで泣いた。
 
 
長くなりましたが、ブログリニューアルはこれにて終了とします。
残作業はありますが、ブログはしばらくこの状態だと思います。記事はガンガン書きます。
これからもうるおいらんどと私Reoをよろしくお願い致します。