今日のハマりごと、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タグを使えって思いますよほんとに。

なにはともあれ、お陰様でダウンロードボタンを消すこともできました。 もーまんたい!もーまんたい! ほとんどぼくの力じゃないけど!!

もうこんなんはコリゴリだよ、氏ね。

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

関連記事

2020.01.02
C97、6日目の開幕です!!!

1年ぶりにコミケ行ってきた C96はお金と体力が尽きていたので、まさに1年ぶりの参加となりました。久々すぎて足が痛くなりましたが、もーまんたい。 ビッグサイトの夜明けぜよ…。 ブレすぎて何が写ってるのかわからない?心の目で見ればビッグサイトってすぐわかるでしょ。わかって。 今年は財布消失事件が発生した件もあったので、バスでした。まあ財布落とす前に予約してたのであまり関係ないんですけど。 2日目~4日目を参加し、3日間でおおよそ70kmを歩きました。東京というコンクリートジャングルを、森の賢者よろしく闊歩したわけです。 いやー、久々のビッグサイトくんは相変わらず馬鹿デカかったです。なんでいちイベントでこんな大規模なことになってるんですかね。そろそろぼくもわからなくなってきました。 ぼくは初めてのことだったんですが、今回も西と南が会場となりました。賑わいを見せすぎて死ぬかと思いましたが、なんとか生き残ることが出来たので上々といった所でしょう。 今年の目的は、「デジタル(音楽)」「ゲーム(FE・PSO2・魔女兵器)」「同人ゲーム」「雑貨」です。いずれ書く予定ですが、中々に中々なものをいくつか入手してきたのでご紹介したい所存。 人の群れ 今年もまた、男性向けエリアは冬だというのに異様な熱気に包まれていました。 南で上から下へと降りる最中のことです。階段に差し掛かった辺りで、ふっと会場内を見下ろしてみました。 人、人、人人人人…人!!男!!!!オタク!!!! まさにそれは人の波のようで、これから行くということを考えただけでも気分が減退してしまうほどでした。この20分ほど前では西の同じく男性向けが募っているエリアに訪れており、その際には死にそうな思いをしています。 ぼくのお目当ては上記画像のある辺りではなく、ここからすぐ右にある雑貨エリアではあったのですが…。結局、たどり着くのにもう10分ほど費やす羽目となってしまったわけです。 例年のことですが、笑うしかないほどにすべてが人で埋まった空間に自ら飛び込んでいくというのは、まるで死地へ向かう兵士のように感じられます。確かにぼくも飛び込んだのは間違いないのですが、これもまた次回になれば忘れてしまうような程度のことであったりします。 寒空の下、東京 今回も、ぼくは旅を共にした益荒男共と寝床探しをしていました。そう、ネットカフェです。 ただでさえ金のない我々は、切り詰める所を切り詰める覚悟を持って東京に足を踏み入れています。ホテルを取ればいいだけとは、その通りなのですがそれが中々どうして上手くいかないわけで…。(ただ面倒である、とも言う) 今年の東京は、そんな我々田舎人を死に追いやる恐ろしい街へと変貌を遂げていました。ネットカフェが、空いていないのです。 4,5件のネットカフェへ訪ねても、どこも 「満席です」「5名待ちとなりますが、よろしいですか?」「ブッ、ツーツーツー」(即切) といった様子。大変に繁盛しているご様子で、嬉しい悲鳴といった所でしょうか?ぼくたちは悲しみのあまり悲鳴を上げているわけですが。 結局、当初の予定だった新橋から更に場所を移し神田や赤坂へと移動したわけですが、あのまま寝床がなかったと思うと…。いやはや全くもって恐ろしいことでありますなぁ!!! 例年、何の支障もなく宿代わりを得られていたのですが、今年に限ってはそのようなこともなく、ただただ虚しい時間を過ごしました。寝る時間も大幅に削られてしまい大変な思いをしましたが、それでもなんとか寝床を見つけることができたのは、大変喜ばしいことなのでしょう。 もう少し視野を広げて寝床の選択肢を増やすべきなのだろうな、と思った冬でした。 余談ではありますが、こういうときにちゃんとした宿として使っていた東京木場ホテルがありまして。過去に2,3度お世話になったカプセルホテルでもあります。こちら、なんとなしに調べてみましたら、なんと閉業しておりました。開いた口が塞がらないとはこのことですなぁ。 余談です。 東京=飯を食らう場所 麺屋虎杖(めんや いたどり)・カレー担々麺というこれまた珍しいラーメン。・カレー感強すぎず、坦々感強すぎずのベストマッチなラーメンでした。 東京煮干し らーめん玉(東京駅ラーメンストリート内)・普通に美味しいかな、といった様相・ネギが異常に辛かったのですが、仕様ですか?そうですか。 グリルハンター 新橋店・肉、美味え(語彙力低下デバフ)・チーハンは国の誇りだよ カレーは飲み物・赤を頼みましたら、まさかこんな並々としたカレーが来るとは思いませんでしょう?・無料トッピングが選べて「キミの最強カレーを作り出せ!」って感じでございました。・美味。 ベローチェ・カロリーの暴力。・こんなん食ってるから冬は太るんだよデブ。 C98は? 実は半年もしない内に、C98がやってきます。オリンピックの都合上、今年のゴールデンウィークに移ったわけですよ。 ただ、ぼくはその前の3月にM3へ行きたいと思っています。C98も行けないわけではないのですが、如何せん資金不足的な…。まあ身を削ればいけないこともないのですが。多分その辺は将来の自分が考えてくれると思います。 知らんのですよ!!!未来のことなど!!! というわけですが、現状は行かない方向で考えています。それにお仕事的にも死にそうな思いをする1年な気がしているので、そういう意味でも難しい可能性が高いです。 ていうかそもそもさ、 C97(12月)→M3(3月)→C98(5月) とかいう超短期間で新曲ガンガン作れる人なんて限られてるでしょ…。大したもんも見れない可能性があるので、そういう意味でもC98はスルー対象にするべき、と思っています。 M3はいきまーす!よろしくね!!

