ブログについて 2年前

ブログリニューアルのお知らせ

アナウンスが遅くなりましたが、2/14より、昨年10月末からちょくちょく匂わせていたブログのFirestore移行を正式に行いました。 screenshot 　ブログのリニューアルとしては昨年4月以来。 　見た目はテーマカラー以外あまり変わっていないと思いますが、技術的には2016年8月にJUGEMからWordPressに引っ越した時に並ぶ、またはそれ以上のチャレンジングなものです。 　技術的な詳しい解説は、ブログで追って更新していきますが、とりあえず一般的なユーザー向けの説明を中心に書いていきます。

デザイン

テーマカラー・アイコン変更

　今回のリニューアルのメインはNuxt化、かつ前回のリニューアル時にBulmaフレームワークを使っていたので、正直デザインはほとんど変えることなく移行することが可能でした。 　（Bulma自体のバージョンが若干上がったのか影のつき方が変わっていますが…） 　ただ、デザインが全く変わらないのもリニューアルした感がない、というか、何がどうなったの？と言われるのも微妙なので、色を付けてみました。 　しばらく変えてみてしっくり来なかったらグレーに戻すかもしれません。 　元々2019年4月のリニューアル作業中に、とある事情で色を付ける気にすらならなくなってグレーにしたのですが、数年前はこういうグリーンを使っていたので、懐かしい方もいるかもしれません。 　ついでにアイコンも若干変えてみました。

無限スクロール

　これは意図的に行ったものというより、Firestoreにページング機能がないので仕方なくという側面が強いです。基本的に全てのURL構造をクローンしていますが、/page/2というページURLだけは対応できませんでした。 　もちろん、SNSと同じく今の主流は無限スクロールだろうという気持ちもありますし、PHPと違ってJavaScriptベースになったからこそ組み込みやすくなったことでもあります。 　ブラウザ上で「元に戻る」を行った場合に位置を記憶する処理に関しては、現在調整中です。とりあえずトップページはいい感じに動いているはず。

サイドバーとヘッダーメニューの統合

　プロフィール・カテゴリー・タグといったメニューを全てなくしました。 image-20200204142335901 image-20200204142346053 　冷静に考えて、ホームはすぐ隣のサイト名と被っているし、プロフィールもそんなに強調しなくて良いし……ということで全部サイドバーに移しました。 　その代わり、カテゴリーとタグはサイドバーに。使いやすくなったと思います。 　また、以前はスマートフォン版だとメニューボタンをヘッダーメニューで呼び出して、サイドバーメニューに相当するものはメインコンテンツ（記事一覧や記事本文）の下に表示されていましたが、無限スクロールとの両立もできないし、使い勝手も悪かったので、メニューに統合しました。

パフォーマンス

　大幅に改善しました！！ 　これはWebに詳しくない方であっても、もう触っただけでわかる……と信じたい。

初期描画

　指標にしたのはPageSpeed Insightsのスコア。 　PC版は77から98に、スマホ版は52から83に大幅アップ。（計測するたびにコロコロ変わるので恣意的な比較ではありますが） image-20200212222017459 image-20200212222001459 　もう少し詳しい結果の出るLighthouseのレポートで比べてみます。（スコアが若干変わっています） image-20200212223001187 　Speed Indexの圧倒的な改善が目立ちます。 　一番下の、経過時間に伴うコンテンツ表示の流れを見れば、何がどう良くなっているのかも何となくわかる……はず。 　具体的に何でこんなに速くなったかというと、サーバーがFirebase Hostingになった、jQueryなどWordPressならではの負債を全部捨てた、SSRではなく事前に静的サイト生成している、といった技術革新に加えて、見えている範囲の記事以外は描画しない、スマホ版ではメニューボタン押されるまでサイドバーを読み込んでいない、など、徹底的に高速化しました。 　本当はモバイル版も90点台まで上げてドヤ顔したかったのですがこれ以上上げるのも難しそうだし、自己満足の領域に入っていたので妥協しました。 　ちなみにIE11対応はしませんでした。Nuxtで勝手に対応できるかなと思っていたのですが、全然うまくいかなかったので、わざわざ時間かけてまで対応しなくていいなと。Windows 7のサポートも終わりましたしね。

記事表示

　実は本当に速くなったのは初期描画ではありません。トップページから記事ページへの遷移です。秒数の計測は行っていませんが。 　ポイントは2つ。メインコンテンツ以外を再描画せずに引き継いでいること、記事ページ表示の際にデータを取りに行っていないことです。 　Firebaseはドキュメント（記事にまつわる全てのデータ）単位でしかデータを取得できないので、逆に言えばトップページを表示している段階で本文のデータは全て手元にある。 　ということは、詳細ページに移動するときはそのデータを使えば良いのです。Firestoreと通信もしていません。原始的なオフラインキャッシュ。だから爆速。 　別に取りに行ってもそこまで時間がかかるわけでもないのですが、それでも異次元の速さになってます。 　ヘッダーやサイドバーは共通だし、CSSなどのデザインも共通だから本来メインコンテンツだけ書き換えれば良いというのは割と当たり前の話で、WordPressでもそれを実現する方法はありますが、無限にバグが生まれてしまうので現実的ではありませんでした。 　Vue.jsやReact.jsというのは「そういうのを人間が管理するのは無理だからいい感じにパフォーマンス最適化してあげるよ」という技術です。それを利用したくて今回のNuxt移行をしたのですから、パフォーマンスは上がっています。

