サークルチェックサポート完成したので、早速使いはじめた

完成しました

前回の日記で話題に出したM3サークルチェックサポーターですが、完成しました。

これ
https://saikofall.com/m3list/

最終的な機能としては以下。

1.色メモ
多分メイン機能。
サークルカード内にマウスを持っていくと左上に☆マークのなにかが出現。
クリックすると色メモ画面が表示されるので、クリックすると色メモできます。

2.色メモ絞り込み
ページ一番上の「色で絞り込み」からそれぞれの色のメモを絞り込んで表示。
正直なんで動いてるのか理解してないので多分何かしらバグがある。

3.リンクの既読
リンクをクリックすると、リンクアイコンの上にチェックマークが出現。
そのサークルの全リンクがチェック済になるとサークルカードの右上に済マークが出現。
ちなみに、チェックマークにマウスを当てるとバツボタンが出現、クリックすると既読を未読状態に戻せる。

これだけです。
20時間ぐらいかかった気がします(体感)。
もうちょいかからないと思ったんですけど…。
いや、ひとつ機能拡充するだけであんな頭おかしくなるくらいぐちゃぐちゃになるとは思ってなかったので…。

使ってみた

思ったよりもちゃんとできてるって感じです。
とりあえず元々予定してた機能は実装できたので十分満足!
個人用なのでバグがあっても気にしないスタイルではありますが、使ってみるとバグが怖くなってきますね。
これもし後半まで行ってダメになったら絶望感が半端ないことになりそうです。

万が一ですが、使ってる人がいたら必ず途中で別途外に保存しましょうね。
メモ帳でもなんでもいいんで。
どうなっても知らないぞ☆

ちなみにですが、今回ので使ってる技術で「webStorage」というものがあります。
これは主に「リンクをクリックした」とか「色が付いた」とかの情報を保存するのに使っています。
これらの情報はテキスト情報としてまとめているのですが、もしそのサイズが5MBを超えるとそれ以上はエラーが出て保存ができなくなると思います。
つまりそれ以上色メモを付けたりすることができなくなります(多分)。
保存してる情報は極小さいテキスト情報なのでそうそうそんなことになるとは思いませんが、ありえない話ではないので注意しましょう。

本来はこういうのはPHPとかで管理するとか、jsonでサーバーに保存するとかしないといけないとは思うんですがね…。
まあ今回は全部クライアント側で完結させたかったのでこういう実装になっています。
要はあなたのパソコンが壊れたり、不可思議なエラーが出ると全部吹っ飛ぶので気をつけてねって話です。

ぼくもある程度まで行ったらどっかに別途保存する予定です。
初使用するwebシステム(システム?)なので念の為というのが一番大事です。
やっぱこえーなー、結構便利に使えてるけどこえーなー。

とりあえず今回はこれで完成ということで、システムに手を加えることはないと思います。
次の構想とか練ってるから、M3終わったら色々頑張るゾイ。

それでは今日はここらでサヨウナラー

関連記事

デフォルト画像
2018.09.06
魔法のカードを手に入れた!

吉野家定期券入手 吉野家魔法のカードを手に入れました。 なんと魔法の80円引き券でございます。 前回は3ヶ月ぐらい前に販売されてた気がするんですけど、その時は入手しなかったんですよね。 気づかなかったし、気づいたときにはもう残り数日でしたし。 この券の概要としては、先月の終わりから販売されている80円引き券になります。 その期間なんと9月10日から10月21日まで! その間、 吉野家一品80円引き ガスト100円引き はなまるうどん天ぷら一品無料 という素敵特典が与えられる券ですぞ。 今吉野家に行くとめちゃくちゃ大々的に宣伝してる印象があります。 外から内まで「定期券!定期券!定期券!」って感じでした。 ぼくは基本的に昼飯を適当に外食してるんですが、これで暫くは吉野家になりそうです。 今回からはガストまで追加されちゃいますし、最高か? しかも100円引きとかずるいっすわほんまにもう。 なんだかんだで肉の柔らかさとか味とか全部松屋以上なんですよね、吉野家って。 それなのに松屋320円、吉野家300円ってお前もうそれはもう…。 そういうことじゃないですか! 松屋の強みは現状味噌汁が付いてくるってこととたまにやる特別メニューに当たりがあるってことぐらいですかね。 あ、カレーも美味しいと思います(こなみ)。 そろそろ使用期間開始ですし、皆も買おうぜ! 誰か吉野家行こうぜ! それでは今日はここらでサヨウナラー

