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

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

個人アプリ開発者。プログラミング歴3年。独学。現在の総ダウンロード数:14万

ajax trax

 

銭湯サイトにいいねボタンを実装してみました。お気に入りボタンて言えばいいのかな?それです。

 

 

生まれて初めてAjaxなるものを使ってみましたよ。非同期通信の。

画面遷移することなく、データベースに接続して、そこでデータを引き渡してます。

 

プログラミングを初めて3年目にして初めて非同期通信をしてみたんですが、これすごいですね。なんと言ったらいいのか分かりませんが、とにかくすごいですw

 

それで気付きましたよ。世の中は非同期通信に溢れてると。

あれも非同期、これも非同期。

 

もう全部非同期じゃないですか

 

(多分間違ってる)

 

ドットインストールのこのあたりを見ながら実装してみたんですが、これ非常に分かりやすいですね。

https://dotinstall.com/lessons/basic_jquery_v2/25216

 

非同期通信とは何かってところも、ちゃんと解説してくれてます。

https://dotinstall.com/lessons/basic_jquery_v2/25218

 

「処理が終わる前に次の処理に移る」という意味だと今のところは思っておいてください。

 

Twitterのいいねボタンみたいにしたくて、それをするためにはAjaxなんだろなと思ってたんですが、無事に出来てよかったです。

 

さっき貼り付けたインスタのそれは、まだまだ世を忍ぶ仮の姿なんですが、ここからUIを整えていけば、結構いい感じになるんじゃないかと思います。

 

今回サイトを作るにあたって、やってことなかったのはTwitter連携とAjaxだったんですが、両方とも出来ましたよ。意外とw

あとはブートストラップを採用するかどうかくらいしかないので、ここから一気に作っていこうと思います。

 

久しぶりにやるとWEBも結構楽しいですね。新しいことが出来るようになると、もう何でも楽しい。

アウトプットが全てである

 

ワールドカップに夢中になってたら、自分のやりたいことが全然進んでないと気付きました。

今は銭湯サイトなんですけどね。これを作りたいんですが、どうしてもサッカーを見てしまいます。

元々朝型で、なんなら朝に全てを賭けるような生活をしてるんですが、その時間にサッカーがあるんですよね。んでどうしても見ちゃう。てかなんなら本腰を入れて観戦してしまいます。

 

えー、そんなこんなで、ここ半月ほどやりたいことが思うように進んでおりませんw

 

非常に当たり前の話なんですけど、個人で何かを作ってる場合、自分が手を動かさないと1ミリも進まないんですよね。

 

今さらながら実際に行動することの大切さを痛感しています。

 

===

 

何でもそうなんですが、口で言うのは簡単なんですよね。「こんなサービスがあったら流行ると思う」とか「こんなアプリを作ればヒットする」みたいな。

そうやって言うのは簡単で、口だけのハッタリ野郎も多いんですが、やっぱ1にも2にも行動なんですよね。実際に手を動かしてリリースするのが大事。

 

人間誰でも、自分をよく見せたい気持ちがあるから、見栄を張っちゃうんですよね。俺はこんなすごいことを考えてるんだ、こんなアイディアがあるんだぞって言っちゃうんですよ。

みんながみんなそうとは言いませんけど、少なくとも僕にはありますよ。見栄を張っちゃうときが。

 

仲間と酒を飲んだときに言うわけですよ。今の俺はこんなことを考えてる、こんな未来を見てるんだって。

そんな自分語りをしながら、これでもかってくらいにビールを飲むんですが、やっぱ翌日後悔するんですよね。

なんであんなこと言っちゃったんだろう。行動が全然ともなってないのに、偉そうなこと言っちゃったな、俺カッコ悪いなって。

 

結局のところ、その人を測ろうと思ったら、行動を見るしかないわけですよ。アウトプットを。

口でどれだけ偉そうなことを言っていても、アウトプットがしょぼかったら、その人はしょぼいわけです。

「何を言ったか」よりも「何をやったか」でしょう。

 

そういう意味で言えば、ここ半月の僕はあれです。

 

サッカー観てビール飲んでるだけ

 

ブログではあれこれ言ってますけど、ロクなアウトプットをしておりませんw

 

ワールドカップが終わったら本気出そうと思います。

俺の銭湯2トップ

 

前回の続きってことで、僕のおすすめ銭湯を紹介したいと思います。

銭湯への目覚め - ホーリーのプログラミング日記

 

2軒あるんですが、これどちらも自分が実際に通ってる銭湯ですね。久松湯と萩の湯。

