コード on qwerty.work

YouTube埋め込みコードに自動再生や字幕の設定をするパラメータ例

Wed, 20 May 2020 22:56:42 +0900

動画の初期設定をあらかじめ指定したい

サイトに埋め込んだ外国のYouTube動画の再生時に、いちいち翻訳字幕の設定するのは煩わしいので、**『はじめから翻訳をONにしてサイトに埋め込むことはできないのかな？』**と思って検索したら方法があったのでメモ。

参考サイト

https://support.google.com/youtube/answer/171780?hl=ja https://support.google.com/youtube/answer/171780?hl=ja

https://wisdommingle.com/youtube-embedded-player-parameter-customize/ https://wisdommingle.com/youtube-embedded-player-parameter-customize/

複数のSNSボタンのJavascriptをスッキリまとめて高速化

Mon, 12 Mar 2018 21:03:38 +0900

Facebool、Twitter、Google+、はてなブックマーク、Pocket、LINEなどのSNSボタンをページに設置する際、SNSそれぞれのJavascriptコードが必要ですが、複数あるのでページのソースがごちゃごちゃになります。

それを簡潔なjavascriptコードでコンパクトにする方法を見つけたのでメモ。

コードをまとめることによって重複コードがなくなり、ソースの文字数が減るのでページ表示の高速化になるかと思います。

まとめた場合のコード

コードはページのどこに書いてもいいのですが、の直前に書くほうがページ表示の高速化につながります。

<script type="text/javascript">
	(function(w,d){
		w.___gcfg={lang:"ja"};
		var s,e = d.getElementsByTagName("script")[0],
		a=function(u,f){if(!d.getElementById(f)){s=d.createElement("script");
		s.src=u;s.async=true;if(f){s.id=f;}e.parentNode.insertBefore(s,e);}};
		a("//connect.facebook.net/ja_JP/all.js#xfbml=1","facebook-jssdk");
		a("//platform.twitter.com/widgets.js","twitter-wjs");
		a("https://apis.google.com/js/plusone.js");
		a("//b.st-hatena.com/js/bookmark_button.js");
		a("https://widgets.getpocket.com/v1/j/btn.js?v=1");
		a("//media.line.me/js/line-button.js?v=20140411");
	})(this, document);
</script>

GoogleAnalyticsも含める場合

<script type="text/javascript">
	(function (w, d) {
		w._gaq = [["_setAccount", "UA-xxxxxxx-x"],["_trackPageview"]];
		w.___gcfg = {lang: "ja"};
		var s, e = d.getElementsByTagName("script")[0],
		a = function (u, i) {
			if (!d.getElementById(i)) {
				s = d.createElement("script");
				s.src = u;
				s.async = 1;
				if (i) {s.id = i;}
				e.parentNode.insertBefore(s, e);
			}
	};
	//GoogleAnalytics
	a(("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js","ga");
	//Facebook
	a("//connect.facebook.net/ja_JP/all.js#xfbml=1","facebook-jssdk");
	//Twitter
	a("//platform.twitter.com/widgets.js","twitter-wjs");
	//GooglePlus
	a("https://apis.google.com/js/platform.js");
	//Hatena
	a("//b.st-hatena.com/js/bookmark_button_wo_al.js");
	//Pocket
	a("https://widgets.getpocket.com/v1/j/btn.js");
	//LINE
	a("//media.line.me/js/line-button.js?v=20140411");})(this,document);</script>

SNSボタンの表示部分

ソーシャルボタンを表示したい部分に書きます。だけは直下が望ましいです。

<div id="fb-root"></div>
<ul>
	<li><div class="fb-like" expr:data-href="data:blog.url" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"/></div></li>
	<li><a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count='vertical'>Tweet</a></li>
   <li><div class="g-plusone" data-size="tall" data-href="ページのURL" ></div></li>   <li><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="ページのタイトル" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>
	<li><a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en" data-save-url="ページのURL"></a></li>
	<li><span><div class="line-it-button" style="display: none;" data-type="share-a" data-lang="ja"></div>
		<script src="//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js" async="async" defer="defer"></script></span></li>
</ul>

参考ページ

https://log-file.net/wordpress/speedup-1190 https://log-file.net/wordpress/speedup-1190

http://requlog.com/self-branding/wordpress/facebook-fast-display/ http://requlog.com/self-branding/wordpress/facebook-fast-display/

http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/asynchronous-loading-of-major-social-buttons/ http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/asynchronous-loading-of-major-social-buttons/

SyntaxHighlighterでWindowsバッチファイルのソースコードやコマンドを装飾表示できるようにするshBrushBat.js

Mon, 09 Oct 2017 22:39:10 +0900

WEBサイトでソースをきれいに表示してくれるSyntaxHighlighterですが、コマンドプロンプト（DOS）の**バッチファイル（bat, cmd, com）のソースは標準で対応していません。でも、別でWindowsバッチファイル用のBrushファイル（shBrushBat.js）**を読み込ませれば対応できるようです。その方法を教えてくれる参考サイトをメモ。実際に組み込んだら成功しました。

shBrushBat.jsのダウンロード先と参考サイト

/dev/null &"); ?> /dev/null &"); ?> /dev/null &"); ?>

