emojioneを使う

開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。

1.サイトへアクセスする
GitHub - emojione/emojione: EmojiOne™ is the open emoji standard. #iwantemojione
2. /lib/js/emojione.min.jsへアクセスし、コピペしてemojione.min.jsという名前で保存する。
3./extras/css/emojione.min.cssへアクセスし、コピペしてemojione.min.cssという名前で保存する。
4.簡単なコードを書いてみる

<!-- headタグ部分 -->
<script src="jquery-3.2.1.min.js"></script>
<script src="emojione.min.js"></script>
<link href="emojione.min.css" rel="stylesheet">
<script>
$(function(){
	$(document).on('click','.emojione',function(){
		var i = $('.emojione').index(this);
		var title = $('.emojione').eq(i).attr('title');
		$('#add_emoji').append(emojione.toImage(title));
	});

	$("#emoji_btn").on('click',function(){
		$('#emoji').html( emojione.toImage($('#emoji').html()) );
	});

	$("#emoji_btn2").on('click',function(){
		alert( emojione.toImage($('#emoji').html()) );
	});
});
</script>

<!-- bodyタグ部分 -->
<input type="button" id="emoji_btn" value="絵文字変換">
<input type="button" id="emoji_btn2" value="HTMLチェック">
<div id="emoji" style="margin:10px;border:1px solid #eee;border-radius:5px;width:300px;">
:smile: :cry: :rage: :joy: :blush: :smirk: :heart_eyes: :fearful: :imp: :angry: :yum: :heart: :broken_heart: :thumbsup: :thumbsdown: :shit:
</div>
<div id="add_emoji"></div>

絵文字変換と書かれたボタンをクリックすると、文字列が対応した絵文字の画像に変換します。画像は持っていないのに、どこから入手しているかというと、CDN経由でダウンロードしているみたいです。別にサーバーを立ち上げた環境でやらなくても、ダウンロードできました。HTTP/2.0 304 Not ModifiledというHTTPステータスコードでした。

今度は、HTMLチェックと書かれたボタンをクリックすると、文字列が画像に置き換わっているHTMLコードが確認できます。

最後に、各絵文字の画像をクリックすると、下部に、その絵文字の画像と同じ画像が表示されます。

実行結果

絵文字の文字列が知りたければ、以下のサイトが参考になります。
Emoji cheat sheet for GitHub, Basecamp and other services

参考サイト
絵文字ライブラリ「Emoji One」がなかなか良さげ - Qiita

jQueryで要素の幅に応じて、コンテンツの位置を入れ替える

開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。

CSSだけで、要素の幅に応じて、2つのタグを交互に移動するみたいな機能が見つけても、なかったので、jQueryで作ってみた。目的は、レスポンシブで、要素を動かしたかったからです。

HTML側

<div id="size"><input type="button" id="pix" value="クリックして"></div>
<hr>
<div id="size2"></div>

jQuery側

$(function(){
	$(window).on('resize',function(){
		var p = "";
		if($(window).width() <= 560){
			if($('#size').html() !== ""){
				p = $('#size').html();
				$('#size').html("");
				$('#size2').html(p);
			}
		}else{

			if($('#size2').html() !== ""){
				p = $('#size2').html();
				$('#size2').html("");
				$('#size').html(p);
			}
		}
	});

	$(document).on('click', '#pix', function(){
		alert("pix");
	});
});

ボタンの位置を移動させても、クリックするとイベントはきちんと動く。

jQueryでウィンドウの幅を調べる

開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。

HTML側

<div id="size"></div>
<div id="size2"></div>

jQuery側

	$(window).on('load resize',function(){
		$('#size').html('windowの横幅:' + $(window).width());
		$('#size2').html('スクロールバーも含めたwindowの横幅:' + window.innerWidth);
	});

実行結果

参考リンク
jQueryで幅の取得と設定（width,innerWidth,outerWidth)
JQueryで読み込み時とリサイズ時にブラウザサイズに横幅を合わせる - Qiita

CakePHP3で部分テンプレート(エレメント)を使う

開発環境は、Windows 7 Professional(32bit)+XAMPP v3.22+CakePHP 3.5.8。

異なるページで共通するHTMLを部分テンプレートとして読み込みたいと思い、作り方を調べたのでメモ。サイトのデザインを大まかに決めたら一番初めに書いておくべきものだ。これによって、変更したい場合は、1か所のテンプレートを変更するだけで良くなるので便利だ。

