あーさーの備忘録

ゆっくり自由に生きてます

Shiren Identifier ~風来のシレン識別アプリ~

近況報告

こんにちは。サーバーサイドからフロントにどんどん傾倒しているArthurです。最近はVue.jsを利用したSPAに興味があって、PHPフレームワークのLaravelを利用したり、静的APIで良い場合にはvue.js+webpackでいろいろなWebアプリを開発しています。Vue.jsは部品をコンポーネントで管理していくJavaScriptフレームワークです。Web ComponentsはCSS設計の本で仕様だけ理解していたのですが、実際使ってみると「これすごい!Component最強!」という気持ちでいっぱいになりました。Laravelはvueとscssをwebpackでコンパイルできる環境がお手軽に構築できるので本当に便利です。サーバーサイドのコーディングが必要なくても使いたくなってしまうレベルです。

そんなVue.jsとLaraveを使って作った初めてのSPAが「Twicla」というサービスです。これは、自分の大学の講義カレンダー(iCal形式)をparseして、出席状況管理をするものです。初めての割にはJWTAuthを使用したり、Vuexで状態管理をしたりとなかなか大規模なものになってしまいました。それ故に若干リリースするには怪しい(未完成な)部分も多々あるのですが、一応普段使いできるレベルに仕上がりました。

Shiren Identifier

そして、Laravelに頼らずに作ってみたのが「Shiren Identifier」です。これは「風来のシレン」というスーパーファミコンのソフトの最終ダンジョンでアイテム識別の支援をするアプリです(不思議のダンジョンシリーズなのですが、ポケダンなどと違って(?)アイテムは使用するまでどんなアイテムか分かりません)。

f:id:arthur_teleneco:20180613125330j:plain
キャプチャ

条件を入力しアイテムを絞り込み、識別済みならアイテム欄にチェックを付けていきます。識別済みチェックのデータはローカルストレージに保存することができるようになっています。

https://shiren.jizinet.work/

今後の課題

これからできるようになりたいのは、Componentsの細分化です。現状はvue-routerを利用しているのもあって、1ページ1コンポーネント+テンプレート部分(ヘッダー・フッターetx)という構成になっているのですが、各ページの要素も細かいComponentsに分割できるはずです。状態管理が大変になるのでVuex使わないと厳しい感じもしますが、いずれはきちんと分割できるようになりたいです。

webpackも自分で環境構築するのは慣れていなくて、結局staticな別ファイルをたくさん作ってしまっています。HTTP2で配信しているためファイルをまとめる意義は薄いような気もしますが、Laravelに頼らずともwebpackを使いこなしたいです。

また、せっかくSPAにしているのだから、Service Workerのキャッシュを利用しオフラインでも利用できるようにしたかったです。これはwebpackにプラグインを導入する形で解決するのが丸そうですが、他にもやることが山積みなので後回しにします。

あと全く別件ですが、ここ数ヶ月コーディング量がすごいので、ブログに書きたい内容がかなり溜まっています(CTFとかぶらつき学生ポータルのアップデートとかWebデザインについてとかボードゲームとか)。一気に放出しても仕方ないので1週間ずつぐらいに小出しにしていければなぁと。それでは。