Corredorスマートフォン用の表示で見るCorredorウェブ、プログラミングの勉強メモ。写真や動画をサクッと保存したいなと思い、ブックマークレットを作ってみた。対象とするのは、以下のような1つの投稿を表示するページ。写真:Instagram動画:Instagram写真と動画を複数まとめてアップした投稿ページについては後述する。フルサイズの画像ということが分かる。設定すれば、画像を直接ブラウザで表示し、保存することができる。記法も解釈できるので、さらにブックマークレットを短く書ける。{location.href=document.getElementById('pImage_0').src})()javascript:(()=>{location.href=document.getElementById('pImage_0').src})()javascript:{location.href=document.getElementById('pImage_0').src}無名関数はアロー関数にできる。囲むだけで良いようだ。javascript:location.href=document.getElementById('pImage_0').srcとりあえずこれで動作する。いう要素で動画を表示している。クラス名はランダム文字列なのかと思っていたが、どうもこれで固定のようだ。して動画を直接表示してみる。javascript:location.href=document.getElementsByClassName('_c8hkj')[0].src動画の場合、リンクを作って右クリックから「リンク先を保存」した方が楽かな?と思い、リンクをページ左上に追加するようにしてみた。使ってみたがちゃんと動いた。複数の写真・動画をまとめて1つに投稿したページの場合、画像と動画はカルーセルで1つずつ表示するようになっていて、カルーセルを移動する度に表示欄の要素をまるごと取り替えている。手間だが、保存したい画像を表示してはブックマークレットを実行、次の画像を表示してはブックマークレットを実行、としないといけなさそう。特定するやり方では取得できない画像があるのだ。要素を特定するように書き換えた。複数投稿にも対応した画像保存のブックマークレットは以下のようになる。brai4u/bookmarkScript-ImgDirectIG複数投稿にも対応・写真でも動画でもリンクを作るブックマークレットそんなこんなで、写真の場合でも動画の場合でも、さらには複数投稿の場合でも対応している1つのブックマークレットを作ってみた。これを投稿ページで使うと、画面左上に「Image」もしくは「Video」のリンクを追加する。style="position:absolute;top:0">${i?'Image':'Video'}</a>`})(document,'getElementsByClassName')長いので整形して説明する。アクセスするためのもの。要素が存在するかどうかでリンクを作り変えるという寸法。どちらの要素もなかったらそこで中止、という処理。丁寧にアラートを出しても良いかも。ページ中にリンクを追加している。このやり方をすると、以降そのページでのカルーセル等が効かなくなってしまうので、更新して再表示してやる必要があるが、仕方なし...。テンプレートリテラルを使って書いている。指定することでページ左上に表示させている。いう三項演算子で作っている。分解してみるとこうだ。存在を確認して分岐している。属性値を取得してリンクに設定している。属性値を取得している。部分、これは必須ではないが、リンクの文言を「Image」か「Video」で切り替えるために書いている。不要なら適当に「Link」とでもすればより短くできる。これでサクッと写真や動画が保存できる。いうウェブサイトを見付けて触発された。»ProfileNeoウェブ・プログラミングの勉強メモ。PagesBookmarkTwitterFacebookPocketスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。