ホーリーのプログラミング日記

ホーリーのプログラミング日記

エキセントリック・スーパーアプリクリエイター / アプリ総DL数 約180万 / 全然分からない 俺は雰囲気でアプリを作ってる / iOS : apple.co/3m3HxSm / Android : bit.ly/3ma0liZ

【Totonotter】ログイン&トップ&検索&一覧

 

銭湯サイトなんですが、実際にユーザーが触る画面も出来てきました。

CSSは全く書いてないので、HTML丸出しなんですが、とりあえずはOK。

必要なものだけ置いてみています。

 

f:id:gevvoihorry:20180629141034p:plain

 

まずは会員登録(ログイン)ですね。これTwitterボタンのみにしようかと思っています。普通の会員登録画面を作らないっていうか。

 

f:id:gevvoihorry:20180629141239p:plain

 

んで、トップ画面がこれですね。この画像だけでは全く分からないんですが、ゆくゆくは可愛い画面になるはずです。多分w

 

イメージはヨッピーさんのニュートピなんですよ。

ニュートピ! - Twitterで話題のニュースをお届け!

 

f:id:gevvoihorry:20180629141505p:plain

 

これ一番上にタブが3つあって、それを押すとポチポチ切り替わるようになっています。

さっきの画像では全く分からないでしょうが、同じように実装してみました。

jQueryで書いたので、画面遷移することなく、適当に切り替わります。

 

やっぱスマホのことを考えると、jQueryが必要なんですよね。コンテンツをしまっておく仕組みっていうか。

jQueryデザインの教科書」って本に、最近のアニメーションが一通り載ってるので、いつもこれを参考にしています。

開閉するナビゲーションメニューとかもそうですね。

 

作りながら学ぶjQueryデザインの教科書

作りながら学ぶjQueryデザインの教科書

 

 

f:id:gevvoihorry:20180629142305p:plain

 

トップにはランキング、検索、マイ銭湯っていう3つのメニューがあるんですが、そのうち1つ、検索がこれです。

エリアないし名前から銭湯を検索出来るようにしました。

 

本当は現在地から近い銭湯とかも検索出来たほうがいいんでしょうけど、この銭湯サイトのメインはユーザー投票のランキングなので、現状は無視しています。

てかマップを取得するような処理を知らないんですけどね。Googleマップ使うようなあれをw

 

f:id:gevvoihorry:20180629142728p:plain

 

この画像では全く分からないでしょうが、検索すると銭湯の一覧画面になります。

今はテストなので2件ずつ表示してるんですが、最終的には10件ずつくらい表示させる予定です。

 

===

 

まあこんな感じですね。てかCSSも載ってない画面を見せて、誰かにメリットあるのかと疑問に思ってきましたよ。

画像見てもサッパリ分からない記事って、自分にも相手にも優しくないですよねw

 

誰も何も分からない状況でいうのもあれなんですが、もう僕の中では半分くらい終わった気でいます。ベースのシステムはほとんど完成ですよ。

あとはAjaxを使って「いいねボタン」を実装出来れば、問題となるポイントはありません。バックエンドは一気に完成するような気がしています。

 

気がするって言うだけで、実際どうなるかは分かりませんけどw 

【Totonotter】銭湯修正&削除

 

銭湯追加画面に続き、修正と削除の画面が出来ました。

銭湯追加画面 - ホーリーのプログラミング日記

 

f:id:gevvoihorry:20180629133948p:plain

 

こんな風に用意して、ここにポチポチ書いていけばOK。

 

f:id:gevvoihorry:20180629134129p:plain

 

それで銭湯の一覧画面も用意。

ここで適当に選択して「修正」を選べば、、、

 

f:id:gevvoihorry:20180629134246p:plain

 

修正画面になるわけですね。

 

えー、削除を選んだ場合は、、、

 

f:id:gevvoihorry:20180629134330p:plain

 

「消しちゃっていいの?ヤバくね?」って言われるので、ここでOKを選べば、見るも無残に消え去ります。

 

===

 

このへんの画面は自分用なので、CSSは無しです。もうこれでひとまずの完成にしようかと。

 

しかし久しぶりにこういうコードを書いてて思ったんですけど、これこそ正にPHPの基本ですね。

データベースへの出し入れとか、入力フォームの値を判定するっていうのは。

 

「気づけばプロ並みPHP」の本当に最初に書いてる部分なんですけど、改めて大事なところだなと思いました。

 

気づけばプロ並みPHP~ショッピングカート作りにチャレンジ!

気づけばプロ並みPHP~ショッピングカート作りにチャレンジ!

 

 

