今日のハマりごと、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.12.25
インデントを!!!HTMLに!!!付けてください!!!

メロスには政治がわからぬ。 メロスは、会社勤めのコーダーである。キーボードを叩き、客と遊んで暮して来た。けれどもインデントの位置に対しては、人一倍に敏感であった。 インデント付けてよ!って話 大っぴらには人のことを言えないので、Twitterには書けない内容的な…。Qiitaとかに書いたら「お前はどうなんだよ!」とか言われそう、と保険を掛けておきます。 一言で表すと、インデントとかに関してです。決してHTMLの構造だとかセクションだとかアウトラインだとかって話ではないです。 コーダーやってると、他人のソースを見たり弄ったりするときが結構な割合であります。そういうとき、ソースが見やすい場合と見にくい場合があるわけですよ。そんな中その判断を下す基準としては、ブロックごとに分かれてるかとか色々ありますが、ぼく的には「最低限のインデントが付いてる」か否かが一番低いハードルとしてあります。ちなみにぼくのインデントは半角スペース2つです。 いやこれ、別にインデントの数を2つにしろとか4つにしろとかそういう強要をしているわけではないんですよ。極端な話かもしれませんけど、最近インデントがほとんど存在しないソースコードを弄らされまして。このブロックどこ?書いてある場所どこ?っていうことになりました。 しかもそれだけではなく、インデントの量が場所によってマチマチ。これの何が悪いかって、ネストの関係が全くわからないんですよ!!!こことここ、同じ深さで<section>だけどなんでソース上は深さ違うの?って。 時間がなくて慌ててるのはわかるんですが、HTMLは入れ子関係がわからん状態だと、ソースの解析から始めないといかんのですよ!!!!(多分他のプログラムも大体そう) しかもなんか所々に変な半角スペースが入ってたりなかったり。ソースコード上の距離がブロックごとで微妙に違ったり。そもそもブロック同士のネスト関係がわからないし…。しまいにゃ<" ">と<””>が混じってるし? なんじゃこら。 フロントが合ってればオッケー!? これまた極論、コーダーが出す成果物はフロントで見たとき問題なけりゃ誰も文句は言わないです。コーダー以外。 でも何か月か経ったりしてそのソースを改めて見たとき、それが自分か他人かは知りませんが、間違いなく彼or彼女はキレます。これを作ったのはどいつだ!と叫びます。(実際には叫ばず黙ってソースを修正しはじめます)(これすごいコードだね、と多少の嫌味は入ります) とはいえ、デザイナーも熟達者になるとソースを見始めます。なぜかといえば、自分の思う通りにデザインを書き起こしてほしいからですよ。中にはコーディングも行うことのできる段違いのパーフェクトヒューマンもいますが、その辺になると自分で全部やり始めるのであまり関係はないです。 そんなことがあったりなかったりするので、コーダー志望ならちゃんとインデントを付けてソース管理しようねって話。久々にどこに何が書いてあるのかさっぱりわからんソースを見たので愚痴ってほどでもないですが、書きました。 ちなみに(おまけ) すごく適当に書きましたけど、大体こういう感じのソースでした。なんていうか、整理の苦手な人なのかな?って感想。別に中身まで詳しく検分してどうのしたってわけではないのでどうでもいいんですけど、すげぇなって。正直PHP云々でWordPress覚えさすより先に、文法の基本ってわけじゃないけど綺麗にソース書けるようになってくれないかな。これソースとして渡されたらまず整形で半日かけるわ。 ということがあったので、 ・インデントつける(ぼくの場合は半角スペース2個分)・タグを見やすく書いてくれ・軽くで良いからHTML5の文法について調べてくれ ぐらいはやってほしいですよねほんと。ぶっちゃけイラレとかで機械的に出すソースコードとなんも変わんねえじゃんね。これを人間が出すんなら人間いらんわ、機械でいい。 そろそろ人間が書くレベルで、後々人間が保守できるぐらいのソース書けるツールとか出ないの?まあ出たらぼく失職すると思うけど。

デフォルト画像
2018.11.05
秋M3買ったものまとめとちょっと感想