デフォルト画像
2019.01.02
あけましておめでとうございます(1年ぶり十回目くらい)

今年もおめでとちゃーん 2019年になりました。 仕事に支障が出る恐れがあるので政府はさっさと新年号を発表してください。 それはともかくとしてあけおめこ。 覚えてませんが、そろそろ十年目とかだと思います。 最早FC2ブログを利用していた頃が懐かしい! あんな拡張性のないサービスで満足していた頃が不思議に思えるくらいですね。 先月先々月とほとんど更新ができていなかったので、今年から一念発起?ではないですが日記を書いていきたいと思います。 先月後半はコミケに行ったり、その準備をしたりで色々と忙しかったので更新ができなかったということにしておいてください。 なので今週中くらい目処にコミケ行ったよ的なのを書きてえなと思ってます。 今年一発目から驚いたのは、クリボーまとめ本の感想呟いたらめっちゃ反応があったことですかね。 やっぱ好きなんすねぇ~(ねっとり) 2019年も頑張って生き残ろうな。 それでは今日はここらでサヨウナラー

デフォルト画像
2019.05.13
Twitterくん、キミいつの間にそんなAPI取得面倒になったの?

英語を読ませるな 昨日、新ブログのTwitter連携のためにAPI取得をしてたんですよ。 大分前だけど経験あるしなんとかなるやろ、みたいな。 的な? そしたらもう死ぬかと思いました。 項目数は増えるわ色々やることが増えてるわ電話認証が追加されてるわ。 全部やりましたけど。 いつものApp作成画面はあんまり変わってなかった気がしますが、それ以外の工程が結構増えたんじゃない? APIの使用用途、具体的な使用例、そんな概要的なものを最低文字数込で書かされました。 もちろん全部英語でしたけど。 まあそんな面倒な話ではなく、Google翻訳にかけたものそのまま入れただけです。 それで通りました。 【2019年4月版】WP to TwitterでWordPressからTwitterへ自動投稿する WordPressとTwitterを連携する(WP to Twitterを入れてみる) 一応ここら辺が最新情報?ですかね? 多分下のほうが新しいですが、それでも微妙に違う部分があったので注意ですね。 create an appからは同じでしたけど、それまでの開発者登録までは違ったと思います。 どのAPIを使用するか、とか妙に細かく分かれてましたが、そこは適当に「bot登録したい!」の項目を選択。 あとは適当にGoogle翻訳かけて解決しました。 WP to twitterのためとはいえ、中々面倒ですよねぇ。 前はもっと気楽にAPI keyの取得ができたと思うんですが。 APIの時代ではない? そうなってくると頭に思い浮かぶのはやはりIFTTTですね。 xmlファイルさえちゃんと出力できてればRSSで簡単投稿が可能なので便利です。 このブログも静的ページなので、Twitterの投稿にはIFTTTを使ってますし。 基本的には ①IFTTTがxml巡回APPを起動 ②前回の巡回と内容(日付とかURL)が変わってればTwitterに自動投稿 ※投稿内容はIFTTT側で制御可能 といった流れです。 弱点としては、たまに動かないってことと定期巡回なのですぐには投稿されないことです。 15分ぐらい待ってやっと投稿されたりもあるので、そのへんが気になる人は使えないですね。 あと、半年ぐらい使ってましたがなぜかAppが動かなくなったので新しく作り直しました。 何が原因だったのかはわかりませんが、そういう風にたまに動かなくなるのが玉にキズ。 Wp to twitterとかのプラグインを使うもIFTTTとかの連携機能使うもどっちもありですね。 前者はかなり広い範囲で制御できるしやれることが多いですし、 後者はAPIの取得とかをしなくてもRSSでなんとかなるのが超楽です。 仕事でもたまに依頼されることがあったりする内容なので、どっちも覚えておきたいところではあります。 が、まあぼくは面倒事が嫌いなので極力IFTTTとかのサービスで解決したいですね…。 それでは今日はここらでサヨウナラー