両方とも東京にある銭湯で、もうめっちゃ綺麗なんですよ。それでいて料金は460円。ほんと最高です。

 

えー、ちょっと順番に紹介していきましょう。

 

久松湯

練馬区桜台にある銭湯、久松湯。これは前回も書いた銭湯ですね。僕が一番通ってるのもここ。

 

f:id:gevvoihorry:20180701200843p:plain

 

hisamatsuyu.jp

 

とんでもなく綺麗だし、外観もまるで美術館のような銭湯なんですが、ここは温泉が湧いてるんですよ。露天風呂は温泉になっています。

この温泉が相当濃いんですよね。「長湯のしすぎに気を付けてください」なんて書いてるほど、濃い温泉なんです。

  

ただ、僕が大好きなのは、やっぱ水風呂なんですよね。久松湯の水風呂は水温が低くてヤバイですよ。めっちゃ整う。

16.6〜16.8度くらいですかね。結構冷たい部類に入ると思います。

それでいて水深もしっかりあるんで、ほんと整うんですよ。体に水が染み込んでくるのが分かりますw

 

もちろんサウナもありますし、ここはバスタオルの交換もマメなので、居心地いいですよ。

 

唯一の難点はヤクザもいるってことですかね。ゴリゴリに入れ墨入れたおっさんもいたりするので、ここだけデメリットだと思います。あとは無し。最高の銭湯です。

 

久松湯の横にコインパーキングがあるんですけど、前はここが安かったんですよ。30分100円かな。

だから車で来る価値ありって言ってたんですけど、最近になって60分300円になっちゃったんですよ。だから車で来る価値ありとは言えなくなっちゃいましたw

 

それでも誰かを温泉に誘って、それでサプライズで来るものいいと思います。

平日の夕方に言うわけですよ。「温泉行こうぜ」って。

それで久松湯きたら、みんな満足すると思いますよ。ほんとに温泉だし、ありえないくらい綺麗ですから。

 

えー、そんなわけで、おすすめ銭湯の1つは久松湯です。

僕は15〜17時くらいに出没することが多いですね。

 

「昼のセント酒」っていう、ダメなサラリーマンが昼間から銭湯入ってビール飲むだけのドラマにも、久松湯が出てるんですよ。

気になる方は、是非チェックしてみてください。第7話ですね。

 

 

萩の湯

萩の湯は鶯谷に出来た半端ない銭湯ですね。 銭湯の域を遥かに超えてるんで、これ行った人はみんな思いますよ。スーパー銭湯の存在意義が分からなくなったって。

 

f:id:gevvoihorry:20180703055049p:plain

 

haginoyu.jp

 

萩の湯はビルの1階から4階まで入ってるんですよ。それで3階と4階が風呂になっています。2階は受付。1階はエントランスですね。

もうなにがすごいって、まずめっちゃ広い。4フロアを独占する形なんで、当然のごとく広いんですよ。

風呂はもちろんそうだし、2階にある休憩所&食堂も広いです。

 

だから、うちは家族で行くことも多いですね。週末はかなり混むんですけど、広いからそこまで気になりません。

何度も言いますけど、マジで広い。んで綺麗。風呂の種類も多いんで、もう最強としか言えないです。

スーパー銭湯よりもクオリティの高い銭湯が460円である、って言えばいいのかな?そういう感じです。

 

ここが出来てから1年ちょいだと思うんですけど、こないだ早くもリニューアルされたんですよ。細かいところが。

それまでの萩の湯は水風呂の水深が浅いのが難点だったんです。他の人は知りませんけど、整いを求めてる僕にとっては、ここが不満でした。

そしたらあれですよ。このリニューアルで見事に改修されてましたからね。水深がキッチリ深くなってました。

 

このスピード感も萩の湯ならではだなって思うんですよね。ユーザー目線が半端じゃない。細かいところに目が行き届いてるなと感じます。

 

萩の湯は朝6時から営業してるんで、僕は朝に出没することが多いですね。6時半前後でしょうか。

朝はサウナが無料なんですよ。なので、そんな時間からアホみたいに入ってます。

 

6〜9時まで朝湯って形で営業して、それで2時間閉めて、また11時から営業するって感じだったかな?

とにかく朝湯は最高なんで、是非来ましょう。僕は車で30分かけてきてますよ。最低でも週に1回はw

 

最後に

僕がおすすめする銭湯を2つ紹介してみました。東京は他にも良い銭湯が沢山あると思うんですが、とりあえず自分が通ってるのは、この2軒ですね。久松湯と萩の湯。

