よまひごと: 2017

2017年10月29日日曜日

スマホでブックマークレットを登録して使う方法【Android版Chrome編】

スマホやタブレットでもブックマークレットを使うことができるがPCとは登録方法や使い方が少し異なる。スマホ初心者のためにスクリーンショットを入れて解説する。

初心者のためにブックマークレットについてひとつ注意しておきたいことがある。ブックマークレットの効果は実行したときに表示していたページだけに有効だ。ページを再読み込みしたり違うページに移ったりしたら効果は消える。

では始めよう。

ブックマークレットを登録する

ダミーのブックマークを登録し、その名前をブックマークレットの名前をコピペして書き換え、URLをブックマークレットのアドレス(javascript)をコピペして書き換える。では順番に説明する

まずダミーのブックマークを登録する。適当なページでブラウザメニューを開く。
☆マークをタップすれば表示中のページがブックマークに登録される
次は今登録したブックマークを編集していく。まずは名前の書き換えだ。ブックマークレットを置いてあるページを表示してブックマークレットのリンクを長押しする
メニューの「リンクテキストをコピー」タップする
ブラウザメニューを開き「ブックマーク」をタップする
リストからダミーで登録したブックマークを見つけ右端の３点マークからメニューを開く
メニューの「編集」をタップする
名前の適当な場所を長押しして「全て選択」をタップ
全て選択された状態で「貼り付け」をタップしてリンクテキストを貼り付けて名前を書き換える。（ここでは元の名前を尊重する手順を示したが自分が分かりやすい使いやすい好きな名前にして構わない）
書き換えた名前はブックマークレットを実行するときに必要になるので覚えておく。左上の←マークで編集を終了する
右上の×マークでブックマークリストを閉じる
元のページに戻るので今度はURLの書き換えだ。再びブックマークレットのリンクを長押しする
今度はメニューの「リンクアドレスをコピー」タップする
ブックマークリストを表示させリストからさっき名前を書き換えたブックマークを見つけ右端のメニューから編集画面を開く
URLの一部を押すと全て選択状態になるので「貼り付け」をタップしてリンクアドレスを貼り付けてURLを書き換える
URLを書き換えたらブックマークレットの登録が完了。ブックマークリストを閉じて終了。（豆知識：ブックマークレットのURLはjavascriptというプログラミング言語のコードになっている）

ブックマークレットを使う

表示中のこのページでブックマークレットを使おう。アドレス欄に登録済みのブックマークレットの名前を入力する
するとドロップダウンリストの候補一覧にブックマークレットが表示されるのでタップする。このときブックマークレットが実行される
実行した後は元のページに戻る。実行の効果はブックマークレットによってさまざまだ。(ZoomMe実行後の拡大操作についてはZoomMeのページを参照)

以上で解説終わり。あなたがブックマークレットを使えるようになっていれば嬉しい。

2017年10月28日土曜日

スマホでブックマークレットを登録して使う方法【Android版Firefox編】

[2021/9/9] android版firefox v.92.1.1 でブックマークレットが使えました！諦めて完全放置していたのですがいつのまにか修正されていたようです。個人的には代替手法に移行したのでブックマークレットには戻りません。

[2020/8/19] android版firefoxがv.79.0.4になりブックマークレットが使えなくなりました💩

スマホやタブレットでもブックマークレットを使うことができるがPCとは登録方法や使い方が少し異なる。スマホ初心者のためにスクリーンショットを入れて解説する。

初心者のためにブックマークレットについてひとつ注意しておきたいことがある。ブックマークレットの効果は実行したときに表示していたページだけに有効だ。ページを再読み込みしたり違うページに移ったりしたら効果は消える。

では始めよう。

ブックマークレットを登録する（2021/9/13現在この方法では登録できません。「リンクをブックマーク」がメニューに出なくなりました。今は更新する気力が・・・）

ブックマークレットを置いてあるページを表示してブックマークレットのリンクを長押しする
出てきたメニューから「リンクをブックマーク」をタップして登録する

これで登録は完了だ。

ブックマークレットが登録されているか確認する

ブラウザのメニューを出す
「ブックマーク」をタップする
ブックマークの一覧が表示されるので登録されているか確認する。ブックマークレットを実行する時に名前が必要なので覚えておく