デフォルト画像
2018.08.22
ムームードメインのデザインがリニューアルしてた

中途半端すぎない? 気づいたらムームードメインのデザインが変化していました。 どうやら今月の20日にイメチェンが完了した模様。 トップページとかを見てみると、なるほど今風なデザインになっています。 が、ものっそい中途半端。 具体的に言うと「80%リデザイン、20%そのまま」って感じのデザイン。 中途半端さの理由 サラーっと目を通すと、フラットデザイン的な緑をベースカラーとして、細かい部分で青を使ってるといったところでしょうか? 要素と要素の間に大きくマージンを取ってる辺りも、今風な雰囲気を感じます。 しかし問題は中に入ってから。 前までのままで、要素をそのまま使ってる箇所が大量にあるんですよね。 例えばここ。 https://muumuu-domain.com/?mode=bulk 「一括取得の流れ」とかをそのまま引っ張ってきちゃってる。 ドメイン移管の説明ページとかも恐らく前までのものを利用しています。 特に酷いのはコントロールパネル。 リデザインするならここがメインじゃろがい!と思ってしまいますが、一切変化なし。 背景取っ払ってヘッダーとフッターを差し替えてるだけです。 これの何が問題かと言えば、全体的にフラットな雰囲気で作成してる中にweb2.0時代のボタンとかが混ざってしまっているのが問題ですかね。 デザインとしてごちゃまぜになってて統一感が失われてるんですよ。 GMOという大企業が、この中途半端なデザインで「リニューアルしました!」とお知らせしてる辺り中々にキテるなと思います。 どうしてこうなった?どうしてこうなった!? なんででしょうね。 普通に考えたら ①デザインが納期に間に合わなかった ②コーディングが公表までに間に合わなかった ③最初からこのつもりだった ③は論外だと思いたいところ。 webの商売でこれとか面白い冗談言うね君って感じです。 ①②は…よくないけどまあしゃあねえな! 大方外注する費用(もしくは時間)がなくて内製してたけど限界があったからそのままにした感じでしょうか。 まあムームー的にはロゴの新調がメインで、そのロゴに合ったデザインがある程度できてれば良いという考えだったんでしょうかねえ? よくわかりませんけど、見た目が余計にダサいのでなんとかしてくれませんかね。 お名前.comだってあんな(使いづらいシステムに)変化を遂げたんですから。 ぼくがクライアントなら普通にブチギレ案件ですけど内製でしょうし問題ないんでしょう。 多分そのうち内側も全部変えるんでしょ? 知らんけど。 それでは今日はここらでサヨウナラー

デフォルト画像
2017.07.15
今日のハマりごと、lity.jsと右クリック禁止

