2023年 更新履歴

2023/10/19

イラストのページを作った

このサイトを立ち上げた当初と比べ、大分単純化とシステム化をした。具体的には、機能やコンテンツ、コード上の無駄を削除し、HTMLをテンプレート化してスマホから更新するのも余裕にしている。

生まれた余裕で、シンプルなイラスト羅列ページを作った。大枠はこのブログページと同じである。

コンテンツを縦横何列に並べる（display: grid;）という設定があって、絵を横２行とか３行で並べている。この設定めっちゃ便利〜デザインのいいサイトとかでこれが使われていたので、使い方を調べてやった。

サムネイル画像ファイルの作り方ですが、
iPhoneの写真アプリで5:7の横位置にして
Procreate（イラスト描くアプリ）で縮小し
ファイルというiPhone純正アプリで「〇〇.png」みたいなわかりやすい名前に名称変更することで均一なものをiPadで作ります。

記事ページは見た目は同じだけど、イラストの方は画像をクリックすると大きいサイズの画像が閲覧できるようになっている。

デザインをほぼ同じにしてるので、ちょっとデザイン修正しようと思ったときに一括変更が楽です。

ブログとイラストで背景色が違う理由

最近お気に入りの写真を何枚かプリントアウトしてノートに貼ってみたのですが、ピンクと水色を同時に含んだ画像が多かったんです。ピンクと水色の組み合わせを嗜好しているという自覚がなかったので新たな発見でした。試しに自分のサイトにこれらの色を配色しています。

かんたんHTML

ときどきHTMLはPCがないと更新が大変っていう話を目にしますが、それほどでもないです。簡潔に私の更新手順を書きます。

1. 記事ページなど、更新したいページのテンプレートをNotion（多機能メモアプリ）とかに作っておく
2. そのテンプレートで記事ページを書く
3. ファイルをサーバー（GitHub）にアップロードするときに「〇〇.html」って名前を付ける

こんな感じです。HTMLはいいぞ。NotionもGitHubもいいぞ。

サーバーのセキュリティとか、詳しい部分は知りません。利便性の話であります。

2023/11/18

RSS配信、ファビコン変更など

RSS配信

RSSフィードを配信しました。
【2024/10/24追記】フィードがエラー吐いてたので修正中です。

2012~2023年の過去絵を載せた

pixivからまともに描けてるやつを半分弱持ってきました。drawページの下の方に追加しています。

ファビコンを変更した

ファビコンの子はKAMINのふわふわくんです。

2023/12/06

元動画のリンクを貼った

本文

S4Uと我々だ！のファンアートに元動画のリンクを付けたよ！元動画どれだよ？っていう絵もあったけど大体正しいリンクが付いてるはずだ！

他のジャンルは二次創作マナーが不明だったり、本家に直結するリンクが無かったりなのでこの２ジャンルだけにしました。

蛇足

改めて動画を観ると推せるし描きたくなるな。特に我々だ！に関しては、当時公式絵らしい公式絵が少なかったのでメンバーのキャラデザをオタクが自作するのが普通だったのですが、自分好みで描いてるのでやっぱり好きです。可愛くてしゃーない。

まあS4初めて見たときも「しもやかさんって素敵なお友達と活動しているのね〜」ってなってたからビジュアルに釣られたのは変わらないですけど……我々だはロールプレイ主体のゲーム実況が特徴的だったので、漫画描くのが好きな私には描きやすいっていうのもありましたね。

今戦争見たら昔よりもっと理解できるだろうな。当時は字幕とセリフと秘密通信と画面の情報量で頭こんがらがってた。

Wotで遊ぼうとかニコニコの「その他動画」ってリストに入ってて探すのに苦労した。S4も我々だ！もニコニコからYouTubeに移行してて、しかも全移行したわけじゃないから見つけにくいんだ。シリーズものだとpartいくつかわからんし。YouTubeは投稿日時が古い順に並び替えできないからリアルタイムの投稿日時とYouTubeへの移行日時が異なると時期で辿るのもできん。

