『軽index愛好会』（以下軽in）というサイトを御存知でしょうか。このサイトは数年前に人気を博した『軽いトップページの会』（以下軽ト）というサイトの後継サイト。これらはその名の通り軽いトップページを目指す人（軽量化にこだわりの有る人）の登録式のランキングサイトなんです。
で、軽inの方には個人的にちょっとした思い入れというのが有るんですよ。実は軽トが長期の更新停止に陥った時、佑もこのままこのサイトをなくすのは惜しいと思って、後継サイトを作ろうとしたんです。・・・がしかし。丁度同じ時期に軽inが開設になったんで、結局お蔵入りに。
先を越されてちょっと悔しい気持ちはあったんですが、自分と同じ考えの人がいた事に少し感動しちゃいましたね。自分の分まで頑張って欲しいので、影ながら応援してますですよ。
というわけ新PC購入記念リニューアルですよ奥さん。デザインに関しては
『Nakenashi Wisdom』を丸パクリ参考にさせて頂きました。
大きな変更点はメインメニューを上部にもってきたことですかね。「お役立ち系色々」は「テキスト系色々」に統合。
「管理人について」と「メールフォーム」も統合してAAの下にあるリンクから行けます。
「当サイトについて」は誰も見てないと思うので削除。
「一言コメント」は検索窓と間違える人が多かったのでいっそのこと検索窓に変更しました。 ブログ部分に関してですが、今までの経験から「コメント」と「トラックバック」はほとんど使われなかったので削除しました。 というわけで全体的にシンプルな作りになりましたね。まぁ以前の右メニューはぶっちゃけデザイン上の行かせぎで 無理やり水増ししてたわけなんですが。
そういえば、ついったーのアカウントを取ったので表示させよーかなと考えたんですが、 未だに使い方がよくわかってないので慣れたら表示させるかもです。 そんなこんなでよろしくですよ。
ついったー。アカウント取ってから一月ほど放置してましたが今後は出来るだけ 活用したいと思います。というわけでサイドバーに公式ウィジェットを表示。 色の指定とか大雑把にはカスタマイズ出来るんですが、デフォルトの状態だと 案外やぼったいデザインになっちゃうんですよね。
そんなわけで細部をCSSでほんのりカスタマイズしてみました。 自分が探した限り「いじっちゃ駄目」とは書いてなかったしね。 外部のCSSファイルを読み込んでる感じだったので、 ダウンロードして中身を拝見。クラス名をチェックしてそれっぽい部分をいじいじ。
具体的には画像がウザかったので非表示に、ヘッダーとフッターの枠を細めにしました。 CSSは以下参照。あとついでにソースコードをそのままHTMLに書くのは抵抗があったので、 外部スクリプトに関数で書いて呼び出すようにしてみました。
.twtr-widget
{
margin-left:4px !important;
margin-top:15px !important;
}
.twtr-widget-profile h4
{
zoom:0.9 !important;
height:4px !important;
position:relative !important;
top:-9px !important;
}
.twtr-widget img,.twtr-widget h3{display:none !important;}
.twtr-join-conv{margin:-11px 0 !important;}
え～やっとこさついったーのウィジェットを表示させることに成功しました。 というわけでどうして苦戦したのかという技術的なお話。 興味のない人はスルーの方向で。
結論から言うと「Ajaxと併用するのは無理」だったので「Ajaxを使わないようにした」という感じです。 このサイトはサイドバーをまるごと外部HTMLとしてAjaxで表示していました。 Ajaxはデータをテキスト（HTML）として出力するので中にJavaScriptを埋め込んでも実行してくれないんですよね。
なので最初に「Ajaxの外で表示させてその後に移動させる」というのを考えました。 色々試してみましたが、ウィジェットはJavaScript関数を実行した部分に表示されるのが原則みたいで×。 CSSを使えば出来なくはないけど内容によってはズレる可能性があったので断念。
次にPHPから『Twitter API』を呼び出す方法を考えました。が、回数制限があるので動的に リアルタイムで表示させるのは無理だし、アクセス解析と連動して数時間おきに更新するのも スマートさに欠ける気がするので却下（面倒なのもあるけど）。
というわけで「サイドバーをAjaxじゃなくdocument.writeで直接表示する」という方法に変更。 「更新時には外部.js自体を書き換える」という荒業で上手くいきました。 やれやれ。てゆーかそこまでする価値のある情報なのかというのは大いに疑問なんですが。
というわけでツイッターの『プロフィール ウィジェット』を PHPからツイートを引っ張ってきて表示する仕組みを作りました。 きっかけはIE9で表示出来なくなったという障害。 以前も興味本位で簡単に作りましたが本格的に実装しました。
通常は外部.jsをHTMLから読み込んで表示しますが、今回は『Twitter API』というのをPHPから使います。 これのメリットは今回の障害のような不具合や仕様変更の影響を受けにくい、 外部.js（外部.css）を読み込まないので表示が速い、 表示に使うHTML及びCSSを好きにいじれるといった点です。
デメリットはAPIの実行回数制限がある、認証が必要な場合があるなど。 後者は他所で調べてもらうとして前者の対策は簡単です。 ツイートを読み取った時に内容をファイルに保存して 表示の際にそのファイルを参照するようにすればいいのです。
読み取り＆保存と表示を分けることにより、閲覧者が直接APIにアクセスしなくて済むので 回数制限に引っかかりません。ただ、読み取り＆保存を手動で実行する必要があります。 面倒なら『cron』で自動実行させることも可能ですが。自分は一日数回しかツイートしないので手動です。 ブラウザでスクリプトにアクセスするだけ。
仕様の内容は以下の翻訳を参考にさせて頂きました。感謝！
というわけで約2年ぶりぐらいにサイトのデザインをリニューアルしてみました。 ちょっと前からちょこちょこといじってますがとりあえず完了です。 参考にしたのはYahoo!ニュース と アルファルファモザイクさん。 とりあえず右上に検索フォーム、というのが最近のスタンダードっぽいですね。
個人的には左上のタイトルロゴがお気に入り。可愛いフォントでしょ？ なんとフリーフォント。 いい時代になりました。もうちょっと装飾したかったんですが、 昔と違い今はシンプルロゴの方が受けがいいみたいなのでそのままです。
メイン部分は600pxでサイド部分が300px。実際に変更してみて思ったんですが コレかなりバランスが良さげな気がします。今までサイドが細すぎたんですね。 太くなって安定感というか安心感w がアップしました。超今更感が拭えない タグクラウドも表示。ほとんど使ってないタグが半数以上あるのは気にしないように。
追記：今流行（に乗り遅れた感）のソーシャルボタンをなんとなーく設置してみました。
追記2：ほとんど意味がなかったのでボタンは外しました。ソーシャル（笑）ですよねー（泣きながら）
創作活動を続けていくにあたりまず名前を憶えてもらうのが 重要だと思ったので、フルネームを名乗ることにしました。 「なごみ」が苗字で「佑」が名前です。 例によって考えるのが面倒だったので本名由来です。 以後お見知りおきを。
いわゆるセルフブランディングというやつですね。 ついでに新しく独自ドメインを取得したので 「act.st」のコンテンツをそちらに引越し予定です。 301リダイレクトして「act.st」はクローズするつもり。
いやー「act.st」さんには長いことお世話になりました。 まぁ2030年まで契約残ってますけどねw 当時は短いドメインが正義と思って取ったのですが、 結局コンテンツとの親和性もなく意味不明なネーミングで 終わってしまいましたね。反省です。
予定通り新ドメインへの引越しが完了しました。 新ドメインは「yuh-nagomi.jp」です。 旧ドメイン「act.st」にアクセスすると こちらにリダイレクトするよう設定しました。
ついでにサイトデザインも若干変更。そっけなかった ヘッダー部分をイラストで飾り洒落た感じに（当社比）。 コンテンツも若干整理。古すぎて参考にならない 技術的な情報とかゲームの攻略情報とかは削除。
あとTwitter（現X）に投稿したAIイラストを まとめたページを追加しました。Twitterは過去ログが 見づらいので意外と有益かなって。 なかったことにするのはもったいないし。 画像タップで拡大表示するようになってます。
ただ1ページに全てぶち込んだのでスマホだと スクロールが大変かもしれないw 時間のある時にでもゆっくりご覧ください！
サイトのリニューアルついでに色々変更して PageSpeed Insights でフルスコアを叩き出してみた。 細かい調整とか必要だったので勉強になりましたね。 仕様変更とか時々あるので定期的にチェックしよう。
あと Lunalys の次期バージョンは2024年になると思います。 スマホ向けにレスポンシブデザインに変更予定。 今年は色々とアレな事情で忙しいです。期待せずに待て！
Googleサーチコンソールを色々いじってた影響か Lunalys 公式サイトがGoogle検索で表示されなくなってしまったため、 以下のURLに変更します。突貫工事のため不具合があったら申し訳ないです。
変更前：https://luna-plus.jp/lunalys/
当サイトのHTMLとCSSを見直してよりセマンティックな 感じになるよう書き直しました。 具体的にはメイン部分とサイド部分をラッパーで囲んでたのを廃止し bodyにgridを指定して直接要素を配置しました。
表示がズレる場合はお手数ですがブラウザのキャッシュを 削除の上リロードして下さいまし。
今まで何となくでgrid使ってましたがようやく ちゃんと理解出来ました。なるほどねーこれは便利。 イマドキのWebデザインは全体をgridで配置して 必要に応じてflexをピンポイントで使うのが基本なのかな。
inline-blockとかも使いやすいしWeb黎明期と比べると 隔世の感がありますね！ 使う側も知識をアップデートしないとね。
というわけで今まで無難に作って騙し騙し 使っていたスマホ向けのサイトデザインを 大きく変えることにしました。
自分がスマホあまり使わないので（ロマサガRS以外） 優先順位が低かったものの、 さすがに本腰を入れる時期ではなかろうかと。
私は仕事柄WebデザインやスマホアプリのUIデザインを やったりすることがあるのですが、 今まで「私はデザイナーではない」という免罪符で 凝ったことは出来ませんなスタンスでした。
が！ 今回はもう「これが私のセンスだ、文句ある？」 と開き直ることにしました。
秘技『消えるヘッダー』！！
まぁ変えたのはヘッダー部分だけなんですけど 結構印象が変わるものですね。 最初はボタンもにゅって動く予定でしたが、 スペースの都合とか2回目以降はうるさいんじゃね？ という懸念があったので今回は見送り。
スクロールするとヘッダー画像とボタンの テキストが消えて見やすくなります。 ふふふ……真似しても良いですぞ？
この機能最初はCSSで実装したんですが iOSのSafariもChromeも動かないので、 JavaScriptで実装し直してポリフィルを 追加したことでようやく実現出来ました。
特定条件下で戻る、進むの時にチラつくことがある とかバグがあるのはご愛敬。数年後にCSSに移行すれば 直るのでは？ と期待してます。
で、肝心のヘッダー画像ですけどまだ全然途中だったりw まぁじわじわアップデートしていくのも楽しそうだなってことで。 モチベーションも上がるしね。 最終的に色まで塗れたらいいな、とは思ってますが果たして。
スマホのサイトデザインから逃げるな！
FOUCとは何ぞやというと Flash of Unstyled Content の略でWebページを表示する際にCSSが適用される前の 素のHTMLが一瞬表示される現象。チラついて見えます。 経験上、Firefoxで発生しやすい気がする。
先日のリニューアルで当サイトも発生してしまうようになりました。 PC版のFirefox限定ですけどね。 3日かけて調べて色々試した結果、 何とか解決したので備忘録として残しておきます。 Firefoxのページ右クリック→調査のコンソールで以下の文章が出たり出なかったり。
ページの読み込みが完了する前にレイアウトの開始が強制されました。 スタイルシートがまだ読み込まれていない場合、 スタイル付けされていないコンテンツがちらつく原因となる可能性があります。
要するにCSSのパースが終わってないのに レンダリングが始まっちゃうってこと。 どう直せばいいのかも教えてよ。 通常はhead要素内で外部CSSを読み込むとレンダリングが ブロックされるはずなんですが、されない。 なんでやねーん……
結局原因は何だったかというとスマホ向けのポリフィル（JavaScript）でした。 これが60KBもあるので悪さしてるっぽい。 script要素にもmedia属性が付けられたら 良かったんですが残念ながら無理です。
で、どうしたかというと ポリフィル＋アニメーション設定 の部分を別の.jsファイルに分離して スマホのみページ読み込みの最後で呼び出すようにしました。
「load」イベントだと戻る、進むの時に発火しないので 「pageshow」イベントを設定。 createElementでscript要素を作成してbody要素の最後に追加で完了。
あー疲れたー！！
先日スマホ向けのサイトデザインを変更しましたが 詳細を備忘録として残しておきます。
デザイン的に古いと判断。 無難なデザインだったがやや圧迫感があった。
丸ボタンのリンクを3つのみ表示するようにした。 必要なナビゲーションはこれだけと判断。
ブラウザのフリック移動が標準で搭載されるようになったから。 OSの機能かもしれない。
恐らく需要が低い上に見て欲しい度も低いから。 HOMEの表示とも繋がるので。
絵描きを目指す者として結局見て欲しいのは絵。 初見時のインパクトを出したかった。
さりげなく名前をアピール。 セルフブランディングの一環。
現行のiOSで「ヒラギノ丸ゴ ProN」という いい感じの標準フォントがあったから。 Androidは知らん。サイズも少し大きくした。
レスポンシブに対応してから肥大化していたので メディアクエリーで完全に分離させた上、 セレクターをなるべく減らしてダイエットした。
今までサイトのレイアウトはPCをベースに 各種サイズをpxで指定してたのですが、 フォントサイズを基準にしたemで設定し直しました。
スマホとかタブレットは年々表示サイズが大きくなってるのに 今さら気が付いたので、基準となるフォントサイズを 計算で出して最小値と最大値もついでに設定。 CSSも進化しましたね。
clamp(1.4rem, 100vw / 25, 2.0rem)
具体的には上記のように。横390pxだと15.6pxになります。 タブレットだと大きくなりすぎるので上限を設定。 ヘッダーのボタンとイラストのサイズも スマホとタブレットで別々に設定。
AIイラストやリベサガプレイ日記のページもなるべく 画像が大きく表示されるように調整。 ここもPCベースのサイズからようやく改善！
久しぶりにサイトデザインをリニューアルしました。
コリスさん
というWeb関連の情報サイトがあるんですけど
ここのデザインをインスパイア参考にさせてもらって
自分流にアレンジしてみました。
PC向けではサイドは固定表示、全体の横幅を可変に。 具体的には960px～1152pxで変化します。 959px以下でスマホ／タブレット向けの表示に。 タブレットで横向きの時にPCと同じ表示になるので 見やすくなったと思います。
あとスクロールバーをデフォルト表示に戻しました。 白背景との一体感を高めるためにカスタムしてたのですが 白背景自体やめたので、必要ないだろうと。
そしてスマホ向けには長らく使っていた 上部のナビゲーションを下部に変更。 スマホアプリでよく使われるボトムナビというやつです。
近年のスマホは大型化が進み、片手操作時に 画面上部へタッチしづらいらしいので思い切って下にしました。 （私は両手で操作するので気にしてなかった） ちなみにLunalysの次期バージョンもこれになります。
ついでにスクロールに追随するアニメーションを廃止。 ちょっとポリフィルのサイズが大きいし 今回はシンプル路線にしてみました。 CSSで全ブラウザが実装されたら復活するかも。
ヘッダー画像もPC／スマホで共通に。 まー途中といえば途中なんですがw 相変わらず色が塗れないのでスクリーントーンで それっぽく出来ないか試行錯誤してる最中です。