PWA対応

　以前からPWA対応はしていたはずなのですが、上のLighthouseで非対応判定されている通り、不完全なものでした。 　その点、Nuxt.jsにはPWA Moduleというちょっとした設定だけで勝手に対応してくれる素晴らしいライブラリがあるので、これを使って完璧な対応となりました。 　そして言うまでもなく、毎回ゼロから読み込んでいた旧サイトはPWAの恩恵をほぼ受けられていなかったので、ようやく正式にPWA対応できたと言えるでしょう。

廃止した機能

自動ツイート

　こちらは何かやり方考えるかもしれませんが、一旦廃止しました。WordPressからの更新と実際の更新にズレが生じてしまうので。ツイート自体もインプレッション見る限りだいたいの記事は2~3アクセス程度の流入しかないし、意図しないところでバズっても百害あって一利なしなので。 　ちゃんと流入を狙いたい記事だけ手動でツイートします。そうでない記事も読みたいという奇特な方はブクマとかホーム画面に追加とかしてください。

コメント投稿

　全面的に廃止しましたー。ちゃんと励みになるコメントとか頂くこともたまにはあったので、なくしてしまって良いものか迷いましたが、技術的に難しい部分もあったので一旦諦めました。 　これまでに頂いたコメントは一応表示させているので、そのうち復活させるかもしれませんが、まあ普通に精神的に辛くなることの方が多かったので優先度は低めです。すみません。

今後の予定

　今後やっていきたいこととしては、
    プッシュ通知対応 脱WordPressを進める（前後リンク・検索・いいね・コメント）
　個人的にここ数年不満だった表示速度をようやく抜本的に改善できたので満足しています。速度は正義。 　とはいえブログのメインは記事なので、肝心のコンテンツの更新頻度も少しずつ戻していければと思っています。よろしくお願いします。 ...

comment  0
favorite  0
ブログについて 3年前

ブログリニューアル

ブログのデザインをアップデートしました。 　前回が2018年2月なので約1年ぶりとなります。

デザイン

グレー基調

1555432385268 　PC版はこんな感じになりました。 　グレー基調になった理由はお察しください。いつか緑になるかもしれないしならないかもしれません。 1555432247672

記事を主役にする

　とにかく今回一番こだわったのはこれ。 　これまでのアップデートでは「アプリっぽいUI」だったり「おすすめ商品やNOWタブを記事と同列のコンテンツにする」といったことに力を入れていましたが、 　レビュー記事のアクセスが増えてきたり、ブログにコメントしてくださる方が来たりといったことがこの半年で起きて、 　個性を出すために拘っていた「ブログなのにブログっぽく見えない」というデザインが、むしろデメリットになっているんじゃないか、という気持ちが強くなってきました。 　シンプルに文章を読んでもらうことを考えるなら、ついてくるメニューなどはむしろ邪魔。個性を消してフラットにしないとコンテンツの価値を落としてしまっているのではないかと、半年くらい前から考えていました。 　なので、今回のアップデートでは要素を徹底的に削ぎ落として、最低限必要なものだけを残しました。 　こういうものは流行と気分によるループなので、たぶんまた要素を増やしていきたいというタームも訪れると思うのですが……。

note意識

1555432873864 　デザインの参考にしたのはnote。参考というか真似に近い。 　今、文章メインでやってるサイトとしては間違いなく一番イケてるので、ブログらしさを求めるならこれだろうなと。 　ただ、じゃあnoteがすべてにおいて優れているかというとそうではないと思ったので、 　例えばトップページの記事と記事の区切りは水平線ではなく枠で囲むべきだとか、そういう部分は変えています。 　海外の最先端を追って見た目のカッコよさを求めすぎると普通のユーザーにとって使いにくくなるというジレンマ。 　まあ、それを言い出すと、このブログも正直スマホ版で最新記事どこいった？とかなってる気もしますが……。本当はこのへんトラッキングしてどのナビゲーションがよく使われてるのか調べるべきなのかもしれません。

２カラム構成

　記事本文の領域を広めに取るために、久々にPC版を２カラム構成に。 　とはいえ、別に減った要素があるわけではありません。カテゴリー・タグ・検索をヘッダーに移動させたので、 　「おすすめ商品」も今は消していますが、そこまで場所を取るわけでもないので、時期を見て復活させようと思っています。 　いかにブログらしくできるかということをメインに考えました。

スマートフォン版

　こちらもシンプルに。 1555433733743 　そういえば「はてなブックマーク」ボタンを追加しました。個人的には使わないのですが、使ってる人は多いっぽいので、あっても損はないかなと。