本の中で一番最初にやるのが、スタッフの追加&修正&削除なんですよ。これを作るんですが、ここであれこれと実験すればPHPの理解は一気に深まりますね。

PHPっていうかプログラミングかな。取得したり判定したりっていうのは、基本中の基本だと思うので。

 

改めてあれは良書だと気付きましたよ。今だと改訂版が出てるみたいですが、僕は上記リンクのそれを買いました。

改訂版はレビューを見る限り、ちょっと怪しい部分があるのかもしれません。実際に買ってないので分かりませんけどw

 

「プログラミングの基礎を身に付けたいんじゃ!!」って人にはおすすめの本ですね。

銭湯追加画面

 

誰の参考になるか分かりませんが、銭湯サイトを作ってるので、その作業履歴を書いていこうと思います。

前回も書きましたけど、多分僕のやり方は古いです。今どきのシャレオツな要素はゼロですが、とりあえず問題はないので、ちょこちょこ作り始めた次第です。

WEBサービスを作るときの心強い味方 - ホーリーのプログラミング日記

(実際の作業はここに書いてる書籍を参考にしています。今のところは「気づけばプロ並みPHP」だけですね。これを見ながらやってる感じ)

 

WEBサービスは今日まで1個だけ。ビルメンネットっていう、清掃会社同士のマッチングサービスを作りました。

ビルメンネット | 清掃系マッチングプラットフォーム

 

これ作ったのはプログラミング始めてすぐのときだったので、結構忘れてるところもあるんですが、そのへん思い出しながらキーボードを叩いております。

まあ、このときのコードを流用するのが主ですね。大体のことはこのときにやったので、それを見返しながら実装してる感じです。

 

===

 

えー、なにはともあれ銭湯を追加する画面ですよ。自分用の。それから作っています。

データベースっていう、データを保存しておくテーブルを用意して、そこに銭湯の情報をINするところからですね。

銭湯の名前とか、営業時間とか、住所とかをそこに入力していきます。

 

最終的にはこの入力作業が一番大変になると思うんです。エリアは東京に限定してるんですが、それでも多いですからね。多分数百件はあるかと。

まあ、とりあえずはテストですよ。適当な情報を入力しておいて、そのままプロトタイプまで作る予定でいます。

東京中の銭湯を入力するのは、本当の最後。

 

f:id:gevvoihorry:20180628134712p:plain

 

めっさ適当なんですが、こんな画面を用意して、銭湯情報を入力。

とりあえずは20件もあれば十分だと思うんです。テストするのは、そのくらいの数で十分。

 

f:id:gevvoihorry:20180628134033p:plain

 

んで確認画面ですね。自分用なんで、かなーり適当ですが、これでOK。

エリアは東京の23区限定で、それを23桁の文字列に直しています。

選んだエリア(渋谷区とか)の場所に「1」って値が立つようにして、この数字の羅列で判定する予定です。

 

それでこれをデータベースにドーンと入れました。入れましたよ。さっき。

久しぶりにデータベースを触ってるので、当たり前のようにエラーが出ましたが、とりあえずOK。無事に格納出来ました。

 

===

 

あとはこれの修正画面や削除画面を作っていこうと思っています。

銭湯の情報が間違ってたり、変わったときに修正する画面ですね。また残念ながら閉店してしまったときに、丸ごと削除する画面。

 

 

やることは結構沢山あるんですが、地道に一個ずつやっていきたいと思います。

サイト自体の難易度は低いはずなので、とにかく根気ですね。これが大事なはずw

WEBサービスを作るときの心強い味方

 

ワールドカップで生活リズムが乱れてるせいか、はたまたビールの飲み過ぎなのか分かりませんが、最近やりたいことが全然進んでおりません。

まあとりあえずは銭湯サイトなんですよ。Totonotter(ととのったー)っていうWEBサービス

これを進めるべく、今日、いや明日から頑張ろうと思っています。

 

明日から本気出すぞ

 

===

 

んで、誰の役に立つのか分かりませんが、僕がWEBサービスを作るときの、心強い味方を紹介しようと思います。

 

それがこれだ。

 

f:id:gevvoihorry:20180627174216j:plain

 

ドーン

 

これらの本があれば大丈夫。どんな苦難も乗り越えられると思っています。

 

まあ正直に言えば、どれも古い技術のそれだと思うんですよ。こないだkatonoboさんのブログを見たら、最近の技術が紹介されていたので、そのときに感じました。「ああ、僕が知ってる知識は過去のそれなんだな」と。

【Vue.js】【Cloud Firestore】Webアプリのリリースまでの学習過程まとめ - katonobo’s blog

 

(Vue.js、Cloud Firestore、Materialize-cssが紹介されていたんですが、当たり前に全部知りませんw)

 

