新ブログシステム開発

スクラッチで開発

というわけで、休止報告の記事で


  • あとは世の中の流れがブログではなくSNS中心となり、AIの進化も著しくGoogleからの流入の傾向も変わってきたので公開の仕組み自体も見直したくなったというのもあります。


と書きましたが、どうせならということでブログシステムをスクラッチで開発しました。


使える時間は会社から帰ってからの1日2~3時間なので1年ほどかかるかなぁと思っていたのですが、近年のAIの凄まじい進化によって、なんとコアは2週間程度、全体でも1ヵ月程度で開発完了...。


あ、これはあと数年で人間のエンジニアは必要なくなるな


という確信とともに、便利な時代になったなと。


これからエンジニアとして稼いでいく人たちには訃報ですが、もう飽きるほどコードを書きつづけて生計を立ててきた身としては恩恵しかないので、ポジティブに生成AI活用によるソフトウェア開発を極めていこうかと思います😊


ブログシステムの特徴

野鳥撮影ブログ特化

機材
EOS R7 + EF800mm f/5.6L IS USM
焦点距離
800mm
SS
1/200
F値
5.6
ISO
320
露出補正
0
撮影距離
16.7m

当然ですが、野鳥撮影ブログ特化型のシステムとなっています。


これまでサイト運営を続けてきて、Wordpressで不満だった所をすべて解消するつもりで開発。


  • 高解像度写真の管理と配信形式の強化
  • EXIF情報の抽出と管理、表示の強化
  • 拡大表示(ライトボックス)の強化
  • ギャラリー機能の強化
  • 殿堂入り写真ショーケース
  • 作例ライブラリ(近日公開)
  • 目次の強化
  • 広告対応
  • SEO対応



これらが主な特徴です。


高解像度写真の管理と配信形式の強化

こういったスライドもAIで一発出力できるので、便利すぎて倒れそうですね😂


ブログで現像後の写真を管理できると楽なのですが、ウォーターマーク(右下のロゴ)をあらかじめ焼き付けておかなければならなかったり、不要なメタ情報を消さねばならなかったりでかなり不便でした。


  1. 現像した写真をそのままアップロード、管理者はいつでも元の写真をダウンロード可能
  2. EXIFやGPSなどの付加情報を消して、ウォーターマークを焼き付けた配信用バリアント画像を自動生成
  3. 配信時にはそれぞれの端末で最適な解像度の写真が適切にダウンロードされる


こういう管理にしたので、かなり楽になる&効率的な配信ができるはず。

EXIF情報の抽出と管理、表示の強化

機材
EOS R5 mark II + EF800mm f/5.6L IS USM
焦点距離
800mm
SS
1/8000
F値
5.6
ISO
2000
露出補正
-3
撮影距離
20.3m

これまでwordpressではEXIF表示用のプラグインをいれて表示してきたのですが、わざわざショートコードを入れたりとかかなり面倒でした。


さらに、


  • Canonの写真にはEXIFに正確なレンズ名が入っているのに抽出できない
  • Canonの写真でCaptureOneで現像した写真はEXIFに撮影距離が入っているのに抽出できない
  • テーブル的にきれいに出してくれないので見にくい


というような不満があったので、しっかり抽出して表示できるように開発。

これでブログ更新時のいろんな手間から解放されるはず😊


あと便利機能としてEXIFに保存されているボディ名やレンズ名を整形して置き換えする機能。

ボディによってフォーマットがバラバラだったりするのでサーバー側で置き換えて表示。

拡大表示(ライトボックス)の強化

機材
EOS R5 mark II + EF600mm f/4L IS II USM
焦点距離
600mm
SS
1/4000
F値
5
ISO
1250
露出補正
-1
撮影距離
16.5m

WordpressではプラグインやJSのライブラリをいれてなんとか等倍写真を見やすいように頑張ってたのですが、一般的にWebで高解像な等倍写真を見るというニーズがほぼないのか機能が不足してました。


  • ダブルタップやボタン1つで等倍で表示
  • ボタン1つでブラウザ領域一杯に表示
  • ピンチ操作によるズーム
  • 慣性スクロール
  • フルスクリーン対応
  • EXIF表示に対応
  • 戻るボタンで表示解除


など、UX的な部分なので説明は難しいですが、スマホでこのサイトの写真をタップしてもらえれば何がしたかったのかはわかってもらえるはず😎


せっかく高解像写真を撮るために頑張ってるので、きれいに閲覧できる仕組みは必須かなと。

ギャラリー機能の強化

カワセミをよく撮影するので「連続写真+その中のピックアップした写真を上に表示」というパターンを多用しているのですが、Wordpressでこれを作ろうと思うと結構しんどかった。


  • 縦横の写真が混ざるとギャラリーの表示が崩れていた
  • PCとスマホ時に横列数の調整ができなくて自由度が低かった
  • EXIF情報はショートコードで貼る必要があった


など。


こういう「私のブログではカワセミ写真を扱うからどうにかして」というような我満対応はもちろんWordpressでは無理なので自作😂

殿堂入り写真ショーケース

トップにショーケースを作って、ここから殿堂入り写真のページへ飛べるようにしました。


  • カルーセルで自動左右スクロール
  • 自分でもスワイプやボタンをおしてスクロール
  • タップすると参照元の記事にジャンプ


これもあるように見えてなかなか管理が厄介なんですよね😂


というわけで開発。

作例ライブラリ(近日公開)

元々は自分用のギャラリーを作っていたのですが、なかなか良い感じにできたので一般公開する予定。


ボディやレンズ、SSやF値、ISO、絞り値、鳥種などで絞って作例を見ることができます。


私が撮った野鳥写真しかありませんが、リスト化したら十分に作例ライブラリとして機能するくらいの種類と枚数があったので。


お楽しみに。

目次の強化

目次についてはWordpressでつかっていたテーマなどでは、かなり広い範囲を食ってたのとページ対応とかで残念な感じになってたのでこれも開発。


どうしてもテーマって製作者が良いと思うように作ってるので、かゆいところに手が届かないんですよね。


これも階層や表示行数を指定して好きな場所に貼れるようにしました🥴

広告対応

Wordpressではこれもプラグインやテーマなどで頑張って対応してくれてはいるのですが、なかなか自分の好きに...という感じにはできなかったので自作。


  • 固定位置の表示ON/OFF
  • Google Adsenseの自動広告機能との協調(全画面だけ使いたいとか)
  • 記事の中にどのくらいの頻度でどう埋め込むかなどの指定
  • 広告ブロッカー対策


まだここは完全ではないですが、大体制御できるように。


もうちょっと厳格にサイズなど規制したいのでそこは追って対応...。


サーバー費用もばかにならないので、そろそろ広告ブロッカーが入っているブラウザでは閲覧できないようにします。

SEO対応

これからの時代はWEB検索は減りそうですが、それでも検索エンジンに載せてもらうのは必要なのでその辺。


ただ、SEO対策とかそういうのではなくちゃんとクローラーに読んでもらえるようにという程度。


これもWordpressではプラグイン対応でしたが、何も考えずにできるように。

細かい設定とか...別にいらないので😂

今後

というわけで、AIがなかなかすごかったので思わず熱中して作りこんでしまいました。


いつか野鳥写真でちょっとした収入を得たい人が気軽に始められるブログシステムとして公開したいですね。


あわせて趣味でソフトウェア開発の技術記事も書いていきます。


違ったところにも需要があるかもしれませんので😂 鳥屋には需要は絶対にない


それでは、しばらくは不具合などでて閲覧できないこともあるかもしれませんが、またよろしくお願いします。