萩の湯に関して言えば、恐らくここが東京最強の銭湯だと思います。銭湯っていう形で、これを超える施設はないんじゃないかと。

 

ただ、整いっていう1点で言えば、僕は久松湯が最高だと思っています。

上質なサウナとキンキンの水風呂。このコンボはヤバイですよ。もちろん萩の湯より上だし、東京でも指折りの環境でしょう。

より深い整いを求めたときは、久松湯にくるといいですよ。

 

僕もまだまだ知らない銭湯が沢山あるんで、サイトをリリースする前にでも、あちこち回ってみたいと思います。

高円寺の小杉湯とか、表参道の清水湯。同名ですけど、武蔵小山の清水湯もいいですね。

とにかく銭湯は最高だし、行くと気持ちが前向きになれるので、あちこち散策してみたいと思います。

 

行ったことないけど、最近の綺麗な銭湯には興味がある。そんな人は今夜行きましょうw

銭湯への目覚め

 

僕は銭湯が好きなんで、いつかこのブログで大好きな銭湯について書こうと思ってたんですけど、プログラミングに全く関係ないんで避けてたんですよ。

でも、今まさに銭湯サイトを作ってるので、自分の銭湯愛について書いてみようと思います。

 

そもそもの話で、僕は風呂が嫌いなんですよ。これは今もそうですね。「うおお!!風呂だ!!風呂に入りてぇ!!」って思ったことは、人生でもそんなにないんじゃないですかね。露骨に汗をかいて、それを洗い流したいって思ったとき以外は。

んで、当然のことながら、その流れで銭湯にも興味がなかったんですよ。

湯船に長く入っていることが出来ないんで、銭湯はもちろん、温泉にもそんなに興味がありませんでした。

(家の風呂(湯船)は1分くらいしか入りません。これは今もそうw)

 

んで、これが変わったキッカケは2つあって、その2つが同時にやってきたから銭湯にハマりました。

1つはアメトークの銭湯芸人の回。これを見て、最近は綺麗な銭湯があるってことを知ったんですよ。銭湯と言えば古臭いイメージしかなくて「ザ・風呂の代役」だと思ってたんですが、あえて足を運びたいくらい魅力的な銭湯があることを知りました。

銭湯大好き芸人|アメトーーク!|テレビ朝日

 

銭湯芸人の動画を紹介したいんですけど、違法サイトのそれになりそうなんで、あえてリンクは張りません。興味のある方はぜひググってみてくださいw

 

んでもう1つはヨッピーさんの交互浴の記事を見たからです。

東京都内のおすすめ銭湯&交互浴を銭湯神ヨッピーが伝授! | SPOT

銭湯神ヨッピーが語る!見ると銭湯に行きたくなる最高の入浴法(2/3) - オモトピア

 

このときに「交互浴」っていう入浴法を知ったんですよ。熱い風呂(ないしサウナ)と水風呂を交互に入るって入浴法を。

 

アメトークを見て銭湯に興味を持ったのと同時にこれを知ったんで、家に近所の風呂でそれを試してみようと思ったんです。

ちょうどアメトークでも紹介されてた「久松湯」っていう、半端なく綺麗な銭湯がチャリ圏内にあったんで、そこに行ってみました。

練馬区桜台の天然温泉 久松湯

 

f:id:gevvoihorry:20180701200843p:plain

 

これホームページを見てもらえれば分かるんですけど、もうめっちゃ綺麗なんですよ。

普通、サイトの画像は盛ってると思うじゃないですか。でもそんなことはなくて、マジこのまんま。銭湯の域を遥かに超えた銭湯なんです。久松湯は。露天風呂は温泉だし。

 

それでここで交互浴ってやつをやってみたんですよ。人生で初めての。

 

熱い風呂に4〜5分。水風呂に1〜2分。これを交互に3セットくらいやったら、あれがきたんです。

 

整い(ととのい)が

 

整いっていうのは、ディープリラックスって言えばいいのかな?もうね、体中を何かが走るんですよ。覚醒するような何かがw

詳しくはさっきの記事を見てもらったほうがいいかもしれません。ここで書こうとすると無駄に長くなりようなんで、ヨッピーさんの記事を参考にしてももらえると幸いです。

東京都内のおすすめ銭湯&交互浴を銭湯神ヨッピーが伝授! | SPOT

 

もくしはこの漫画が最高ですね。サ道が。

 

マンガ サ道?マンガで読むサウナ道?(1) (モーニングコミックス)

マンガ サ道?マンガで読むサウナ道?(1) (モーニングコミックス)

 

 

ようは交互浴をしてると、体の疲れが取れて、気持ちも安らぐってことですね。

