2019-06-01に更新

妻のために作ったアプリ「Pokéctiveness」がいかに「技術を使っていないか」を語るですだよ

解決しようとした課題

妻がこんな本を買ってきたので大変ビックリしました
ポケモンファン.jpg

付録のコレがほしかったのだそうです
ツール.jpg

バトル相手のタイプを選択すると、有効な技のタイプが赤側の窓に、無効な技のタイプが白側の窓に表示されるます
某巨大掲示板の鬼女板の P-GO スレで高く評価されていた大変なスグレモノなのだそうです

こういうポケモンのタイプに対する技のタイプの相性は、専門家の間では「タイプ相性」と呼ばれていて
こういうの とかこういうのとかいろいろ公開されているのですが、これからバトルが始まるという緊迫した時間にスマフォの小さな画面で検索するのに適したものとはちょっと言い難いというか、そもそもモバイルファーストでさえないし

というわけで前述の、小学生の頃に九九の暗記するのに使ったみたいな素朴なツールが大変実践的に有効との評価を世間で得ているようでございます

一緒にバトルにいくと妻は喜んでクルクル回して「そうかー、鋼には火が良かったんだー」とか言ってますが、流石にいい大人がこんなの持ってるのが恥ずかしいのか周りの目を気にしてます
不憫に思った私は、恥ずかしい物を持ち歩かないですむようなスマフォアプリを速攻で作ってあげようと思ったのでありました

つくったもの

Pokéctiveness のご紹介

というわけで、こういうアプリをつくりました、アプリ名はオサレに Pokéctiveness にしました
2018-12-12 10.22.10.png

タイプの選択はこんなかんじ
2018-12-12 10.21.57.png

こちら公開してます のでよかったらおちかくのポケヲタの方にご紹介していただければ至福の至りにございます

海外タマゴが欲しかった1頃につくりまくった海外の friend にもつかってもらおうと思って i18n もやってますので、海外のポケヲタの friend にもご紹介いただければ大変ありがたいです

2018-12-12 20.05.37.png
2018-12-12 20.05.46.png

開発エフォートその他

何作る時でも開発記録をつけるようにしてるんですけど

2018.12.09 stat development.
2018.12.10 basic feature completed.
2018.12.11 Add color.
2018.12.12 Internationalization.

9日の夜からつくりはじめて 11日に妻に公開、当初白黒でつくってたんですけど「色ないと寂しい」というリクエストをもらってその場で対応

開発量は cloc-git で見るとこんなかんじです、小学生のプログラミング教室なみに小さいですね ^^;;;;

       7 text files.
       7 unique files.                              
       4 files ignored.

[https://github.com/AlDanial/cloc](https://github.com/AlDanial/cloc) v 1.66  T=0.04 s (98.3 files/s, 9388.5 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
JavaScript                       1              7             13            207
HTML                             2             19             10            116
JSON                             1              0              0             10
-------------------------------------------------------------------------------
SUM:                             4             26             23            333
-------------------------------------------------------------------------------

333 はゾロ目で縁起がいいですね、来年もよい年でありますように

使ったり使わなかったりした技術

Pokéctiveness は Web アプリです

技術は課題解決の手段なので、その選択は解決しようとする課題に依存します。オサレないい言い方するとアーキテクチャ・デザインはプロブレム・ドメインに依存するというか

で、今回は不憫な妻にさっさと使わせてあげたかったので、審査に何週間も必要なネィティブアプリを選択することはそもそも不適切と判断して Web アプリ としてサクっとつくりました、というかそもそもネイティブアプリはめんどくさいので、可能なかぎり Web アプリを選択する傾向はございます

Web アプリなので起動時にリソースの読み込みで 0. 何秒か間があるのですが、そもそも本家の P-GO の起動がものすごく遅いので気にせずつかってもらえているようです

Web アプリでもネイティブアプリみたいにホーム画面に登録できます

掲題のとおりですので、いちいち Safari を開いてブックマークから選択して、なんて手間はございませんのでご安心ください

以外としられていないみたいなのでクリスマスを記念してご紹介しておきますと、Safari で開いて画面下部真ん中の、四角に上矢印がついてるアイコン(意味不明ですよねこんなの)をクリックすると

2018-12-12 08.44.10.png

こんな感じのモーダルダイアログがでてきて、そこに「ホームに追加」ボタンがあるので押すと

2018-12-12 08.44.29.png

こんなふうに「ホームに追加」モーダルダイアログがでてきて
2018-12-12 08.45.33.png

こんなかんじに「ホームに追加」できます
2018-12-12 08.46.10.png

まったく関係ないですが、この壁紙はインスタで拾った仏頭で寝てるトラの写真で、なんかトラが知的でかつなんとなく寂しげで、まるで寒山と拾得の話しの豊干禅師に師事したトラが「最近、来ないな〜」って自分なんかを指導してくれた禅師を懐かしんで寂しがってるみたいな雰囲気が気に入ったので使ってます

閑話休題、ホーム画面のアイコンはそのままだとアプリ画面のスナップショットになってしまってちょっとカッコ悪いですので、下記のようにファビコンをつけるのと同じ要領で

<link rel="icon" href="favicon.ico"/>

apple-touch=icon という画像を用意しておくと、それをアイコンにしてくれて少しオサレです

  <link rel="apple-touch-icon" href="favicon.ico"/>

フォントをオサレに

こういう小学生のプログラミング教室どころか、営業職から開発職への強制配置転換社内教育なみにショボいアプリの場合、見た目がカッコわるいすぎると誰からもつかってもらえません
中身のないソフトは中身のない人間と同じで見た目が命です
恥しくて人前にだせないような UI だと使ってもらうチャンスは限りなくゼロに近づきます

フォントにこだわると比較的、エフォートレスに見た目をオサレにすることができます
私はおフランスのカフェの黒板のメニューの文字みたいにクルクルしたフレンチ・スクリプトが好きで
google font で Parisienne とか使うとメニューがオサレになります

<link href="https://fonts.googleapis.com/css?family=Parisienne" rel="stylesheet">

future works

相手のポケモンが何タイプなのかよくわからない奴がいるんですよね、ナッシーとかなんなんだろう?それをワンタッチで検索できるようにしてほしいとのことなのですが、どういう UI がいいのか難しいです
名前を文字列で入力させるのは最低なので、なんかいい方法ないか考え中です

アイデアマンの諸兄諸姉の素晴らしい名案がございましたら、コメント欄にでもお知恵をいただければ大変ありがたい次第でございます

2019.06.01 追記

銀行の振込先選択みたいに、名前の先頭位置文字を入れる形式にして、ついでに material design light やめて Vuetify にして pokectiveness2 にメガ進化しました


  1. friend と交換したポケモンの距離に応じたメダルが貰えるので海外の friend を twitter で募集するのがちょっと前に流行った ↩︎

ツイッターでシェア
みんなに共有、忘れないようにメモ

Dr. Takeyuki Ueda

Je suis un Japonipais, experimants ingénieur logiciel de mobile et cloud. Ph.D en ingénierie.

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント