20210206

関連記事

2019.10.13
M3のためにイベント用サークルリスト作成サイトの改修をするなど

こんなことに時間かけてるからダメなんですよ ※各サークルさんの画像を勝手に使ってます。 怒られたら消します、怒って。 前回のM3で使ったものの、意外と使いにくかったweb版サークルリスト。こいつをなんとか使い物にしてやろうと頑張ってました。割と頑張ったと思うの。 サークルリスト(ぼくの)https://www.circlelist.site/saikofall/ 使い道はふたつ。 1.リスト閲覧用主に当日以外で何を買うのか見るためのものです。サークル名・頒布物名・ブース番号・値段・作品(サークル)HP、といった項目を表示しています。現在バグっていますが(後で直します)、上部のイベントインフォでは合計金額なども表示します。 2.当日チェック用当日に会場内で次何を買うのか見るためのモードです。左上にある「当日仕様に変更する」というトグルをオンにすると、それぞれの表示がスマホで見やすいものに変わります。なぜかPCとスマホで背景色が変わってしまってるので後で直しておきます。 という感じです。 ちなみに、このサイトはWordPressで出来ているので、ブログ的な感覚でサークルリストを作成する形になります。 一応誰でも使えるようにユーザー単位で管理できるようにしています。もし使いたい人がいたら言ってくれよな!!!!M3だけじゃなくて他のイベントでも使えるようにしてあるぞ!!!! 最終的にそんな感じの機能を持ったサイトになりました。意外と時間かかった…。 これから予定している改修とバグ直しについて 1.サークルの重要度どこが最優先なのかなど、そういう情報を載せます。少なくとも今回のM3ではその辺の管理ができるようにサークルチェックサポートも作ったので、なんとかそれに合わせたいところ。 2.「ここはもう行ったよ」機能当日になって、「このサークルのは買った」という情報が入るようにします。正確には、なにかボタンを作って、それを押したら背景色が変わる感じです。 3.全体マップ表示これ致命的なんですけど、なんとかして全体マップを読み込ませることができるようにします。最悪固定で入れておきます(M3のやつ)。 4.バグ直しなんか色々と拙い部分があるのでそれを直します。背景色がPCとスマホで違うとかそういうの。 以上です。 ちなみに、このサイトを作った理由は実に単純です。会場内で紙を取り出してじっくり考え込んでる人が邪魔だからです。たまに紙落としている人とかいるので、そうなりたくなくてスマホで見れるようにしました。少なくともデケえ紙広げて他人の邪魔になることは少なくなる、はず…。 というわけで使いたい人が言ってくれよな!!!!!!! それでは今日はここらでサヨウナラー

デフォルト画像
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タグを使えって思いますよほんとに。 なにはともあれ、お陰様でダウンロードボタンを消すこともできました。 もーまんたい!もーまんたい! ほとんどぼくの力じゃないけど!! もうこんなんはコリゴリだよ、氏ね。 それでは今日はここらでサヨウナラー

2019.10.22
新機能を実装してました

感想をアーカイブする的な? Twitterでもつぶやいたりするんですけど、アーカイブしづれえなと思ったので、WordPressで管理することにしました。まだ何も投稿していないので表示されませんが、PC版は左下に、SP版は下部固定になります。 機能は単純、感想書く用のブログを一個追加しただけです。Tweetの問題で、これまで使っていたSNAPとかいうプラグインをやめてWP to Twitterに戻しました。こっちはこっちでハッシュタグが上手く呟けないという問題があるんですけど。 作成・修正を行ったページ数は3枚。・header.php(左下固定で新着3件表示)・archives-impressions.php(「感想」のアーカイブ)・single-impressions.php(「感想」の詳細) 一応稼働は今回のM3からを予定しています。上手く動けば。 結局休日を1つ潰しきった なんだかんだで休日が潰れたんですけど!!!ていうか東京行きの準備しないといけないのになんでこんなことしてんの!?!?!? よくよく考えてみると、別にこれM3が終わってからでも良かったんですよ。なんでぼくは急にこれをやり始めてしまったのか…。理解に苦しむね。 まさか1日かかるとは思ってませんでした。正直やる気出なさすぎて途中で休み入れまくってたからってのが原因なんですけど。それでもちゃんとメイン投稿とは別でTweetできるように設定したし、SP版もわりとちゃんと機能するようにしたし…。バグがあるかどうかは実際に稼働してみないとわからんすけど。 上手く行ったらぼちぼち投稿数を増やしていきたいなーとか考えてます。書くことなくなるか、飽きるかでストップするかもしれませんが。ちなみに、それを見越してか日付はあまり表示していません。なんか嫌でしょ、新着記事が1年前とかになってるのって。 とりあえずこれから東京準備始めます…。 それでは今日はここらでサヨウナラー