自分の力での解決は不可能でした 今週はハマりごとが大量にありましたけど、クソ面倒だったのは多分今日。 動画周りのお話です。 備忘録代わりに書きますが、詳細な技術面の話は一切しません。 自分で理解できてないことが多いし、再現しろと言われてもできないからです。 HTML5からなのかは知識不足で知らないけど、videoタグがありますよね。 直接mp4とかの動画を埋め込んでくれる便利なやつです。 その辺で大分やられました、主に5時間ほど。 今日やろうとしたのは、動画の埋め込み。 やったこととハマったことは以下の通り。 ・動画を埋め込む、埋め込みにはLity.jsを使う Lity採用理由:colorboxがクソダサだからもっとシンプルなやつっていう指示 ・Chromeはvideoタグにダウンロードボタンが付いたのでそれを削除 理由:多分ダウンロードをされたくないから、Chrome氏ね ついでに右クリックも禁止、ダウンロードされるから ・PC/Android/iPhoneすべてで問題なく見れること 理由:それなりにデカイ案件だったし、そもそもその三機種で見れるのは最低条件 主に下2つでハマりました。 とりあえずまずは一番下のやつから Android PCとiPhoneは問題なく見れたんですよね。 前者はLityのボックスで、後者はフルスクリーンで。 んだけども、なぜかAndroidは見れないわけですよ。 色々と調べてみると、どうやら4系は標準メディアプレーヤーがゴミカスな模様。 Lityで頑張って出そうとするのになぜかダウンロードをしはじめる始末です。 そのくせただvideoタグで埋め込むだけだと再生ボタンすら表示させないというクソ仕様。 誰だよAndroid4系を開発したのは、開発者出てこい。 仕方がないので、Androidに関してはJSで対処しました。 やったのはPlay()とPause()を交互に繰り返すこと。  (多分書き方は合ってる) って感じで、videoにidを振って、クリックしたときに関数を呼びました。 JS側では function play_movide() { } みたいな感じで作った関数の中で、 ・クリックされた要素のidを取得 ・それがPlay中ならPause() ・それがPause中ならPlay() ってのをやっただけです。 Androidくんの場合だけで適用され、表示的にはフルスクリーンにならずにその場で再生されます。 タップをすると再生、もう一度タップで停止。 便利なのは、HTML5のおかげか、再生中と停止中の状態をJSで取得できることですね。 なのでif文でPlayかPauseかを判断することができるわけですよ。 このことに気づくまで3時間ぐらい掛かりました。 オイオイオイ死ぬわ俺とか思いながらやってましたよ? Chromeのダウンロードボタン Chromeは標準のメディアプレーヤーに、56?ぐらいからダウンロードボタンがつきました。 それをクリックすることで簡単に動画を落とすことができます。 クソ仕様です、クソ仕様。 何がクソって、そういうのは基本的にしてほしくないからです。 そもそもいらねえでしょ、そんな機能。 まあそんな文句ばかりは言えないので、対処のお話です。 何やら調べてみると、 ・CSSでwebkitを用いてダウンロードボタンを消滅させる(無理やり消失) ・ver58から、videoタグにcontrolListだかでnodownloadを指定すると消えるようになった の二通りがあるようです。 後者はすごく便利ですが、なんと58系のChromeからしか適用されません。 それにしたって57以下はコンマ以下の%の人間しか使ってないから問題ないんですけどね。 で、「だったら付けて解決じゃねえか」って思うかもしれませんが、そうは問屋が卸さない。 ここに使っていたプラグイン、Lity.jsが立ちはだかります。 という本題に入る前に、ついでのお話。 もう一つの指示があって、それは右クリックを禁止するというものです。 いくらダウンロードが消えたといっても、右クリックされるようでは簡単にダウンロードはされます。 開発者ツール開かれたら簡単に落とされますけど、そこまでする人間はそういない。 右クリック禁止のやり方については調べてください。 この2点、 ・nodownloadかwebkitでボタンを消す ・右クリックを禁止する ということをしようとするとLity.jsが邪魔するわけです。 何が邪魔かって、クリックするまではそのオブジェクトが存在しないんです。 最初は ってあるんだからbodyかvideoにかけりゃええやろって思いました。 webkitだってvideo::webkit~でなんとかなるやろって思いました。 はい違います。 ぼくも良くは知りませんが、Lity.jsは画面内でiframeとbodyを生成するんですよね。 要は別画面を生成して、その中に動画をcolorbox化して読み込むみたいな? 読み込まれるのは標準プレーヤーなんですが、iframe内のせいでJSをが入り込めません。 なんていうか、iframeの中をJSを操作することってできないらしいです。 CSSは理由がよくわからん。 要は、生成されてないんだからそのDOM操作できねえよバーカ! iframeだからJSで疑似要素を操作することもできねえよアーホ! って感じでハマりました。 助けてもらって解決しましたが。 解決案は、Lity.jsを使用するために付けるdata-lityを利用すること。 これを持ったDOMをクリックするときにfunction()して色々やります。 クリック関数になるので、生成されたiframe内からvideo要素を取得。 そこらへんで右クリック禁止したり、removeAttributeしたり、setAttributeしました。 という感じで解決。 氏ねって思ったのはLity.jsが想像以上に難解な仕様をしてくれたからです。 素直にHTML上で設置したvideoタグを使えって思いますよほんとに。 なにはともあれ、お陰様でダウンロードボタンを消すこともできました。 もーまんたい!もーまんたい! ほとんどぼくの力じゃないけど!! もうこんなんはコリゴリだよ、氏ね。 それでは今日はここらでサヨウナラー