WordPress – Faviconの追加

2016-07-19 / tau / コメントする

概要

WordPressで作っているサイトのアイコン(ブラウザのお気に入りなどで表示される小さいアイコン)が透過色の書類マークのままで殺風景なので、自分用のFaviconを作って適用してみた。

Faviconとは、Favorite Iconの略だそうである。

アイコン画像の準備

アイコン画像を作成し、透過色を指定してPNGやGIFで保存する。

今回は、PowerPointで作成した図柄をPNG形式で保存し、ペイントアプリケーションで切り取ってPNG形式で保存。

透過色の指定は、Exce使った方法で行った。

icoファイル化

FavIcon from Picsというサイトで、PNGファイルをicoファイル化。Webサイトにファイルをアップロードし、変換されたファイルをダウンロード。

WordPressへのFaviconの登録

Faviconファイルやその元となったファイルをWordPressのメディアに登録。

テーマのheader.phpを編集する方法とプラグインを利用する方法があるが、今回はFavicon Rotatorというプラグインを使った。

Favicon RotatorをインストールするとWordPressの”外観”メニューに”Favicon”メニューが追加されるので、それをクリック。

ファイルを新たにアップロードするとメディアに追加されるが、ここでは先にメディアに追加済のicoファイルを指定。

これでお気に入りに表示されるFaviconが変更される。

WordPressでCanvas要素が消える

2016-07-19 / tau / 4件のコメント

消えるcanvas

WordPressのテキストモードでcanvas要素を書いて、ビジュアルモードに切り替えてもう一度テキストモードに戻ったとき、canvas要素が消えてしまうことがあった。

いろいろと試しているうちに、以下のような挙動があることがわかってきた。

<canvas>タグと</canvas>タグを直接一行でつないだ時に消えるらしい
canvas要素の前後が空行かどうかでも結果が変わるらしい

そこで、タグの書き方と前後の空行の入れ方の組み合わせで、canvasが消えるかどうかをチェックした。

canvasが消える条件

<canvas></canvas>のように開始タグと改行タグが連続して書かれていて、なおかつ以下のケースの時にcanvas要素が消える。

ケース1：ファイルの中に単独で書いた場合

開始タグと終了タグが<canvas></canvas>のように連続しており、それのみがファイルの中に書かれている場合、ビジュアルエディタを経由すると要素が消える。行末の改行があってもなくても結果は同じ。

<!-- 改行なし -->
[ファイル開始]<canvas></canvas>[ファイル終了] 

<!-- 改行あり -->
[ファイル開始]<canvas></canvas>[改行]
[ファイル終了]

[ファイル開始]<canvas></canvas>[ファイル終了]

[ファイル開始]<canvas></canvas>[改行]

[ファイル終了]

ケース2：前後に空行がある場合

開始タグと終了タグが<canvas></canvas>のように連続しており、その行の前後に空行がある場合、ビジュアルエディタを経由すると要素が消え、&nbspに書き換えられる。

<!-- 前後に空行がある場合 -->
・・・前行

<canvas></canvas>

・・・後行

<!-- 以下のように書き換わる -->
・・・前行

&nbsp

・・・後行

・・・前行

・・・後行

・・・前行

&nbsp

・・・後行

実質的にファイルの中にcanvas要素のみがあることは稀なので、問題となるのは上記の”<canvas></canvas>の前後に空行がある場合”となる。

canvasが消えない条件

canvasが消えない条件は、上の「canvasが消える条件」の裏返しも含めて以下のようになる。

ケース1：開始タグと終了タグの間に文字があること

開始タグと終了タグの間に文字があれば、周辺条件がどうであってもcanvas要素は消えない。

canvas要素非対応のブラウザ対応のために、この方針をとることには意義がある。

ただし、間にある文字がスペースだけの場合は意味がなく、開始タグと終了タグが連続している場合と同様の結果になる。

<!-- 以下のようにすると、前後に空行があっても消えない -->

<canvas>a</canvas>

ケース2：開始タグと終了タグの間で改行されていること

開始タグと終了タグの間で改行されていれば、周辺状況がどうであってもcanvas要素は消えない。

canvas要素内に文を書かない場合は、簡易な一つの解決策。

ただし、開始タグと終了タグの間に空行が入っている場合は結果は複雑で、要素全体が消えたり、いずれかのタグだけが消えたりと結果は複雑になる。

<!-- 以下のようにしても、canvas要素は消えない -->

<canvas>
</canvas>

</canvas>

ケース3：前後に空行がないこと

前後に行があれば(どちらも空行でなければ)開始タグと終了タグが連続していてもcanvas要素は消えない。

ただし、確実にこの記述方法に拠ることを担保しがたい。

