ブックマークレットでURLからJavaScriptを実行出来る

はじめに ブックマークレットというものを耳にした事はありますでしょうか。先日Chromeのコンソールからjsを実行する事でCORSの試験を行う方法についてまとめました。今回はURLからjsを実行してみたいと思います。 URLにjsを記述したブックマークの事を界隈ではブックマークレットと呼んでいます。手軽に便利な機能を作れるのですが、存外知られていないテクニックですので、是非ともこの記事を機に覚えてみて下さい。 作ってみる 今回作りたいブックマークレットは下記の様なページから見出しの数を数えるというものです。取得したい見出しはHTML的にはh2要素になります。 実装をより明確に言語化すると、ページ内のh2要素数を計算して、その内の不要な固定のh2要素数を差し引きする事で算出できます。固定のh2要素とは例えば、「検索」とか「少しだけよく読まれる記事」などの事です。ちなみに合計で7個です。 実は下記のコードをURLバーに入力するだけでjsが実行されます。但しコピペをすると頭のjavascript:がカットされてしまうので、そこだけ手入力をする必要があります。 javascript:(function(){ var... 御覧になる | 御シェアする

Vimのバッファ管理ってどうしてる?Buffergatorとかどう?

はじめに Vimのバッファ管理を容易にしてくれるプラグインを紹介します。「おすすめvimプラグイン20選」みたいな記事では取り上げらていないけれど、便利なプラグインがあったのでその使い方を備忘録に残しておこうと思った次第です。 プラグインのインストールを行うので、プラグインマネージャを入れた記憶が無い人や、よく分からないという人はこちらの記事をお読み下さい。 バッファとは 今回インストールしたいプラグインはバッファ管理を用意にするプラグインです。Buffergatorと言います。 そもそもバッファとは何でしょうか。Vimでコードを書く際、編集したいファイル名をコマンドの引数に渡してファイルを開きますよね、そして編集を行いますが、編集しているものは実はバッファと呼ばれる揮発的なメモリなのです。 またファイルの編集を終えると無意識に:wを実行して編集した内容を保存しているかと思いますが、厳密に言うとあれは、編集前のファイルの内容をバッファに展開して、バッファに対して変更を行い、変更の内容をファイルに上書きしているのです。 Vimで色々なファイルを編集している状態で、:lsと打つとバッファの一覧が確認できます。Ctrl... 御覧になる | 御シェアする

ディレクトリスタック〜もしかしてcdコマンド使ってませんか?〜

はじめに ディレクトリを移動する際に使われる、ディレクトリスタックという概念をご存知でしょうか?ディレクトリ移動はcdが圧倒的な知名度を誇っているので、便利な機能ですが意外と知られていないかと思います。 例えば決まったディレクトリを頻繁に移動することがあり、その場所が分からなくなる人などには丁度良い機能ですので、是非使ってみることをおすすめします。 使い方 普段のディレクトリ移動の感覚でcdの代わりにpushdで移動先を指定してみて下さい。 $... 御覧になる | 御シェアする

.vimrcの設定でVimをもっと良くする

.vimrcとは .vimrcの設定をせずにVim元来の機能のみでコードを書いていないでしょうか。言わずもがなVimはプラグインやVimスクリプト、自作コマンドなど拡張していくことで機能性を何処までも高めていけるエディタです。 .vimrcもその内の一つです。自身の好みに合わせてキーバインドを変えたり、ショートカットを作ったりと様々なカスタマイズをすることが可能です。言うなればVimは刀です。叩くことで強度を増すのです。以下の中にVimmerの皆さんのお役に立てるものが少しでもあれば幸いです。 初めて.vimrcを設定するという方も気軽に~/.vimrcにコピペされてみて下さい。 My... 御覧になる | 御シェアする

知っておくべきiPhoneでYoutubeを観る時のテクニック

アプリで観るかSafariで観るか まずYoutubeで観る際にYoutubeアプリで再生するのか、ブラウザから観るのかで好みが分かれるかもしれません。僕は断然Safariブラウザで観ることが多いです。Safariで観る際には標準設定やそのままの使い方だと見辛いことが多いので少しでも見やすくなる方法をまとめてみました。 Youtubeアプリについてはほとんど使った事がないので特に言えることはありません。 バックグラウンド再生 時折Youtubeをバックグラウンドで再生しながら(音声だけを聴きながら)検索をしたり、読書したり他の作業をしたくなることがあると思います。Safariの場合はデスクトップ表示にするとバックグラウンドでの再生が可能です。 デスクトップ表示への変え方はURLバーの「ぁあ」部分を触り、「デスクトップ用Webサイトを表示」をタップすると切り替わります。 都度設定を変更するのが面倒な場合は、「設定」アプリからSafariの設定に移り「WEBサイトの設定」項目グループにある「デスクトップ用Webサイトを表示」から「すべてのWebサイト」をオンにすると設定が保存されます。 動画によってはFPSが上がることもあります。 コメント欄も同時に再生 動画を観るだけでなく流れているコメントを同時に観る方法もあります。こちらもデスクトップ表示設定がされている前提なので、まずはデスクトップ表示を有効にして下さい。 通常iPhoneではYoutubeに限らず動画を再生する時は画面いっぱいに広がってしまうのですが、ピクチャ・イン・ピクチャ機能で再生すると画面サイズを小さく出来ます。そのまま右下に移動させるとコメント欄を同時に表示させる事が出来ます。 ピクチャ・イン・ピクチャモードでの動画ウィンドウの大きさは拡大・縮小が出来ますし(限界はある)、フルスクリーンモードになめらかに戻る事も出来ます。ちなみにピクチャ・イン・ピクチャの状態のままでも15秒ずつの巻き戻しと先送りは可能です。 終わりに Youtubeサイト側の機能アップデートも頻繁に行われているので今回まとめたものが常に利用出来る設定方法ではありませんので、その点はご承知下さい。 ... 御覧になる | 御シェアする

mermaid.jsでリトアカのガントチャートを作った

mermaid.jsとは フローチャートやシーケンス図、ガントチャートなど様々なドキュメントをマークダウンの様な定められたフォーマット通りに記述することで、テキストベースで作図が出来るツールです。 今回はmermaid.jsを使ってリトルウィッチアカデミアの第一クールまでのあらすじをガントチャート風に作成してみました。単なるmermaid.jsの練習と備忘録、そしてリトアカの布教です。 mermaid.jsのインストール $... 御覧になる | 御シェアする