ブックマークレットを表示中のページで実行する

ページを拡大できるようにするブックマークレットZoomMeを例として説明してゆく。モバイル版Youtubeは拡大できないので拡大できるようにZoomMeを実行してみよう。

アドレス欄に登録済みのブックマークレットの名前を入力する
するとドロップダウンリストの候補一覧にブックマークレットが表示されるのでタップする。このときブックマークレットが実行される
実行した後は元のページに戻る。実行の効果はブックマークレットによってさまざまだ。
ピンチで拡大操作するとZoomMeの効果で拡大できる。

以上で解説終わり。あなたがブックマークレットを使えるようになっていれば嬉しい。

Windowsで簡単軽量SSL対応Webサーバーを手軽に立ててローカルでHTTPS運用する(スクリプトテスト用にCaddyで)(注1)

【2020年10月注記】この記事は Caddyバージョン0.10.xのもので Let's Encrypt にサーバー証明書を取りに行くプロトコルがサポートされなくなっています。というわけで現在このバージョンは使用できません。

javascriptファイルをローカルに置いて手直ししながら色々なサイトにロードしてテストしたいのだが、httpsサイトだとhttpサーバーに置いたスクリプトは混在アクティブコンテンツとしてブラウザに蹴られる。でWindowsでhttpsサーバーをローカル(127.0.0.1)運用することにした。

IISとかApacheとか大げさなサーバーはいらないしSSL証明書だの面倒なこともしたくない。何か簡単に立てられて軽量なサーバーはないかと探したらCaddyというのがあった。CaddyはサーバーやSSLの知識がほとんどなくても簡単にhttpsサーバーを立てられる。Caddyは一定の設定・手順で起動すれば自動で証明書を取得してくれる。

Caddyで取得した証明書

以下にCaddyによるローカルhttpsサーバー立ち上げの手順を失敗談を交えて紹介する。

ドメイン名を用意する。ダイナミックDNSのドメイン名で構わない。以下 mydomain.com とする
web サーバー Caddy をダウンロードする。zip なので適当なところに展開する。以下 c:\caddy に展開したものとする
サーバーで公開するファイルを置くディレクトリを用意する。以下 c:\www とする
Caddy の設定ファイル Caddyfile を作成して c:\www に置く。Caddyfile はテキストファイルで１行目に mydomain.com と書いておく

mydomain.com

ポート 80 と 443 を開放して外部から Caddy に接続できるようにする
mydomain.com に Caddy に接続するための IP アドレスを設定する
コマンドプロンプトを開く
c:\www に移動する

c:\users\foo>cd c:\www

c:\caddy にパスを通す

c:\www>path %path%;c:\caddy

caddy を起動しSSLサーバー証明書を取得させる。 Caddy はポート80と443をリッスンしつつ Let's Encrypt のサービスに接続し証明書を取得する。途中メールアドレスの入力を求められるが任意

c:\www>caddy
Activating privacy features...
Your sites will be served over HTTPS automatically using Let's Encrypt.
By continuing, you agree to the Let's Encrypt Subscriber Agreement at:
  https://acme-v01.api.letsencrypt.org/terms
Please enter your email address so you can recover your account if needed.
You can leave it blank, but you'll lose the ability to recover your account.
Email address: メールアドレス(任意)
2017/10/18 13:45:39 [コンピュータ名] failed to get certificate: acme: Error 400 - urn:acme:
error:malformed - Error creating new authz :: DNS name does not have enough labels

c:\www>

c:\www>caddy
Activating privacy features...
2017/10/18 15:35:16 [mydomain.com] failed to get certificate: acme: Error 400 - urn:acme:
error:connection - Timeout
Error Detail:
        Validation for mydomain.com:443
        Resolved to:
                1**.\*\*.**.253
        Used: 1**.\*\*.**.253

c:\www>

c:\www>caddy
Activating privacy features... done.
https://mydomain.com
http://mydomain.com

証明書さえ取得すればローカルでの運用にはポートを開放しておく必要はないのでポート 80 と 443 を閉じる
テキストエディタを管理者として実行し %windir%\system32\drivers\etc\hosts ファイルを開き次の１行を追加して保存する

       127.0.0.1       mydomain.com