技術ポイント

　ここは詳しくない方は読み飛ばして大丈夫です。

CSSフレームワーク「Bulma」を採用

　これまでのブログは自分でデザインもゼロから作っていましたが、デザインフレームワーク「Bulma」（https://bulma.io/）を全面的に利用しました。 　デザインをガラッと変えようと思うとゼロイチで作るのはちょっとエネルギーが要り、しかも自分はデザイナーではないのでラクがしたかった。 　サンプルサイトのテンプレートとドキュメントを見れば大体のことはわかる。 　こういう広く支持されているフレームワークのデザインを使うことで生まれる「プロのサイト感」というのは、素人のオリジナルデザインではどうにも出せないなあと思います。 　正直CSSちゃんとわかってる自分がわざわざ Bulmaのクラス覚えるのは遠回りだなあと思う部分も多々あったんですが、それも含めて良い経験でした。 　CSSフレームワークを使う上で大事なのは「自分がフレームワークに合わせるという覚悟を決めること」だなと理解しました。 　オリジナル要素は最小限にとどめて提供されているコンポーネントを使えるだけ使いまわさないと、余計なCSSを書いて二度手間になってしかもデザインも浮く。誰も幸せにならない。 　「ここはこうしたいからCSS書き足そう」じゃなくて「ここはこうしたいけどデザイン的に正しいのはBulmaだから従え」っていう。 　たとえば記事のコメント欄なんてbulmaのMedia Objectまんまですが、それが一番オシャレ。 　……まあそうは言いつつis-marginlessだのis-shadowlessだのでハックしまくってるからプレーンなBulmaとも言い難いんですが。何だかんだ結構オリジナルCSS書いてるし。

WP REST API + Vue.jsを併用

　一時期頑張ってみたものの大して速度が上がらず中止した「Nuxt.jsでWPサイト再構築プロジェクト」、あれ自体は何の成果にもならなかったのですが、 　ただWP REST APIに関してはかなり詳しくなったので、今回はVue.js+REST APIをブラウザ側で利用しています。 　具体的にはサイドバーの「人気記事」「最近の記事」「最近のコメント」、記事ページ下部の「カテゴリーの最新記事」「コメント一覧」は全てREST API経由で取ってきています。 　一番のメリットは開発しやすさですね。WordPressの勝手に付与するClassとかタグ構造に縛られなくて済むし、CSSフレームワークとの相性も良さげ。 　一方、速度は正直思ったほど上がりませんでした。ちょっとここは予想が外れてしまった。 　あとブラウザ側での処理を増やしたので、スペックの低いスマホとかだと重くなってそうなのがちょっと不安です。

IE非対応

　捨てました。IEからのアクセスもゼロではないので迷ったのですが……そこに対応することに頭を使いたくなかった。早くWindows10買ってくださいって感じです。 　それにしても、1年後、Windows 7のサポートが切れた後の世界ってどうなるんでしょうね。Edgeも実質消えて、ChromeとSafariとFirefoxだけ見れば良いという楽園が訪れるわけですけど、そもそも今はそのへん自動でやってくれる技術が発達しすぎてるのであんまり変わらない気がします。

barba.js ver2.0

　pjaxによってサイドバーやヘッダーなどの共通要素はそのままにする、という技術はリニューアル前と変わっていません。ただいつの間にかV2が出ていたので、何が変わったのかわからないままに投入。応答性は上がったような気がします。

その他

　リニューアルに合わせてプライバシーポリシー作りました。一応、Analytics入ってることを知らせないと規約違反らしいので（兵庫県警の件で知った）。 https://oswdiary.net/privacy-policy/ 　これもどうでもいい話ですけど、 　個人的に、「どうせ誰も読まないってわかってるのに、いざという時の保険のためだけに書かれている規約」を載せているサービスがあんまり好きではないので、（そうではないサービスがこの世に存在するのかはともかく、） 1555507327741 　簡単にまとめました。これだけ読んでもらえればだいたい何が書かれているか伝わるかと思います。 　まあ、当然ながらこの内容がそのまま書いてあるとは限らないので、サイト運営者に対する信用の話でしかないんですが、 　利用規約を、正式な文章と平易な文章でまとめたバージョンの2種類を用意するというのは、もう少し広まってもいいんじゃないかって勝手に思ってます。

感想