私もpixivからこのサイトに絵を移行したし、検索性について考えるいい経験になった。検索性よさといえばcatnoseさんのしずかなインターネットを使ってみたんですけど、デザインがいい・シンプル・機能的ですごかった。catnoseさんはいつもすごいけど、実際にサービスを使ったことはなかったんですよね。メニューボタンが左下にあるのがあんなに便利とは。エディタの使いやすさ的にもめちゃめちゃ参考になった。

技術構成を見てみる

私は細かいところまで理解できないと色んなことができない人間なので１から１０まで自作に頼りがちなんですけど、プログラミングはわりと他人の作ったシステムを組み合わせて作るものですよね？たぶん。そう考えるとこの作業が向いているかどうか微妙だな。「今は分からなくても大丈夫」とか「そういうもんだと思ってやって」とか言われると99%やらかすんですよね。常識部分が弱いので。

Progateはまさに「そういうもんだと思って」系のプログラミング学習サイトなんだけど、細かいところはChatGPTさんに聞けばえなくんでも学べる気がする。エディタと画像リサイズと記事検索と目次とリンクカードをうまくしたい。

2023/12/10

わしのWebデザインを愛でる回

カラー&ミニマル&明瞭。わしの名前をサイト名にしているのでわしが最強になってしもうた。余の天下じゃ。

めっちゃChatGPTに質問したけど、私のJavascript知識が足りなくてあまり実装できんかった。ちゃんと勉強するとなんでも出来そうな言語。

アイコン部分はbuttonではなくdetailsでつくった。detailsの挙動は比較的かわいいが、完全な制御はできていない。

製図が得意らしいConceptsでアイコンを作った。めっちゃ使いやすい〜図形の変形ツールが扱いやすすぎる。きっちりした線に苦手意識あったけどきれいにできてよかった！フリーアイコンじゃ統一感出せないからな。

RSSフィードはサイトURLから取得できるようにした。記事ページ以外のページなら大体取れる。

write、drawボタンはそれぞれのトップページ、enacum.のボタンはwriteのトップページに飛ぶ。記事ページからも飛び放題。

ライトモードのデザインも載せておきますわね。

その他

幅や高さをpxで設定していたので比率（vw、vh、%）に切り替えた。スマホで表示が崩れないようにするためにはpxを使わないほうがいいとネットの有識者が言ってた！画像並べるときの設定にはまだしばらく悩みそうだな。綺麗に見える比率を探している。色も視認性追求のためちょっとずつ変えている。

あとは記事作成にマークダウンとスニペット（辞書登録機能みたいなやつ）を使うようにした。

1. Craftで書いた記事をMarkdownで出力
2. エディタで読み込んでHTMLに変換する
3. スニペットに入ってる画像用タグなどを使って完成させる
4. タイトルや日付などいろんなページで使い回す部分はJavascriptの定数を使って入力

PCでしかできないことが難点。もっと簡単にやるならブログサービスみたいにブラウザ上で編集・保存できるアプリケーションを作ればいいと思うが（それはたぶんそんなにむずかしくない、たぶん。）ログイン周りに適切なセキュリティをかけるには、サーバー移転する必要性が出てくる。Github pagesでもできるけどそこそこお金かかる。という認識。それでもかなり作成しやすくできていると思う。

コンテンツ作れよ

二次創作の妄想難しすぎるな〜この二人エモそう……！？エモそう……！と思って探ってみると結構あっさりしてて形にしづらかったりする。ルッチとパウリー！お前らだよ！！

パウリーがアイスバーグさんの敵討ちをルフィに託して、その上仲間の立場からクビを突きつけていて　敵としても仲間としてもあそこで断ち切ったんだな〜あ〜パウリーけっこうしっかりしている。２４歳くらいなのにな。

ルッチのほうが子供なんだよな、あの二人だと。政府に反抗的かどうかできっちり分別して融通が効かないあの戦い方……

ルッチはやっぱりルフィなのかな。ルフィしかないのか。妄想広がりそうな沼はどこなのか……あ！ヒョウ太（ONE PIECE学園のルッチ）か！しばらくヒョウ太でチャージしよう。想像力を。