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

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

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

銭湯追加画面

 

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

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

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

 

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

XAMPPの時刻設定が出来ずに苦戦した話

 

PHPのローカル開発環境にXAMPPを使ってるんですけど、これの時刻ってヨーロッパになってるんですよね。ヨーロッパ合わせっていうか。

んで、これを日本時間に変えてみました。別に深い理由があったわけじゃないんですけど、ドットインストールで「ローカル開発環境の時間を合わせておいた方がいい」って言われた回があったんで。

 

やり方は非常に簡単でした。php.iniのdate.timezoneを編集するだけ。

XAMPPのPHPの時刻合わせ | mawatari.jp

 

XAMPPインストール直後のPHPは、タイムゾーンがEurope/Berlinで登録されているため、日本時間からマイナス8時間ずれた状態になっています。php.iniのdate.timezoneを編集し、時刻合わせを行いましょう。

 

C直下にXAMPPをインストールしている場合のphp.iniのパスは、 C:¥xampp¥php¥php.iniです。バージョンや環境によって違いはありますが、1044行目あたりにある date.timezoneを以下の通りに修正しましょう。

 

ただ、この記事に書いてあった通りにしたのに、なんでだか変更されなかったんですよ。

 

んで他の記事もググること15分。やっぱり間違いはない。この方法であってる。

 

むーん、なんでじゃろ?って思ってたんですが、これあれなんですね。

 

 Apacheを再起動すればOK

 

f:id:gevvoihorry:20180624045812p:plain

 

Runningなってるこれを一旦Stopさせて、それでまたRunningさせればOK。万事解決でした。

 

普通は一瞬で気付くことなんでしょうけど、僕みたいに鈍くさいやつが全国には3人いると思うので、ここに書き残しておきます。 

そのくらいは朝飯前である

 

Twitterログインを何とか無事に実装することが出来ました。

 

f:id:gevvoihorry:20180622190308p:plain

 

こんな感じのボタンを用意して。

 

f:id:gevvoihorry:20180622190343p:plain

 

押すとこんな画面が出てきて。

 

f:id:gevvoihorry:20180622190429p:plain

 

無事にログイン。ユーザー名とスクリーンネームっていうのかな?それが取れました。

 

もちろん他にも沢山取れたんですけど、多すぎて何がどうなってるのか分かりません。多分明日には分かるはずw

(アクセストークンてやつは大事そうですね)

 

んであれですよ。こないだも書いたんですが、ドットインストールで勉強してたんです。動画学習サイトの。

ドットインストール>>https://dotinstall.com/

Twitterログイン>>https://dotinstall.com/lessons/tw_connect_php_v3

【PHP】Twitterログインに苦戦する梅雨の日 - ホーリーのプログラミング日記

 

ただ、案の定挫折しました。途中で「ちょっと難しくないか、これ?」って思いが芽生えてたんですが、どうやらその通りだったみたいです。

 

 

このときは「ちょっとだけ高度」くらいに思ってたんですけど、ここからレッスンが進むにつれ、ついていけなくなりましたw

  

んで、あれです。最終的にはこちらの記事を参考にして実装したんですよ。

【PHP】新TwitterOAuthでログイン機能を実装する

 

やっぱプログラミングの道は1つじゃないですね。最初に選択した道が難しくても、他の道を選んだら出来たりする。

 

ドットインストールに挫折するくらいは朝飯前だぞ

 

同じような同志が全国に何人いるのか知りませんが、声を大にしてそう伝えたいと思います。

 

P.S.

他にも参考になった記事があるので、メモがてら残しておこうと思います。

 

TwitterOAuthでログイン認証をおこなう[OAuth][PHP]

(アクセストークン大事らしい)

 

【PHP】Twitter 自分のツイートを取得する | 大-はなまるの絵日記ブログ

(これやったらツイートの一覧表示出来た)

 

[Php] Twitter API 1.1でユーザー画像を取得する方法は? | CODE Q&A [日本語]

(画像はこんな感じで取得してもいいんだろか) 

 

Twitter Rest APIでアイコン画像をサイズ別に取得する方法

(画像の取得はこっちが王道っぽい。profile_image_url_httpsを取得して)