　それまでJUGEMに置いていたブログを、WordPressに完全移行したのが、2016年8月。……まだWordPressにしてから2年半くらいしか経ってないんですね。マジか。 　その頃から試していたタブ切り替えなどの基本的な枠組み、カラーリングなどを、今回のリニューアルでは全部捨てました。 　カテゴリーも増やして記事更新を頑張っていこうという気もあったのですが、、、ちょっとそういうことに気分が乗らない状況でもあるので、そちらはどうなるかわかりません。「ライフスタイル」みたいな記事カテゴリー作ろうと思ってたのですが。そのあたりは少しずつやっていきます。 　あと、ここまでやっておいてあれなのですが、たぶん遠くないうちにまたリニューアルします。というか、前も書きましたが、WordPressを使っている限りは速度改善は見込めないことがわかったので、ちょっと真剣にWordPressを捨てることを検討していくべきだなと。。。 　やるならWP REST APIとか小手先の方法ではなく、REST APIの中身を丸ごとFirebaseかContenfulかに移行してNuxt.jsですかね……。要するに記事・コメント・カテゴリー・タグ・画像さえどうにかすればいいので。一番の問題は画像か……。何をするにも記事数が多すぎて困ってしまいますが、この過去の膨大な記事を捨てたらこのブログの意義もあんまりないので、頑張って引き継いでいます。 　まあそんな感じで、ブログの立ち位置をはっきりさせるとともに、 　先のことを見据えたリニューアルという感じでした。 　あんまりWordPressやプラグインに頼った機能は使わないようにしています。 　とりあえず今後ともよろしくお願いします。バグなど見つけたらご連絡ください。 ...

comment  2
favorite  1
ブログについて 4年前

ブログのデザイン変更についての長々とした説明

本日、ブログのデザインをアップデートしました。 　見た目の印象としては過去最大規模だし、特にスマホ版は一目見ただけで思いっきり変わっています。 　とはいえ、こういうデザインとかのことを語っても喜ぶ人は少ないし、スマホアプリに慣れていればこの記事を読むまでもなくだいたいの使い方もわかるはずだと思うのですが、まあ私が説明したがりなのでいろいろ説明させてください。 　多少なりとも技術的に参考になることを書ければと思っていますが……、ほとんどの方にとって基本的にはどうでもいいことばかりなので読み飛ばしてください。 　ちなみに今までのデザインは、URLの最後に?theme=osd1608と付けると見られます（https://oswdiary.net/?theme=osd1608）。 　いつまで残しておくかはわかりませんし、今後新しいカテゴリーとか追加した時には崩れると思いますが。

新デザインコンセプト

　今回のリニューアルの目的は、 ①スマホ版をアプリっぽくする ②デザインを美しく、文章の邪魔にならないようにする ③記事切り替え時の動作や読み込みを軽くする ④その他、いろいろと使いやすくする 　という4点です。 screenshot

①スマホ版をアプリっぽくする

　先月、PWA対応を行って、「ホーム画面に追加」できるようになったので、自分で時々使ってみてはいるのですが、どうしてもアプリっぽくはならない。 　後述の、barba.js（pjax）導入でシームレスな画面切り替えが行われるようにしたというのもその解決の１つですが、 　デザイン面も思い切ってTwitterやFacebookのデザインに寄せたものを作りました。 　今回のアップデートに関しては、基本的にスマホ版の再構築が主目的であり、PC版は後追いで整合性をとっただけです。タブ切り替えといった機能はそもそもありませんでしたし。 Screenshot_2018-02-10-14-56-10　Screenshot_2018-02-10-14-54-33 　参考までに。比較すると広告の邪魔さが際立ちます。

最上部にメニューバーを固定

　アプリっぽさを演出する最大のものが、最上部に固定されるメニューバーです。 　Androidでは最上部、iOSでは最下部固定がデフォルトなので、どちらにしようかと悩んだのですが、最上部固定の方がposition: stickyで簡単に扱えるというメリットもあったので上に。 　ちなみにそれぞれのアイコンをタップするとタブが切り替わりますが、既に表示中のアイコンをもう一度タップすると一番上にスクロールします。これもTwitterっぽさ。

メニューバーはアイコンのみに

　ブログのメインコンテンツは本文ですから、できるだけ本文領域を広く取るために、文字ラベルはスマホ版では省略。 　Twitterのようにわかりやすい機能があるわけではないのに、「記事」などを示すものがアイコンだけで良いのか？ 　という疑問はあったのですが、記事は最初に表示されるからだいたいわかる、他のも開けばわかるだろうと。 　「RECOMMEND」のアイコンは、よくあるカートにしてしまうとショッピングサイトっぽくなってしまうなと思ったので、買い物バッグに。 　「NOW」に関しては良いアイコンがなかったので、もうタブの内容自体をプロフィールに変えるということで乗り切りました。 　ちなみに一番右の「MENU」が、よくある三本線でないのは、一番左のアイコンと似ていたからです。

記事以外のタブを独立

　以前のデザインでは、せっかくタブで分けられているのに「メニューやおすすめ商品を開くためにはいちいちページのトップや一番下までスクロールするのが面倒臭い」という問題もありました。 　これを解決するためのアイコンでしたが、タブといってもTwitterやFacebookやLINEのように並列のコンテンツというわけではなく、あくまで記事以外の3つはオマケですので、 　記事の上に重なって出てくるようなポップアップエフェクトとデザインによって一時的なものであることを強調し、メニューから別のページに移動する際はいちいち閉じるようにしました。 　あくまでメイン領域の内容を書き換えていた以前と違い、記事以外のタブは全てposition: fixedで上に重ねているので、記事自体は今読んでいる最中の箇所から動くこともありません。非常に便利です。 　今のところあまり意味はないですが、例えばタブにオススメの音楽とかYouTube動画の埋め込みしたら良いかもしれませんね。音楽流しながらブログが読める。 　今回のアップデートで、もう完全にモバイルファーストなブログになったというか、絶対スマホの方が読みやすくなっていると思います。 　あとストーリーズはもうPC版捨ててます。4カラム構成にすべきじゃないかと思うほど。スマホで観てください。