ただ、まあこれでも出来るんですよ。てか僕にとっては十分なので、手元の知識をフル動員して進めようと思っています。

ちなみにこれらは全部、プログラミング始めて最初の1年で覚えたやつですね。だから非常に基本的なやつだし、覚えるのもそんなに難しくありませんでした。

(そう言えばBootstrapだけは初体験です。全く分かっておりませんw)

プログラミングを独学して1年。今日までの勉強方法を書いてみる - ホーリーのプログラミング日記

 

===

 

非常にベーシックな技術ばかりだと思うんですが、順番に紹介していきましょう。

 

HTML&CSS

サイトのフロント部分にあたるHTMLとCSSは「スラスラわかるHTML&CSS」があればOK。

 

スラスラわかるHTML&CSSのきほん 第2版

スラスラわかるHTML&CSSのきほん 第2版

 

 

具体的な書き方はドットインストールを見て学びましたよ。

実践!ウェブサイトを作ろう - ドットインストール

実践!スマートフォンサイトを作ろう - ドットインストール

 

jQuery

フロントエンドの動きをつける部分はjQueryを使う予定です。

これjavaScriptフレームワークですよね?深く理解してないけど、非常に便利。

実践的な使い方が本に書いてあるので、いつもそれを見ながら実装しています。

 

作りながら学ぶjQueryデザインの教科書

作りながら学ぶjQueryデザインの教科書

 

 

基本的なことは「javaScript超入門」で身につけました。基礎中の基礎っていうか。

 

 

Bootstrap

今回はCSSで楽をしたかったので、Bootstrap(ブートストラップ)を採用することにしました。CSSフレームワークの。

 

Bootstrap4ファーストガイド―CSS設計の手間を大幅に削減!

Bootstrap4ファーストガイド―CSS設計の手間を大幅に削減!

 

 

全く使ったことないのですが、これを使えばCSSが楽になると聞いたので、とりあえず触ってみようかと。

ドットインストールにも動画があるんで、多分出来ると思うんですよね。多分w

Bootstrap 4入門 - ドットインストール

 

ただこれ使うと、CSSjQueryの書き方が変わるのかな?分からないんですが、とりあえずやってみる予定です。

 

PHP

メインの言語はこれ。バックエンドって言うのかな?それはPHPで書いていきます。

PHPについては、特に言うことありませんね。「気づけばプロ並みPHP」でアホみたいに書いたので、基本的な部分は問題なしです。

 

気づけばプロ並みPHP~ショッピングカート作りにチャレンジ!

気づけばプロ並みPHP~ショッピングカート作りにチャレンジ!

 

 

MySQL

MySQLは「よくわかるPHPの教科書」を参考にすることが多いです。

気づけばプロ並みでも覚えられるんですが、命令の数が少ないんですよね。紹介されてる。なので基本的にこっちを見ます。

 

よくわかるPHPの教科書 【PHP5.5対応版】

よくわかるPHPの教科書 【PHP5.5対応版】

 

 

===

 

えー、こんなところでしょうか。とりあえずの鬼門はBootstrapですね。触ってみて逆に面倒くさく感じたら、即却下するつもりでいます。

 

あとそうだ。Ajax使いたいんですよ。非同期通信の。

サイト内の「いいね」ボタンを、これで実装したいと思います。

 

こないだドットインストールを見たんで、雰囲気は分かりました。実際に出来るかどうかは不明ですがw

jQuery入門 - ドットインストール

(レッスン16以降がAjaxなんです)

 

こんな感じですね。こんな布陣でWEBサービスを作っていこうと思います。

バックエンドは簡単そうなので、問題はフロントエンドのみです。ここはどれだけ時間がかかるか分かりません。怖いw

「Googleで検索」をサイトに実装してみた

 

銭湯サイトを作るのに「銭湯マップ東京」ってアプリをベンチマークしてるんですけど、 このアプリにこんな機能があるんですよ。Googleで検索っていう。

 

f:id:gevvoihorry:20180626082150j:plain

 

銭湯の詳細画面にある、このボタンを押すと。

 

f:id:gevvoihorry:20180626082230j:plain

 

Googleの検索結果が出てきます。

 

これ便利だなと思ったんですよ。銭湯ってサイト(ホームページ)を持ってないところの方が多いだろうから、こうやってGoogle検索に飛ばす機能があれば便利だなと。

 

ただ、自分の検索力が低すぎるせいか、やり方が分からなかったんですよね。

Google検索 サイト 実装」とかで検索すると、Googleカスタム検索とかしか引っかからなかったんで、やや手こずりました。