以上でローカルに SSL 対応 HTTPサーバーが出来た。必要な時に caddy を起動してブラウザでhttps://mydomain.com/anyscript.jsにアクセスすれば c:\www にある anyscript.js を読み込み実行できる

注1) gistで公開した記事だがmarkdownに馴染めないので今後こちらで保守する

2017年10月25日水曜日

スマホサイトをピンチで拡大できるようにするスマホ用ブックマークレット

スクリプトを書いてブックマークレットにしたけど書いた後でブラウザやandroidの設定で拡大できることを知った。

android版firefoxでは「設定」→「アクセシビリティ」で「ズームを常に有効にする」をオンにする

android版chromeでは「設定」→「ユーザー補助機能」で「強制的にズームを有効にする」をオンにする

androidは設定→ユーザー補助→拡大操作をONにすればすべてのアプリで表示を拡大できる

スマホやタブレットのブラウザでモバイルサイトを見るとき拡大できないことがある。視力の悪い人間にとっては不便この上ない。で拡大できるようにするスクリプトを書いてgist.github に「スマホサイト（モバイル用ウェブページ）を拡大（ズーム、拡大縮小）できるようにする」を公開した。
上記スクリプトを簡単に使えるようにブックマークレット化した。
動作確認ブラウザ：firefox(nightly)58, chrome61 (いずれもandroid7.0)

ZoomMe! v.0.1.1インラインコード版←これをブックマークに登録して、拡大したいページを表示しているときに実行する。特に結果表示はしないので実際にピンチで拡大操作して効果を確認。
スマホでブックマークレットを登録して使う方法【Android版Firefox編】
スマホでブックマークレットを登録して使う方法【Android版Chrome編】

【Chromeでの拡大操作の仕方】
ChromeではZoomMe実行後そのままピンチで拡大操作しても拡大できない。次のどちらかのやり方で拡大できる。

少しスクロールさせて新しい部分を表示させてそこに一方の指を置いてピンチする
ブラウザのメニューからページ内検索を表示させそれを閉じてからピンチする

一度拡大に成功したら後はどこでピンチしても拡大できる

備考

firefoxならアドオンの tampermonkey を入れてこのスクリプトのリンクに飛んでインストールするのもいい。いちいちブックマークレットをタップする面倒もなくページを開いたときに自動で実行されるようになる。
＊自分の環境では tampermonkey へのスクリプトインストールが１回で成功しない。「インストール」ボタンを押してページが自動で閉じたら成功なのでそれまで何度もボタンを押す必要があった。

実行したいときだけ実行するほうがいいならブックマークレットがいい。

2017年10月22日日曜日

(歌詞の)選択/コピー/右クリック/印刷をできるようにする（U-フレット、J-Lyric、歌詞タイム等のコード譜/歌詞検索サイト用ブックマークレット。スマホ対応）

githubに公開している「（日本のコード譜歌詞検索サイトの）選択/コピー/右クリック/印刷の禁止を解除する」スクリプトをブックマークレットにしました。
後述するサイトでテキスト選択/コピー/右クリック/印刷をできるようにします。明記したサイト以外（歌詞サイト以外の普通のサイト）でも単純な禁止方法を取っているサイトなら解除できる可能性があります。