記事切り替え時の動作や読み込みを軽くする

　これも単純に自分が使っていてストレスを減らすために。と同時に、読み込みが速い方がアプリっぽさも増すだろうという感じもあります。

LazyLoadをAmazonプラグイン、YouTubeなどにも適用

　これは厳密には先週からやっていたことですが。プラグインを新しくしました。 　実は今回のアップデートで、初回のアクセスの読み込みは若干重くなっている可能性があります。ページ上部に広告が増えたので。それを軽減するための措置です。 　特にSurfaceグッズ記事あたりで効果を発揮しているはず。

barba.jsの導入

　barba.js、pjaxについては前の記事で紹介しましたが、 　サイト内で別のページに移動する際に、「Main（記事領域）」以外の部分を読み込み直さないようにしました。 　RECOMMEND、PROFILE、MENUは同じです。以前のページ移動と同じくRECOMMENDの順番が毎回変わるのは、ページ遷移のたびにjQueryで順番をシャッフルしているからです。

広告の増加

　これに関しては弁明させてください。まず、記事ページだけを入れ替える都合上、記事最下部の広告を入れられない可能性があったので、これを削除する代わりに、よくあるレンタルブログのように、タイトル直下に広告を入れようと。 　さらに言うと、「PC版のヘッダーの右側空いてんなあ」というのが気になってたので、PC版のレイアウトとしてもちょうどいいかなと。 　……ところが、なんか試行錯誤してたらbarba.jsで読み込みつつも記事下部の広告をその都度差し替えられたので、記事下部の広告も残りました。その代わり、PC版ではサイドバーに入っていた広告を、スマホ版ではそもそも読み込まないようにしました。 　で、さらにおすすめ商品リストの中にも混ざっています。これは、他の方のブログでたまに見かける、「広告っぽくない広告」を試してみたかったというのが大きいです。 　その割に広告だけ背景グレーにしているのは私が良心と葛藤した結果でした。 　このあたりの広告はちょっと1ヶ月くらい様子見して、あんまりクリックされてなかったら消す感じで……。邪魔にはならないと思うので、許してください。

デザインを美しく、文章の邪魔にならないようにする

　自分のブログを特にスマホで見ていてふと気になったのが、「他のブログと比べて色がうるさい」ということでした。 　理由は明白。赤です。文章の周りが赤いのは明らかに鬱陶しい。 　コーポレートサイトであればあのような色使いもアリでしょうが、文章を読ませるだけのブログであそこまで色がうるさいサイトはあまりない。 　メイン領域では本文の周りをグレーにしよう、というところから今回のデザインを進めていきました。 Screenshot_2018-02-10-14-57-04　Screenshot_2018-02-10-14-57-56 　ヘッダーも含めて、グレーとパステルな水色を基調にしたことで、だいぶ落ち着いて見えます。特に記事を読んでいる最中、非常に目に優しいブログになったのではないかと思っています。

ベースカラーを水色系に変更

　JUGEM時代からここ何年も、緑色をメインに押してきましたが、そろそろ飽きてきたこともあって、思い切って水色に変更。 　記事ページの下部にある「関連する記事」とかもヘッダーと同じ系統の水色になっています。 　赤・青・緑・水色といったタブ領域ごとの色は残していますが、特にスマホ版ではほとんど目立たない感じに。

マテリアルデザイン

　今回のデザインについて参考にしまくったのがこの記事です。 　Webサイトを使いやすく！UIデザインのCSS小技テクニック21個まとめ（実例サンプルコード付） 　特にドロップシャドウの付け方やアイコンの色などを参考に。 　リニューアル前はブログタイトルの影ももっとはっきりしていたのですが、薄めにしました。 　他にも、カード状のレイアウトも以前より立体的になっています。

その他のデザイン調整

　「NEW POSTS」などのヘッダーは、ちょっと恐ろしいほどスタイリッシュになった気がします。お気に入りです。 　太字ってあんまり積極的に使うものじゃないなと思いました。PC版もアイコンが付いてちょっと見やすくなった気がします。 　あと、これは言わなくて良いことだと思うんですけど、レイアウトでは高さを揃えることを意識しています。 　PC版で言えば「NEW POSTS」「FAVORITE ITEM LIST」といったヘッダーが完全に横並びになるように調整していますし、スマホ版でタブを切り替えた際の「STORIES」「NEW POSTS」などの文字も、ズレないように細かく調整しました。フェードで切り替わる時に文字が動かないというのは、結構大事だと思ってます。 　細かいところで言うと「ARCHIVE」の「月を選択」のフォントが馴染んでいたり、 ...