<!-- 前後が空行でなければcanvas要素は消えない -->
preceding line
<canvas></canvas>
succeeding line

preceding line

succeeding line

結論

以下の2つのうちいずれかを推奨。

開始タグと終了タグの間にcanvas非対応用の文を書く
開始タグ<canvas>の後で改行し、すぐ次の行に終了タグ</canvas>を書く

Windows – 透過色の図形

2016-07-19 / tau / コメントする

Windowsで透過色を含んだpngやgifファイルを作成するのに、同梱アプリケーションの「ペイント」では、疑似的にしか再現できない。

ネット上で調べると、以下のような方法があることがわかったので記録。

「ペイント」などで図形を描いて保存(pngやgifで）
図形ファイルをExcelで読み込み
「書式」→「色の変更」→「透過色を指定」
透過色に変更したい色の部分をクリック
web形式で保存し、必要なファイルを取り出す

WordPressでjQueryを使う場合

2016-07-02 / tau / コメントする

WordPressにはもともとjQueryがビルトインされて読み込まれるので、headセクションで読み込むとかjQueryサイトから引っ張ってこなくても、すぐに使えるらしい。

ただ、”$”が他のエイリアスになっているらしく、常套句である以下の表現は使えない。

$ ->
  jQuery構文

1 2	$ -> jQuery構文

これに対しては、最初のclosureの部分だけを書き換えれば、その中では”jQuery”→”$”と通常の構文が使えるとのこと。

jQuery ($) ->
  $("bra bra...

1 2	jQuery ($) -> $("bra bra...

この際、headerセクションでjquery関係のファイルを読み込む必要はない。

WordPressでonclickが消えてしまう

2016-07-02 / tau

たとえば以下のようにボタンを配置するために、エディタの”テキスト”モードで直接次のように打ち込む。

<input type="button" id="btn" value="Button" onclick="btnClick()" />

1	<input type="button" id="btn" value="Button" onclick="btnClick()" />

ここで一度ビジュアルモードに移ってから再度テキストモードに戻ると、onclickがきれいに消えている。

<input type="button" id="btn" value="Button" />

1	<input type="button" id="btn" value="Button" />

これを回避するのにテーマフォルダ下のphpを修正する方法があるらしいが、テーマを変更したらどうなるのかなど素人には不安なので、手っ取り早い回避策を2つ。

全体のページ構成を打ち込んでいった後、onclickなどの実装時以降、テキストモードからビジュアルモードに移らない
HTMLでonblickなどを使わず、jQueryのイベントハンドラを使う

なお、上のinputタグを”<…>”で書いても、ビジュアルモードを経由すると、”<… />”とW3Cに準拠した書き方になおされている。

jQueryのテスト

2016-07-01 / tau / コメントする

jQueryテスト

jQuery – イベント

2016-06-28 / tau / コメントする

ソース別イベント

個別イベントハンドラの一般形

要素に発生しうるイベントは下記一覧の通りで、イベントが発生した時、対応したハンドラが呼ばれる。

$(セレクタ).イベント名(コールバック)

1	$(セレクタ).イベント名(コールバック)

たとえばクリックイベントに対する処理の記述は以下の通り。

$("div").click ->
  # ここに処理内容を記述

1 2	$("div").click -> # ここに処理内容を記述

ただしこの形式のハンドラは、動的に追加された要素には対応していない。

マウスイベント

click	クリック時
dblclick	ダブルクリック時
mousedown	マウスボタンを押した時
mouseup	マウスボタンを離したとき
mouseover	マウスカーソルが要素内に入った時(子要素を含む)
mouseout	マウスカーソルが要素から出たとき(子要素を含む)
mouseenter	マウスカーソルが要素に入った時(子要素は除く)
mouseleave	マウスカーソルが要素から出た時(子要素は除く)
mousemove	要素内でマウスカーソルが移動した時
hover	mouseenter / mouseleaveを一つにまとめたもの
toggle	クリックの度に異なる処理を実行。v1.9以降廃止。

キーイベント

keydown	キーを押した時
keypress	キー入力があった時
keyup	キーを離した時
focusin	フォーカスされた時(子要素を含む)
focusout	フォーカスが外れた時(子要素を含む)

フォームイベント

focus	フォーカスされた時(子要素は除く)
blur	フォーカスが外れた時(子要素は除く)
change	内容が変更された時
select	文字が選択された時
submit	データ送信時

ブラウザイベント

resize	リサイズした時
scroll	スクロールした時
error	エラーが発生した時

ロードイベント

load	読み込みが完了した時
unload	ページから離れる時
ready	DOMの読み込みが完了した時

イベントハンドラ・アタッチメント

イベントハンドラを要素にアタッチするメソッド。

たとえばon()メソッドの書き方の一つとして以下がある。

$(探索範囲のセレクタ).on(イベント名, セレクタ, ハンドラ)

1	$(探索範囲のセレクタ).on(イベント名, セレクタ, ハンドラ)

on()メソッドのハンドラとして、1つのイベントオブジェクトを引数に持つ関数を指定する。

$("div").on "click", (evt) ->
  alert("clicked")

1 2	$("div").on "click", (evt) -> alert("clicked")

探索範囲を限定してオブジェクトを探索する場合は以下の構文を用いる。

  $("body").on "click", "h1", (evt) ->
    alert("click!")

1 2	$("body").on "click", "h1", (evt) -> alert("click!")

下表のbind～offまでのうち、現在はon/offメソッドのみ使えばよい。

また、on/offメソッドに指定できるイベントは、上記ソース別イベントの内、hoverとtoggle以外で指定する。

bind	jQueryで最初に登場したアタッチメント。動的な要素に対応していないため、v1.3でliveが導入される。
unbind	bindで設定された処理を解除。
live	動的な要素に対応したアタッチメント。処理負荷が高いため、v1.9で廃止された。
die	liveで設定された処理を解除。v1.9で廃止。
delegate	イベントの調査範囲を限定できるアタッチメント。v1.7で”on”に移行。
undelegate	delegateで設定された処理を解除。
on	イベントハンドラ・アタッチメントの最終形。
off	onで設定されたイベント発生時の処理を解除。
one	1回だけ利用できるイベント発生時の処理を設定。構文はonと同じ。
triggerHandler	要素に指定したイベントを発生させるが、要素に対するブラウザ標準の機能は実行されない。
trigger	要素に指定したイベントを発生させ、ブラウザ標準の機能も実行させる。

イベントオブジェクト

概要

イベントオブジェクトはイベントハンドラに必ず渡されるobjectオブジェクト。イベント発生ごとに作成される。

基本形のコンストラクタでは、引数にイベント名を指定して作成する。たとえばclickイベントに対応するイベントオブジェクトは以下の様に作成される。

jQuery.Event("click")

1	jQuery.Event("click")

プロパティ

e.type	イベントの種類
e.data	イベントハンドラに渡された情報
e.pageX	イベントが発生したX座標(ブラウザの座標系)
e.pageY	イベントが発生したY座標(ブラウザの座標系)
e.timeStamp	イベントが発生した時間(1970-01-01からのミリ秒)
e.which	正規化されたキーコード
e.result	直前に実行したイベントハンドラが返した値
e.namespace	名前空間に設定された名称
e.target	イベントが発生したDOM要素
e.currentTarget	現在のDOM要素
e.delegateTarget	デリゲート時の調査範囲のDOM要素
e.relatedTarget	イベントの発生に関連したDOM要素

メソッド

e.stopPropagation(): バブリング(親要素方向へのイベントの伝播)を停止。
e.stopImmediatePropagation(): バブリングとイベントハンドラの実行を停止。
e.preventDefault(): ブラウザ標準の機能を停止。
e.isPropagationStopped(): stopPropagation()メソッドが実行されたかを調査。
e.isImmediatePropagationStopped(): stopImmediatePropagation()メソッドが実行されたかを調査。
e.isDefaultPrevented(): preventDefault()メソッドが実行されたかを調査。

jQuery – メソッド

2016-06-28 / tau / コメントする

値の取得

メソッドを通して、オブジェクトの持つプロパティなどを取得する。

$(セレクタ).メソッド(引数)

1	$(セレクタ).メソッド(引数)

※引数がない場合もある。

<h1 id="header">jQueryテスト</h1>

<script type="text/coffeescript">
$ ->
  console.log($("h1").text())
</script>

<h1 id="header">jQueryテスト</h1>

$ ->

console.log($("h1").text())

</script>

オブジェクトの操作

メソッドによりオブジェクトにプロパティを設定したり、動作させたりする。

$(セレクタ).メソッド(引数)

1	$(セレクタ).メソッド(引数)

※引数がない場合もある

<h1 id="header">jQueryテスト</h1>

<script type="text/coffeescript">
$ ->
  $("h1").hide(3000)
</script>

<h1 id="header">jQueryテスト</h1>

$ ->

$("h1").hide(3000)

</script>

イベント処理

構文1

オブジェクトに発生したイベントに対応して呼び出されるハンドラで、引数に処理を記述。

この構文では、後から動的に追加された要素には対応できない。

$(セレクタ).イベントハンドラ(コールバック)

1	$(セレクタ).イベントハンドラ(コールバック)

ハンドル用の関数を別に定義して引数に関数名を書いてもよいが、多くの場合無名関数が使われる。

$ ->
  $("h1").click ->
    console.log("click!")

$ ->

$("h1").click ->

console.log("click!")

構文2

動的に追加された要素にも対応するため、イベントが発生するたびに指定された範囲内でセレクタで指定されたオブジェクトを探索する。

この場合のon()メソッドは”イベントハンドラ・アタッチメント”の一つで、特定のイベントとそれに対するハンドラを結び付ける機能を持つ。

$(探索範囲のセレクタ).on(イベント名、セレクタ、ハンドラ)

1	$(探索範囲のセレクタ).on(イベント名、セレクタ、ハンドラ)

イベント名とセレクタは文字列で指定。

以下の例では、body要素の中の任意の要素がクリックされるとalertが立ち上がる。この場合は、H1、H2のいずれをクリックしてもalertが立ち上がる。

<body>

<h1>H1</h1>
<h2>H2</h2>

<script type="text/coffeescript">
$ ->
  $("body").on "click", (evt) ->
    alert("click!")
</script>


</body>

<body>

$ ->

$("body").on "click", (evt) ->

alert("click!")

</script>

</body>

また、on()メソッドの引数を以下のようにすると、H1をクリックしても反応せず、H2をクリックした時だけalertが立ち上がる。

  $("body").on "click", "h2", (evt) ->

1	$("body").on "click", "h2", (evt) ->

イベントの種類、イベントハンドラ・アタッチメントについては、jQueryのイベントを参照。

Linuxコマンド – chmod

2016-06-25 / tau / コメントする

概要

ファイルやディレクトリのパーミッションを変更する。パーミッションは記号または数値で指定する。

記法

chmod [-cfvR] [モード] [ファイル]

1	chmod [-cfvR] [モード] [ファイル]

オプション

-c	権限変更されたファイルのみ詳細に表示
-f	権限変更できなかった場合もエラーメッセージを表示しない
-v	経過を表示
-R	ディレクトリとその下のファイルを再帰的に変更

記号モード(シンボリックモード)

[ugoa][+-=][rwx]

1	[ugoa][+-=][rwx]

記号の意味

u	所有者の権限
g	グループの権限
o	その他のユーザの権限
a	全てのユーザの権限
無指定	a(全てのユーザ)と同じ意味
+	指定したユーザに後に記述した権限を付加する
–	指定したユーザから後に記述した権限を削除する
=	指定したユーザの権限を後に記述した権限に変更する
r	読み出し権限
w	書き込み権限
x	実行権限

使用例

全てのユーザに実行権限を与える。

chmod a+x [ファイル]

1	chmod a+x [ファイル]

グループとその他のユーザから書き込み権限を削除する

chmod go+w [ファイル]

1	chmod go+w [ファイル]

絶対モード

u, g, oそれぞれのrwxのパターンに対応した0～7の8進数で指定。

(u)[0～7](g)[0～7](o)[0～7]

1	(u)[0～7](g)[0～7](o)[0～7]

—	0
–x	1
-w-	2
-wx	3
r–	4
r-x	5
rw-	6
rwx	7

対応例

-rw-r—–	640
-r——–	400
-rwxrwxrwx	777

HTML – input

2016-06-25 / tau / コメントする

概要

input要素はフォームを構成する各種入力部品を作成する際に使用する。

書式

<input type="type" id="id" name="name" ...>

id属性

id属性によってlabelとinput要素を関連付け（labelをクリックしたときにinputと同様の反応をさせるなど）。

name属性

ラジオボタンやチェックボックスを一つのグループとしてまとめる

type属性

input要素のtype属性で部品の種類を指定し、部品のタイプに応じた属性でそれぞれの設定を行う。

ype属性のデフォルトは”text”。

“button”	汎用ボタン
“checkbox”	チェックボックス
“color”	カラーピッカー
“date”	日付選択
“email”	メールアドレス入力に特化
“file”	ファイルの選択
“hidden”	非表示の隠しデータ
“image”	画像ボタン
“number”	スピンで整数の選択
“password”	パスワード入力に特化
“radio”	ラジオボタン
“range”	スライダーで数値を選ぶ
“submit”	送信ボタン
“text”	一行テキストボックス
“time”	時刻選択

【注】

emailはフォーム内のsubmitボタンを押したときに内容をチェックする
resetは非推奨とされているので載せていない。

任意属性

type=”…”: MIMEタイプを指定
media=”…”: メディアクエリ(初期値は”all”)
hreflang=”…”: 外部リソースの言語を指定
sizes=”…”: アイコンなどのサイズを指定