20200329-2

関連記事

2019.09.05
そろそろ作ってくれって言われたから…

名 刺 例の件(?)で、名刺がほしいとか言い出したのでぼくで作ることにしました。Photoshopもほしいなと考えてたのでついでってことで。 デザイナーでもなければ絵が描けるわけでもないので、とりあえずなんか適当に世の中に溢れてる名刺を見て考えました。 世の中のデザイナーはどうやって名刺を考えてるのかわからんけど、とりあえずこんな感じで作ってもらうことに。名刺ってPSDファイルを印刷屋に渡せば作ってくれるよね? 裏面も一応作りましたが、どうなんでしょうね。値段変わったりするんかな。 着々と事業計画的なものが出来上がってきていますが、果たしてお仕事は貰えるのかどうかという疑問。ぼく的には、WEB知識0の状態で営業行ってもお仕事貰えないような気がするんですけどね。せめて教本とか読んだほうがいいんだろうなー。 かといってぼくが矢面に立ちたいとは思わないです。とはいえ、流石に打ち合わせとかになったら行く必要が出てくるかもしれません。その辺は本業である程度やってるから多分大丈夫だとは思うんですけど。デスノートのLみたいに顔出しNGでSkypeとかSlackだけで完結できませんか?できませんかそうですか。 なんかもう来る所まで来てしまったような気がするので、あとは流れに身を任せ静観するつもりです。多分なんとかなるでしょ。 それでは今日はここらでサヨウナラー

2019.10.01
より良い感じにM3のサークルチェックをするために

場合によっては犯罪行為です M3の季節がやってきました。もうカタログも販売されてるんですが、皆さんはまだ買ってないんですか?遅れてますよ。 1ヶ月を過ぎたということで、そろそろ本格的にサークルチェックをはじめようかと思ったのですが…。 めっちゃめんどい!!! これまで通りでいくと、 ①カタログ買ってパーッと流し見②公式のサークルリストで1件ずつ全サークルをチェック③公式ページにMAPのPDFファイルがあるのでそれを落として画像処理④サークルリストをWordPressに記述⑤当日が楽しみ!!!!!! という何フェーズあるんだよ、という動作を踏む必要があります。これがもう大変面倒。何が面倒って、どこまでサークルチェックしたか忘れてしまって同じページを見始めるのが面倒。 ということで、スクレイピングを上手く活用してみることにしました。(※公式で禁止されている場合もあり、つーか使いようによっては普通に犯罪行為)(スクレイピングで過去にひと悶着あったような件もあるため注意が必要) まあルールを守って楽しくスクレイピングってことで。 今回の案 簡単に説明すると上記みたいな感じにして、もっと簡単にサークルチェックをできるようにしようぜ!ってことです。 使う技術は超絶簡単で、PHPで一回スクレイピングで取ってきたのを上手く整形してHTMLに書き出して、Storageで上手く管理するっていうだけの話。 スクレイピングする理由は、サークル数が膨大すぎて手作業でひとつひとつ持ってくるのは手間すぎてアホらしいっていうことです。なのでクロールして更新情報をどうのとかそういうことはしません。一回バッと引っ張ったらもうスクレイピングはする理由がないので、後はもう良い感じにStorage管理するだけです。 実装したいコンテンツのメインは、チェック機能です。要は「このサークルはもうチェック済みだよ」ってことをチェックボックスで管理します。それと、各サークルが登録してある自分のHPやTwitterなども情報として載せてありますので、それを引っ張ってきてひとまとめにします。現状、公式HPではホバーすることで見える要素となってるので、余計に「読んだかどうか」がわかりづらいということで実装します。 主な実装内容はその2つです。ですので、余計なことは何もしないということからおそらくなにかしらに引っかかるようなことはないと思います。Storage管理なので読んだかどうかなどの情報はユーザーが今見てるブラウザに溜まる関係上、会員システムとかを作る必要もなし。つまり作るのは非常に簡単(なはず)です。 昨日から作り始めてるので、多分今週中ぐらいにはできると思います。できるといいな。 今年もサークルリストをまとめて公開するのでよろしくお願いします。 それでは今日はここらでサヨウナラー

デフォルト画像
2019.04.18
iosで「特定の要素の外をクリックしたらポップアップを閉じる」を適用する

stopPropagation() 最近よく要求されて、なおかつよく忘れるのでメモとして残します。 ついでに頭に残すために記述してます。 See the Pen stopPropagation by 【LIGHT WINGER】 saiko (@saikofall-the-typescripter) on CodePen. 仕様としては下記の通り 1.ボタンを押すとメニューが右から出現する(この時背景にはbeforeで黒を敷く) 2.documentをタップするとメニューが閉じる(背景の黒くなっている部分) というだけのもので、重要なのが二番目の黒背景タップ、クリックで閉じること。 それと同時に、wrapの中身をタップしても閉じないこと。 ここで利用するのがstopPropagationで、親への伝播を止めることができます。 これがない場合、「ボタンをタップするとメニューが開く」と「documentをタップするとメニューが閉じる」が同時に動きます。 タイミングの問題で、後者が最後に発動するので、メニューが開きません。 なのでボタンタップ時にdocumentのjsが動かないようにstopPropagationで伝播を止めて、閉じないようにします。 これが今回の備忘録全貌です。 iosにおける処理 問題点:iosだと二番目の処理である「documentタップで閉じる」が動かない PCは動く、Androidは知らん。 で、まずは解決記事。 https://qiita.com/myzkyy/items/ce6a26c9c59612e6f515 技術的な方法も含め上記の記事に書いてあるのでその辺は全部読んでください。 それでこれを読んで、今回使った解決法。 解決:touchstart または touchend を使う これで解決しました。 記事でも書いてありますが、clickイベントとtouchstartイベントで処理が違うので挙動が変わります。 まあ多分問題ない範囲ではあります。 記事内でも「該当要素にcursor: pointerを付ける」があります。 ただ今回の場合、該当要素がbeforeで疑似要素なので使いませんでした。 試してないけど効かなそうだし、そもそもtouchstart効いたし。 終わり というわけで、これでちゃんと動きましたとさ。 次回動かないことがあったらこれ見ます。 それでは今日はここらでサヨウナラー