comment  0
favorite  0
tagブログアップデート
ブログについて 6年前

ブログのデザインをアップデートしました

前々から何となく匂わせていた、ブログのアップデート。 　10/23までに準備しようと思いつつ、気づいたら10/23当日。 　それなりに課題が忙しいことは無視して、あと今日行われているうちの大学の学祭も行かずに、ついに作業しました！   　まあ、今現在このブログにアクセスしている方は、明らかに変わったことに気づくとは思いますが……。 　とりあえず変更点を順に説明していきます。   　ちなみに、この記事で出てくる「スマホ・タブレット・PC」とは、 　スマホ：画面サイズ768px以下 　タブレット：画面サイズ769~991px 　PC：画面サイズ992px以上 　のデバイスを指します。よくわからない方は無視して大丈夫です。  

レイアウト変更・メニューボタン

スマホ版 　メイン領域（記事・NOW・おすすめ）の表示方法は変わりませんが、メニューボタンを廃止。 　メニューはPC版と同じようなカラーリングで、メイン領域（記事・おすすめなど）の下に並ぶように変更しました。 　普通のホームページと違い、ブログの場合、 　記事一覧・アーカイブ・最近の記事などの項目を「意識的に呼び出したい」と思うことは少なく、目に入ったら眺める、という受動的な役割が主のはず。 　それであれば余計な動作を挟まずに流れで見れる方が、結果的に他の記事も続けて読んでもらえる可能性が上がるのではないかと思ったためです。 　ただし、検索フォームはもう少し呼び出しやすい方が良い気がするので、検索フォームの場所だけは後で弄る予定です。   タブレット版 　こちらもメニューボタン廃止。 　わかりやすく、スマホ版と同じメイン領域＋左側にメニューとしました。 　スマホとタブレットで見え方が変わりすぎるのも逆に混乱すると思ったので。 　（あと、スクリプトを単純にしたかったのもあります。下手にレイアウトを組み替えるようなスクリプトにすると更新が面倒なので。） 　 PC版 　メニュー：記事：RECOMMEND＆NOW　という３カラムになりました。一番変わってないかも。  

カラーリング変更

　パッと見の最大の変更点。いちいち説明しなくてもわかりますよね。 　Page Analyzerにかけてみたら「文字色と背景色が近くて見づらい」と言われたので、どうせならとバッサリ変えてみました。 　ヘッダーのブログタイトルは影文字になっていたりします。フラットデザインが流行ろうともドロップシャドウにカッコよさを感じてしまうVista世代ですみません。 　Nowも若干色が濃くなった。 　Entryの濃い赤はNintendo Switchのサイトを参考にしてます。それよりも一回り濃い目ですが。 　どうせなら水色ベースとかにガラッと変えてしまおうかと思いましたが、単純にそこまでカラーリング練り直す気力と時間がなかったので、こんな感じに……。  

NOWタブの変更、Twitterの廃止

　Twitter止めたのにTwitter読み込む意味もないので、代わりのものをつけました。 　「ミニブログ」として、普通の記事とは別に投稿する（つもりの）記事です。タイトル・カテゴリーなどの設定もありません。ありませんというか、私の方で設定自体できないようにしているだけなので、皆さんにはあんまり関係ないんですけど。 　WordPressにデフォルトで用意されるわけではないこの機能、なんでこんな簡単に設定できてスムーズに入れ替えられたかと言えば、元々7月のお引っ越し時に追加する予定だった機能だからです。 　結局Twitterの方が便利そうだったので見送っていたのですが、今回有効化してみました。ぶっちゃけ今からNOWタブ消す方が面倒だったのもある。 　簡単な近況を報告するスペースにできればなーと思っています。Twitterと違ってスマホやアプリから手軽に投稿できないので、どのくらい更新できるかは微妙なところがありますが、更新が空いちゃったときの誤魔化しに使えればなーくらいの気持ちです。 　ちなみにTwitterへのリンクは一応残しました。MENUのカレンダーの下にある「About Me」という部分です。引っ越し時に消失してたプロフィールページも復活しました。  

SNSシェアボタンにPocket追加

　単純に私が最近使ってるので。Pocket便利ですよ。 　はてブ消してもいい気もしたけど一応残しておく。なんか他に追加してほしいSNSあったら教えてください。

 

その他バグ修正