動作確認ブラウザ(PC)：firefox, chrome (edgeでも動くけど簡単にはお気に入りに登録できない。ieへの対応はやめました）
動作確認ブラウザ(android)：firefox(nightly), chrome

自由を！←これをブックマーク（お気に入り）に登録して禁止を解除したいサイトで歌詞を表示しているときにクリックしてください。特に結果表示はしないので実際に選択/コピー/右クリック/印刷して効果を確認してください。
スマホでブックマークレットを登録して使う方法【Android版Chrome編】
~~スマホでブックマークレットを登録して使う方法【Android版Firefox編】~~(2020年8月Android版Firefoxがバージョン79になってブックマークレットが使えなくなりました💩)
ブックマークレットからgithubにあるスクリプトファイルを読み込んで実行します。更新は自動的に反映されるのでバージョンアップ時に再登録する必要はありません。

v.0.2.0（2020年11月2日更新）の主な変更点

U-フレットでレイアウトを壊していたのを修正

v.0.1.9（2020年11月2日更新）の主な変更点

music.oricon.co.jpが使用する禁止手法に汎用的に対応しました。

v.0.1.8（2019年9月15日更新）の主な変更点

J-Total Music でマウスで歌詞が選択できなかったバグを修正

v.0.1.5（2019年7月7日更新）の主な変更点

ChordWikiで歌詞部分も印刷できるようにした
U-フレット印刷時ページ上端でコードが欠けないようにした
スクリプトファイルのサーバーをgithackからgithubに変えた。これで自動更新が可能になった

v.0.1.4（2019年7月5日更新）の主な変更点

U-フレットの画面表示を変更することで印刷ができるようにした。動画プラス未対応。またieは印刷不可。U-フレット印刷はこちらで別途対応
U-フレットでの選択/コピーをfirefoxでもできるようにした
google検索結果の歌詞直接表示を印刷できるようにした
androidでも印刷できることを確認した

v.0.1.3（2019年7月2日更新）の主な変更点

歌ネットと歌詞GETモバイル版で選択/コピーができるように修正した
歌詞ナビを印刷できるよう修正した
うたまっぷを印刷できるようにした
スクリプトファイルのサーバーをrawgitからgithackに変えた

動作確認したサイトは以下の通り。（2019年7月5日現在）
「RV可」のサイトはFirefoxのリーダービューで歌詞が見れます。リーダービューはページをテキスト主体に簡素化して表示する機能で選択/コピー/右クリック/印刷が可能です

コード譜サイト

コード譜/タブ譜印刷用簡潔表示ブックマークレットを公開しました

J-Total Music music.j-total.net（RV可）
楽器.me gakufu.gakki.me（RV可）
U-フレット www.ufret.jp （印刷できるようにするため画面表示を変更します。動画プラス未対応。ieは印刷不可。RV可）
ChordWiki ja.chordwiki.org（RV可）

歌詞検索サイト

J-Lyric.net j-lyric.net（RV可）
歌詞タイム www.kasi-time.com（RV可）
歌ネット www.uta-net.com（RV可）
歌ネットモバイル sp.uta-net.com
歌詞ＧＥＴ www.kget.jp（RV可）
歌詞ＧＥＴモバイル m.kget.jp（RV可）
Mojim mojim.com（印刷時歌詞が途切れます。RV可）
UtaTen（うたてん） utaten.com
ORICON www.oricon.co.jp（RV可）
歌詞ナビ kashinavi.com
ROCK LYRIC rocklyric.jp（RV可）
JOYSOUND.com www.joysound.com（印刷時歌詞が途切れます）
うたまっぷ www.utamap.com
うたまっぷモバイル sp.utamap.com（RV可）
google検索結果歌詞直接表示 www.google.com

＊手間を省くためインラインコード版の掲載はやめました。

Firefoxのリーダービュー機能について

リーダービュー機能はページをテキスト主体に簡素化して表示する機能です。すべてのページで可能なわけではなく例えば動画メインのページはだめです。ブラウザがページを解析してリーダービューが可能なときはアドレスバーの右端にノートのアイコンを表示します。
リーダービューでは選択/コピー/右クリック/印刷ができます。

通常表示

それをクリック/タップするとリーダービューに切り替わります。

リーダービュー表示

もう一度クリックすると通常の表示に戻ります。
ついでにFirefoxネタをもう一つ。
PC版FirefoxではShiftキーを押しながら右クリックで常に（多分）コンテキストメニューを表示できます。

2017年5月8日月曜日

動画に経過時間(時:分:秒:ミリ秒)を入れる

ffmpegで動画に経過時間(時:分:秒:ミリ秒)を入れる

ffmpeg -i in.mp4 -vf drawtext=fontfile=/Windows/Fonts/arial.ttf:text=%{pts\\:hms}:fontsize=72:fontcolor=white:x=w-tw:y=10 out.mp4

＊フォントのパスにドライブ名を指定したいときは
fontfile=C\\:/Windows/Fonts/arial.ttf

(元動画は動画素材.comから

登録: 投稿 (Atom)