買ったものまとめたよ! というわけで早速、買ったものをまとめてみました。 ついでに拙い語彙力を絞り出して感想を書いてみました。 ほとんど感想になってませんけど、一言で言えば「全部ヤバい」です。 全部まとめたらこうなった。 ちなみに、今回はこれだけ買いました。 前回ほどではありませんが、結構買った気がします。 3万円も使いましたからね~。 とても素敵でしたよ! 買ったものリストはこちらから では以下よりリスト形式でお届けいたします。 (敬称略) 純情ティータイム endorfin. 人気サークルさん。音ゲーでハマりましたけど今回も当たり盤だと思います。 Sweet Halloween 葉月ゆら この方、作品作るペース早すぎません?前回C94だった気がするんですけど。ハロウィン仕様で、葉月さんの歌声はこういうの本当合うよなって思います。 巡る街、巡る時 Lilium Records 個人的な意見ですが「Just Another Day」が一番好きです。インストでほしい感じ。 Energy Of The Star Yoohsic Roomz ヤバヤバな人たちが集まった名盤だョ!豪華メンバーすぎるし全部かっこいい。かっこいい。 VIVID:Hearts J-NERATION 前日に見つけたヤバヤバ盤。ノリノリソングの集まりだと思います。ヤバ。 Happy POP Harddocre Future 2nd MUZZicianz Records 今回買った中では上位に入る好きさです。これもノリノリソングの集まりって感じ。大好き。 -Summer Point- .banbanshi 本当、ぼくは爽やかな雰囲気が好きなんですね。全体的に「夏だ!」って感じの爽やかさを出してるの本当にずるいです。多分タイトル見なくても聞けば「夏だ!」ってのがわかると思います。個人的名盤。 WEEKDAY TRIP イシカダス 「またたびジャンキーズ&あを」さんのが印象に残る。「Self introduction」は名曲だと思いますです。 VELVET CLOAK AcuticNotes 一言で言えば「ヤバ」。一発目から「オシャレ」を纏った音が降ってくる感じ。なんかもうトランプ。これは聞くべき。今回の名盤の一枚だと思います。。 A Tribute -One Heart- KLAMNOP NEXT 秋M3最強名盤。実質終わりを迎えたMUSECAのコンポーザーが集まった正に「ヤバ・盤」。何がヤバいって開幕2分で10人ぐらい並んでたことですかね。一言で表すなら「最の高」。 ONNUEHO 6th Edition Symphonic City まだほとんど聞いてませんが、65曲入ってるのよくわかんないです…。なにこれ?いずれは流しっぱで聞きます。 Älvorna - Wizards of Erdelåten - Rigel Theatre 今回の目的のイチサークルさんでした。後にも書きますが「Äventyr」で知った人です。すごい人だと思います。 Rinn Ding Dong - L'avenir de la Flesvelka - Rigel Theatre どうせならってことで買ったそのいち。 Älvorna -Memories of Abcense- Rigel Theatre どうせならってことで買ったそのに。 SOLROS ~Eternal Memory~ Rigel Theatre これは買おうって決めてたやつ。「Äventyr」が入ってるから名盤。ぼくにとって音ゲー曲の中で1,2を争う名曲です。 PianoCollectionⅡ Metomate 前回のM3で知ったMetomateさんのピアノアレンジミニアルバム。知ってる曲のピアノアレンジでしたね。「Grenat」が一番好き。 Piano CollectionⅠ Metomate あったら買ってみたそのいち。知らない曲ばかりでしたがしゅきしゅき。 Invert Metomate あったから買ってみたそのに。結構古いっぽいですが、この頃からこの雰囲気かぁ…!最高ですよ? Garden of vacancy Metomate あったから買ってみたそのさん。壮大な雰囲気を出すのが得意って感じがしますよね。大好きです。 Mian ぶるよぐ! エロゲやってんなら知ってるだろ!っていうRitaさんのサークルミニアルバム。アイリッシュというか民族調というか、この方の歌声にマッチしてて最高。大好き。 MONOLOGUE WAVE 前回ヤバいCD出した所。曲数少なくてどうしようか迷ったんですが買いました。いずれ聞く。 まよなかミュート メゾネットメゾン ほーん…思ってた以上に良い!!ってCD。聞いてて音ゲーとかでやりてえな…ってちょっと思ったりした。 My World Aintops まだ集中して聞いてないのですが全体的に良さそうCD。 アストロラーベの道標 月燈舎 こう、なんていうか、「普段ループして聞いてたい」って感じのCDでした。特に「comet」が好きですね、この手の曲調が好きなんです…。 人魚とカナリア、願いの歌 *baletta 思ってたよりポップな感じのが入ったりしてたCD。これもループして聞きたいってタイプのやつです、ぼくにとって。 Re:voltage DiPathoS 個人的意見としては「THE・アニソン!」ですね。カッコいい系なので聞いて損はしないです。聞いてて気づいたんですが「浮世アイロニー研究所」さんが参加してるんですよね。ボカロ聞いてた頃に知った人で、結構聞いてました。 Eternal Memory Harmonic Reflection 正直カッコよさというジャンルだけで言えば今回の中で一番かなって。春のときも思いましたけど天才なのでは!?カッコ良すぎて失禁しかけた。 Re;OK ムラサキパプリカ 「たぶん、しらない」さんの雰囲気が結構出てて嬉しいです。「たぶん、しらない」さんは春M3のときの作品がぼくにヒットしすぎたのでRe;OKも買ってみたんですが、正解だったかなと。これはヤバいですよ。 黒猫ハロウィンホテル Mamyukka 3列で並ぶとかいうめっちゃすごいことになってたサークルさんです。なんかこう、ハロウィン感はあまり感じなかったけど「開廷★ミラクルハロウィン裁判」がハチャメチャ過ぎて好きです。 Yonone はりとさんち 夜中に静かに聞いてたいインストミュージック集。すげえ癒やされます。 Lost Ones si-sounds 春M3でも「アッッッッ(語彙死亡」ってなったサークルさん。今回も良いものが出来上がってるみたいで、最近はこれを寝る時用音楽にしてます。si-soundsさんはこういう心に響く優しい曲を作るのが得意なんでしょうか?次回もこの感じで出してくれないかな。