image 　少し前に報告したこの問題は、 image 　こうなりました。 　これ、地味に頑張っていて、タグが少ない時は一部しか半透明にならないようになっています。 　他にも、スマホで見た場合の余白を若干減らしていたりと微調整入ってます。 -------------------- 　他にも何か変わったような気もしますが思い出せないので、何かあったらまた追記します。 　前回７月末にお引越ししてみたはいいものの、いかんせんWordPress対応そのものがメインだったため、いろいろと不十分なところもあり。 　「そのうちこれ直さなきゃなあ」と思っていたことを、一通り直せたので、とりあえずは満足です。 　あとやることとしては……pjax対応させて、記事クリックした時にヘッダーは読み込まない的な設定したいですが、まあ優先度は低め。 　Twitter読み込まなくなったので軽くなってるはずですしね。 　あとはAbout Me回りのコンテンツももう少し充実させたい気もするけど……。 　……まあ正直ブログの機能なんてそんなに拡充することもないので、とりあえず一段落、という感じでしょうか。 -------------------- 　そんなわけで、10/23は一応私がブログ始めてちょうど９年なのですが、 　正直このアップデートに全力傾けちゃったので特に語ることはないです。というか書いてる時間がない。 　まあ、7/26ぎOSD8周年の方も祝ってるし、誕生日にも年末年始にも似たようなこと言ってるし、「頑張ります。今後もよろしくお願いします。」ということで……。   　……先週と違って土日は暇だったはずなのに、体調を崩してたりブログアップデートに５時間費やしたりで結局今週の課題ラッシュ（いつもの英語リーディング２件＋小テスト）が全く進んでいない……。辛い。 ...

comment  0
favorite  0
ブログについて 6年前

リニューアルのご報告

「Our Story’s Diary」 　ついに！お引越ししました！ 　９年目にして新たなスタート。です。 　……８月中にもう一度（SQLiteからMYSQLへの）引っ越しという面倒な作業が控えているのですごく憂鬱ではあるのですが……。 　 　とはいっても、一見すると何も変わってないように見えるかもしれません。……いやそれはないか？ 　逆に、いろいろ変わりすぎて今までできていたことをどうすればいいのか？みたいなものがあるかもしれません。 　 　ということでまずは、今回のリニューアルポイント！を書いていきたいと思います。 　

オリジナルのレスポンシブデザイン。（PCとスマホのデザイン統一）

　これが一番大きいのではないでしょうか。 　JUGEMはレンタルブログだったので、スマホ版のデザインは用意されている中からしか使えなかったし、PC版のデザインも他の方が作ったものを借りていました。（かなり勝手にカスタマイズしてましたが……）。 　それをようやく統一しました。厳密には大きくPC・タブレット・スマホの３種類の表示があり、それぞれ1カラム・2カラム・3カラムに分岐しています。 　ここのタブの挙動はものすごく作りこんだ部分です。PCブラウザでウィンドウを伸縮してもらうと、割とスムーズに切り替わります。 　 　デザインそのものについてですが、色のベースは旧ブログのスマホデザインをかなりパクりました。 　同じURLでの移動になるので、「全然違うサイトだ！」って思われるのが怖いな、と……。 　PCサイトのデザインはあまり残っていませんが、カレンダーのデザインは取り入れてます。 　 　スマホ版ではメニューを全て隠して、ページ最上部左上のアイコンをタッチすることで呼び出す仕様になっています。 　豆知識ですが、あのメニュー、メニューの外側の領域をタッチすることでも消すことができます。 　image_thumb-3415243 　↑こんな感じ。……酷い図だ。 　そのうちメニュー出てる間だけちょっと暗くなるようにしようと思ってます。 　

タブ構成。

　せっかくオリジナルのサイトを一から作るからには、普通のブログと違うことがしたい！と考えた末に思いついたのが３タブ構成。 　……思いついたときは天才じゃないかと思ったのだけど、冷静に考えると割と邪魔なのでは？ 　 　スマホでうちのブログを見に来た人がおすすめ商品をそう何度も覗くのか謎だけど、とりあえず順番ランダムにしときました。ちょくちょく商品追加したり、あとレビュー記事へのリンク貼ったりして、どんどん充実させるつもりです。 　流行りの商品を適当に並べるくらいなら、もうオススメ商品欄そのものをコンテンツにしてやろうという。……なんかYouTuberみたいな発想。 　 　「Now」タブはですねー、どうしようかずっと悩んでいて、結局Twitterを貼ることにしました。 　本当は「ミニブログ」を作ろうと思っていて、実はそのための設定も用意してあるのですが、とりあえず今回は見送り。 　 　アメーバかどこか忘れましたけど、現在の状況を書く「ひとこと欄」みたいなのをブログ内の機能として置いてある有名人ブログ、あったじゃないですか。 　ああいう形にしようかなと。あえて。時代に逆行する感じで。 　しかし外部サイト（YouTubeとかAmazonとか）のシェア機能のことを考えると、ツイッターから完全に離れるというのも難しく、とりあえずは残しておきます。 　……ただ別にブログにここまで大々的に埋め込む必要もない気がするんですよねー。重くなるし。 　ブログ・ミニブログ・ツイッターの３つを運用していくとか、ちょっと模索中です。 　 　あと、PCサイト（３カラム時）のレイアウトはもう少し調整します。具体的には、左側にMenu、右側にNow・Recommend・Adにした方がバランス取れそうですよね。 　 　

カテゴリーの再編と、タグの新設。