これすごくいいんですよ。寝付きもすごく良くなるし。

 

僕は酒を浴びるほど飲まないと寝れない体質っていうか、そういう悪しき生活習慣をずっと持ってたんですが、銭湯に通い出してからはなくなりました。

最低でも週の半分は銭湯に行くんですが、行った日は眠りの深さが違います。深夜に起きちゃうこともないし、本当によく眠れるんですよね。もちろん酒に頼らずに。

 

気持ちいい&ぐっすり眠れるってことで、僕は銭湯にハマったんです。

 

また、さっきも書きましたけど、最近はものすごく綺麗な銭湯が多い。

それでも銭湯なんで、料金は460円なんですよ。住んでる地域によって微妙に変わるのかもしれませんが、おおむねこの価格帯でしょう。

 

460円でめちゃくちゃ気持ちよくなれて、健康な睡眠が取れるって、すごくないですか?

 

交互浴を知ったことと、たまたま近所に久松湯があったことによって、僕の銭湯ライフは始まったんです。

 

今は当たり前のように通いますし、なんなら朝の6時に銭湯に行くこともあります。

極端な例えですけど「酒と銭湯どっちやめる?」って言われたら、そうとう悩みますね。そのくらい銭湯が好きです。

 

今どきの綺麗な銭湯は、もう風呂の代役じゃないんですよね。銭湯2.0って言えばいいのかな?家に風呂があっても、あえて足を運ぶ価値があるんですよ。

もちろん、昔ながらの銭湯にもそれがあるとは言いません。僕も綺麗な銭湯しか行かないですし。

 

でも、アメトークで紹介されてるような銭湯とか、ヨッピーさんの記事で紹介されてる銭湯は全部いいですよ。

マジで1回でいいから行ってもらいたいですね。それで整いを経験していただきたいw

 

とにかく銭湯はいい。銭湯にあって家庭の風呂にないものは水風呂なんですが、これが銭湯の魅力ですね。つまり交互浴が。

 

えー、本当は自分のおすすめ銭湯の紹介までしようと思ってたんですが、長くなったので続きは次回にしようと思います。

 

P.S.

心臓の弱い方とか、高血圧の方にとっては、交互浴は体に負担がかかる入浴法になるので、避けたほうがいいのかもしれません。

それでも銭湯はいいですよ。今どきの綺麗な銭湯は本当にいい。心と体が安らぎます。

ページングに悩む

 

ページングって言うのかな?一覧表示するページの下に、数字を振るのって面倒くさくないですか?

 

f:id:gevvoihorry:20180630061652j:plain

 

みんな大好きGoogleの下にもあるこれですよ。今のページ数が分かって、なおかつ数字を押すと画面遷移するやつ。

 

前に自分でも作ったことがあるんですよ。

 

f:id:gevvoihorry:20180630061833p:plain

 

こんな風に。

 

ただこれ、めっちゃ面倒くさくないですか?

例えば全部で10ページあるときで、自分の選んだ数字が8とかならいいんですよ。

常に真ん中の数字だけCSSを変えておけばいいから。

 

ただそれが1とか2、ないし9、10になると真ん中の数字じゃなくて、端の数字を変えなきゃいけないじゃないですか。

 

f:id:gevvoihorry:20180630062217p:plain

 

こんな風に。

(このときは今いるページから2ページ足すところまでしか表示しない仕様だったのかも。ほんとなら5ページまで出てていいですもんね)

 

なんかこういうこと考えてると、ページング(名称あってる?)ってやつは、めちゃくちゃ面倒くさいんですよね。色々と処理する項目が多くて。

 

ググったらページングはフレームワークに頼るのが手っ取り早いって書いてあったんですけど、それが一般的なんでしょうか?

一覧画面のページングについていろいろ考えた

 

一覧画面のページング処理はフレームワークに頼ってしまうのが手取り早いですが、内部の実装がDBと相性が悪かったりするとパフォーマンスが悪くなることがあります。
ページング処理について考察したことをまとめてみました。

 

実装が面倒くさかったので、とりあえず適当に仕上げてるのが現状です。

 

f:id:gevvoihorry:20180630062951p:plain

 

「次へボタン」と「前へボタン」を表示して、ページ数は2/3みたいに表しています。

「2」が今いるページで、「3」が全部のページ数ですね。

 

まともなページングを今後するのか決めてないですけど、ちょっとしたサイトなら、こんなので十分だと思うんですよ。使い勝手もそこまで悪くないし。

 

ちゃんとしてるに越したことはないんですけど、とりあえずはザックリです。

【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

 

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