ファイル名は任意で良いのですが、今回は、以下のファイルを、partial_template.ctpという名前で、src/Template/Elementディレクトリに保存する。

<div id="partial_template">部分テンプレートです。</div>

■呼び出す
テンプレート側で、

<?= $this->element('partial_template') ?>

と書いて出力すると部分テンプレートの中身が表示されます。

■テンプレートの変数を部分テンプレートに渡す場合

部分テンプレート側

<div id="partial_template"><?= $username ?>さん、こんにちは。</div>

テンプレート側

<?php
	$username = "taro";

	echo $this->element('partial_template', ['username' => $username]);
?>

呼び出しているテンプレート側でechoを用いて、出力していますが、部分テンプレート側でechoを使って、(echoの中でechoを使っているような構造だけれど)変数を表示してもエラーには特になりません。

さらに、エレメントの中にエレメントを記述して、多層構造のようにもできる。

参考リンク
CakePHPで部分テンプレート（エレメント）を使う - データ分析エンジニアのブログ
https://book.cakephp.org/3.0/ja/views.html#view-elements

自分用の正規表現メモ

■直前の文字がないか、1文字だけある場合
【例】URLで末尾に、/がある場合とない場合、2つ書かなくて、1本化できる。

?

参考リンク
正規表現を体系的に学ぶつもりがない人のためのプチ講座 - Qiita

JavaScriptで詰まったところ

■document.querySelectorAllで指定のCSSセレクタが存在するかチェックする

if(document.querySelectorAll('.element').length !== 0){
  console.log('.element exists.');
}

■ページ遷移せずにURLを書き換えるには？
・ページ遷移せずにURLを書き換えるにはhistory.pushState(state, title,url);を使います。
・以下のコードは、test.comであれば、ページ遷移をせずに、test.com/hogeに書き換えることになります。ただし、(ローカル環境か、ネット上にアップするかどちらかの)サーバーを立ち上げた環境でやらないとうまくいきません。

if( window.history && window.history.pushState ){
    window.history.pushState(null,'hoge','/hoge');
}

・URLが変更されて、戻るボタンを押すと、URLは変更されるけど、ページ自体は何も変わりません。ここで、現在のURLに応じて変化させたい場合は、popstateというイベントを使います。

$(window).on('popstate', function(e){
	// ここで進む/戻るボタンを押すたびに変化させたい処理を書きます。
        //現在のURLを表示させます。
	alert(location.href);
});

参考リンク
【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする | unitopi - ユニトピ -
JavaScriptでURLを操作するメモ - Qiita
16行 で pushState popState - Qiita
location.pathname－JavaScriptリファレンス

■ページ遷移せずに書き換える前のURLに戻るには？
・HTML5から、historyオブジェクトの履歴スタックにアクセスして、操作をできるようになったみたいです。

if(window.history && window.history.go){
	history.go(-1);
}

参考リンク
ブラウザの履歴を操作する - 開発者ガイド | MDN

Firefoxのアドオンを自作して遊ぶ

開発環境は、Windows 7 Professional(32bit) + Firefox 58.0.2(32bit) 。

ちょっとした思いつきだけれど、firefoxでアクセスしたページで、イノベーションという言葉を見つけたら、すべてをおちんちんという言葉に置換するアドオンを作ってみようと思いました。ジョークプログラムです。

1.Cドライブ直下に、test-addonディレクトリを作成する
コマンドプロンプトで以下のコマンドを入力する

cd c:\
mkdir test-addon

2.test-addonディレクトリの下に、以下のコードをmanifest.jsonという名前で保存する

{

  "manifest_version": 2,
  "name": "test-addon",
  "version": "1.0",
 
  "description": "Adds a solid red border to all webpages matching mozilla.org.",
 
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["test-addon.js"]
    }
  ]

}

3.test-addonディレクトリの下に、以下のコードをtest-addon.jsという名前で保存する

document.body.innerHTML = document.body.innerHTML.replace(/イノベーション/g, "おちんちん");

4.Firefoxを起動して、アドレスバーにabout:debuggingと入力する。

5.一時的なアドオンを読み込むボタンをクリックし、test-addon.jsを選択する。
※Firefoxを消すか、about:debuggingの削除ボタンをクリックするまで有効。

6.これで適当なサイトへアクセスすると、アドオンが反映される。今回は、イノベーションのWikipediaのページへアクセスする。

これを応用すれば、あらゆるWebサイトで自分にとって不快なキーワードはすべて、見ないようなアドオンが作れる。

参考リンク
初めての拡張機能 - Mozilla | MDN