　JUGEMブログに対して私の持っていた不満の１つに、タグ機能をサポートしていないことがありました。 　WordPressはタグがあるので、今まで「ひとりごと」で括るしかなかった記事に新たな情報を追加できるようになりました。 　とりあえず「Splatoon」「lyrical school」「Nintendo」など、ひとりごと記事によく出てくるテーマをタグとして登録してあります。 　 　で、カテゴリーの方はといえば、今までよりも減らしました。 　前は「Surface」みたいな小さなものもカテゴリーにしていましたが、これはタグでいいだろうと。 　ということで、大きく４つに。 　プロフィールページに解説がありますので、そこから引用。
ひとりごと（ハート） ……いわゆる普通の日記。何となく思ったこと、最近あったこと。 かんがえごと（ハート） ……普通の日記よりもう少しまじめなもの、まじめに言いたいこと。 ブログ（ダイヤ） ……このブログに関するお知らせなど。 メディア・カルチャー（スペード） ……アニメ・ゲーム・音楽・その他コンテンツについての考察的な何か。 おすすめレビュー（クローバー） ……主に買ったものの話。いわゆるアフィブログ。
　トランプと言いつつ４つ以上あります。　 　ひとりごと・かんがえごとを厳密に分ける・位置づけすることが難しく、またあまり意味を為さなかったので、この２つは一応カテゴリー分けしてありますが、大きくハートの中に入れることにしました。 　 　ダイヤマークが今後二度と出番がないような気がしますが、 　一応、イメージとしては、自作コンテンツにまつわる話をダイヤにしようかと考えています。 　たとえば、アプリ作った、とか、曲作った、動画作った、みたいなときに。 　……そういうときが来れば。……来る。はず。 　あとは、以前のブログでは手を出せなかった、技術ネタみたいなものも、入れていこうかなーと……。htmlの話とか、ずっと避けてたので。 　 　あ、あと、カテゴリーページとタグページでページ送りが機能しない不具合が発生しています。 　暫定措置として、カテゴリーとタグのページのみ１ページあたりの表示件数を５０件にしています。 　わー雑な対応！まるでPokĂŠmon GOみたい！ 　これは８月中に直る予定です。 　ひとりごとカテゴリーとか、余裕で50件超えてるんですが、月別アーカイブとか検索とか使って何とか……というところです。月別アーカイブのページ送りはちゃんと機能してます。  

今後の予定

　今後の作業予定。 　・メニュー欄などのレイアウト変更（次回修正予定） 　・カテゴリー欄のページ送り（８月後半） 　・ミニブログ（優先度：中） 　この３つはもう記事内で触れてるので、それ以外に、 　 　・Web拍手の復活（次回修正予定） 　コメント欄もあるけど、やっぱり欲しい……かな？ 　たまに使われてたので、なるべく早めに付けます。具体的には上のレイアウト変更と同時。 　 　・PC閲覧時、検索欄をサイドバーから右上に移動。（次回修正予定） 　・スマホ閲覧時、メニューをページ最上部以外からも呼び出せるようにする。（次回修正予定） 　現時点でも最低限の仕上がりにはなっているつもりですが、利便性・使い勝手は少しずつ高めていきたいと思ってます。 　Windows 10みたいなものです。 　　 　・その他不具合の修正（順次） 　上のページ送りも含めて、いくつか不具合はあるので、 　ただ、今のところ見つかってる不具合の大半ってウィンドウを伸縮させた時のもので、更新すれば治るんですよね。 　例１：最初にPC版サイズで読み込んだ後にスマホサイズにウィンドウを縮小させると、メニューアイコンを押してもメニューが開かないことがある。 　例２：スマホ版でメニューを開いたままPCサイズに拡大すると、スクロールできなくなる。（次回修正予定） 　ぶっちゃけレスポンシブデザインにおけるウィンドウ伸縮時の挙動なんて、開発者以外が気にするものでもないので、まあ、直せたら直します、程度の優先度。 　

お願い

　ここで皆さんにお願いなのですが、 　不具合を見つけたらぜひ教えてください。 　特にmacとiPhoneユーザーの方！ 　私の方で動作確認してるのはGoogle Chrome（Windows）・Microsoft Edge（Windows10）・Chrome（Android）だけです。持ってないので。 　さすがにFirefoxは互換問題ないと思うし、IEはそもそも捨ててるんですけど、Safariが怖い。 　つい昨日も仕事で作ったサイトがSafariで見たら総崩れしてて「早く対応しろよ」っていう圧力をかけられながらもブログ書いてるんですけど、 　とにかくSafariは鬼門なのでここ崩れてるよーみたいなのあったらお願いします。できればスクリーンショット付で。 　 　あとは……あれですね、ブログ内リンクが機能してない問題。これはもう仕方ない。記事のURLが変わったので。 　最近の記事とかはそれなりに直したのですが、一部リンク切れ起こしてると思います。これも記事タイトルで検索とかそんな感じでお願いします……。 　 　あ、リンク切れのページに飛ぶとトップページと同じものが表示されちゃうのも不具合です。これも早急に直します。 　 　……なんかこうやってまとめてたら不具合ばっかりだな！ごめんなさい。 　 　ただ、ブログとしてはかなり見やすくなったのではないか、と思います。 　 ...

comment  0
favorite  0