SyntaxHighlightersa作者のページ

/dev/null &"); ?> /dev/null &"); ?>

SyntaxHighlighterと類似の他のハイライター

highlight.js

参考サイトの説明によると12KBと超軽量で行番号表示がないなど、シンプルでいいらいい。

/dev/null &"); ?> 参考サイト /dev/null &"); ?>

Prism.js

/dev/null &"); ?> 参考サイト /dev/null &"); ?>

code prettifier（Google）

/dev/null &"); ?>

改ざんで挿入されたPHPコードをDreamWeaverと正規表現で削除

Sun, 05 Mar 2017 18:43:58 +0900

ホームページのメンテをしていたら見覚えのないPHPのコードを発見。

$wp_salt,$wp_addfilter,$wp_saltと**$wp_が付く変数からしてWordPress絡みで改ざんされたっぽいです。一体どうやって改ざんするのかスゴイなと感心しながら、DreamWeaverで $wp_addfilter = create_function( **を検索してみました。

するとWordPressとは関係のない約130個のPHPファイルがヒットしました。

WordPressはたまにアップデートをするくらいで設置してからほとんど使うことはなく放置状態で、挿入されたコードの目的もよくわかりませんが、放置する訳にはいかないので削除することにしました。約130ファイルを手作業で削除することもできますが面倒なので、正規表現で削除することにしました。

ところが正規表現が超苦手で自力で条件を書くことができないのでヒントが無いか検索して以下のコードにたどり着いたのでメモ。たどり着くのに時間がかかったので手作業で削除したほうが早かったかもしれません…。

検索条件（正規表現）

以下の**"$md5 =** “と数回ある改行を含む一番最初の****という条件で改ざんコードを削除できました。

うまくいった検索条件

<\?php\r\n\$md5 \= \"(.*\r\n){0,10000}.*?\'\);\r\n\?>\r\n

もっと効率のいい条件があると思いますが、自分にはこの条件を作るのが精いっぱいで、これ以上の説明もうまくできません。

もともと参考にした条件

いろいろ検索して拾ってたき正規表現を使った検索条件です。これは複数回の改行を含むを全部検索対象にするものです。これを元に上記に変更しました。

<\?php(.*\r\n){0,10000}.*?\?>

検索および置換の実行

**「正規表現を使用」にチェックを入れて「すべて置換」**を押します。

実行した結果、以下のように約130ファイルから改ざんコードをスッキリ削除できました。

置き換え前

改ざんされて先頭行にPHPのコードが挿入されたもの。

置き換え後

挿入されていたコードをすっきり削除できました。