普通にURLパラメーターで渡してるのは分かってたので、そのへんを盛り込んだところ、やっと分かりましたよ。

 

 

https://www.google.co.jp/#q=yahoo

 

qのあとに検索したいワードを足せば、それが表示されるんですね。

 

https://www.google.co.jp/#q=yahoo+知恵袋

 

複数のワードで検索する場合は「+」で繋げばOK。

 

このへんの記事を参考にさせていただきました。

Googleの検索順位を取得 | 516.jp

Google検索のパラメータ(URLパラメータ)一覧 - fragment.database.

 

いやー、これ便利そうなんで早々に分かってよかったですよ。検索ワードのところに変数渡してやれば、全然OKですもんね。

それぞれの銭湯のホームページを調べる手間も省けたし、なんか大きく前進した気がしますw

アプリの審査(In Review)が長くなる理由

 

アプリの審査が長いときってあるじゃないですか。Appleに提出して、The status of your app has changed to In Review なんてメールは来たものの、そこからが長いときって。

普通は長くても数時間なんですけど、たまに1日くらいかかることがあるんですよね。

僕は今日まで100回以上提出したことあると思いますけど、3〜4回はそんなことがありました。異様に審査が長いときが。

 

んで、これの理由ってみんな知りたいじゃないですか。なんでいつも以上に時間がかかるのかってことが。

 

まあ非常に単純な理由なんですよ。

 

審査員があなたのアプリに夢中になってるからなんです

 

あなたが作ったアプリが、もう楽しくてしょうがないんでしょうね。自分の仕事も忘れて熱中しちゃってるんですよ。

だから審査が長いときでも、余計な心配はせずにドンと構えておきましょう。

 

僕がその筋から仕入れた情報によれば、審査が長くなるアプリっていうのは、Appleからフィーチャーされやすいらしいですよ。

なんせ審査員がそれだけ夢中になってるわけですからね。自ずとその流れでしょう。

 

逆にチャンスなんですよ。審査が長いときっていうのは。

 

P.S.

このままで終わっちゃいかんと思い追記するんですけど、審査長いときってありますよね。あれ本当は何でなんですかね?

僕は今日まで数回ありましたけど、なんなら全部通ってたと思います。長い審査時間を経て、結果リジェクトされた覚えはありません。だから、特別心配することは何もないんじゃないかと思います。

まあ、パーティーかなんかしてるんでしょう。仕事やめて。アメリカ人はパーティー好きですからw

ニートの野望

 

中学生の頃に「信長の野望」とか「三国志」にハマったんですよ。PCゲームの。

親にパソコンを買ってもらったんですが、それで何をしてたかと言えば、この2つのみでした。

 

んで、最近になって久しぶりにやりたいなと思ったんですが、さすがにパソコンやらゲーム機やらでやる時間はない。

そんなわけでアプリを検索したら、ちょうどいいのがあったんです。それがこれ。大三国志ですね。

 

大三国志

大三国志

  • WINKING DIGITAL ENTERTAINMENT LIMITED
  • ゲーム
  • 無料

 

これKOEIのゲームじゃないんですが、めっちゃよく出来ててボリュームがある感じなんですよ。ほんとすごい。

 

でもスマホでやるには、ちょっとボリュームありすぎるし、システムも複雑すぎると感じました。

ようは自分が隙間時間にちょこちょこイジる程度の使い方なんで、それには見合ってないゲームだと思ったんです。

めっちゃいいゲームなんだけど、もう少しシンプルなのがやりたいって思ったわけですね。

 

誰かに伝わるか分からないんですけど、スペクトラルフォースくらいのがいいんですよ。

同じような国取りゲームでも、信長&三国志のようなボリュームでなくスペクトラルフォースくらいのゲームがスマホにはあってるでしょう。

 

(スペクトラルフォース知らない方には、この動画が参考になるはず)

 

んで、やっぱ自分で作ろうって考えるわけですよ。スペクトラルフォース風のゲームを自分で作れんだろかと。

 

しかしやっぱあれですね。行き着くところのコンテンツはニートになってしまう。

ニートの野望みたいな、「ぐんまのやぼう」の超劣化版しか構想に出てこないですよw

 

んー、もう少しあとになると思うんですが、これ作りたいな。スペクトラルフォースくらいの国取りシミュレーションゲーム

 

P.S.

ニートの親友にこの話をしたら、こんなブラウザゲームを教えてもらいました。激突要塞。

すずぬーと - ゲーム - 激突要塞!

 

f:id:gevvoihorry:20180624063238p:plain

 

この戦闘システム素敵なんですよね。こんな感じで陣営がぶつかるゲームって、面白いと思います。