Illustrator で線の色を取得

左下の塗り・線の色で、アクティブになっている方がスポイトツールで取得される。

塗りがアクティブの時は、中の色が取得される。

線がアクティブの時は、線の色が取得される。

iOSシミュレータがスローモーションになる

Debug → Slow Animations にチェックが入っているとスローモーションになる。
⌘T で切り替わる。

Mac: プレビューで gif として書き出す

Alt キーを押しながらファイルタイプを選択すれば出てくる

参考
Macで最も簡単にGIF画像への変換を行う方法
http://www.msng.info/archives/2013/03/gif-with-mac-preview.php

Bitbucket のリポジトリ名を変更する

リポジトリを選択後、
左側メニューの Setting から変更可能。

Illustrator CC: 「等間隔に分布」が表示されない

メニューからウィンドウ→整列で整列パネルを表示する。

パネル右上のボタンを押して「オプションを表示」から表示できる。

Illustrator CC: オブジェクトを縦横に揃える

オブジェクトを選択した状態で、
右上の「整列」リンクをクリックするとパネルが出てくる。

Illustrator CC: 行間の設定

Illustrator CC 18.1.1 の場合

文字を選択した状態で、
画面上部の「文字」をクリックすると文字パネルが出てくる。
文字パネルで行間が設定できる。

PHP: shell_exec() で日本語が文字化けする

PHP の shell_exec() で日本語が正しく処理されない場合の対処。

環境変数 LANG が正しく設定されていない可能性あり。
コマンド実行時に設定すればよい。

shell_exec('export LANG=ja_JP.UTF-8; my_command...');

Mac で PhantomJS が Killed: 9

公式で配布されているパッケージからインストールすると発生する。
MacPorts や Homebrew からインストールすると実行できる。

MacPorts の場合

$ sudo port install phantomjs
...

$ phantomjs
phantomjs>

Mac OS X Yosemite (10.10.3) で PhantomJS をコマンドラインで実行すると
「Killed: 9」と表示されて動作しないケース。

$ phantomjs
Killed: 9

参考
OS X binary does not work on Snow Leopard and Yosemite #12900
https://github.com/ariya/phantomjs/issues/12900

WordPress: Advanced Custom Filed で画像URLを選んでも画像IDが帰ってくる

Advanced Custom Field で設定した値を読み込む場合は、
get_post_meta() ではなく、Advanced Custom Filed の API である get_field() を使う。
http://www.advancedcustomfields.com/resources/get_field/

// デフォルトの関数だと画像 ID が帰ってくる
$url = get_post_meta($post->ID, 'my_custom_image', true);

// 専用の API で取得すると戻り値の設定が有効になり画像 URL が帰ってくる
$url = get_field('my_custom_image', $post->ID);

amazon: 過去に注文した商品の領収書を発行する

アカウントサービス → 注文履歴を見る
から過去に注文した商品の領収書を発行することができる。
（ブラウザに表示されたものを印刷して使用する）

phpMyAdmin: 大きな SQL ファイルがインポートできない

 SQL をインポートしようとした時に以下のエラーが発生

Warning: POST Content-Length of 10025724 bytes exceeds the limit of 8388608 bytes in Unknown on line 0
アップロードしようとしたファイルが大きすぎるようです。この制限に関する対策については ドキュメント をご覧ください。

php.ini でアップロードできるファイルサイズと、
POST で送信できるデータサイズを大きくすると解消できる。

# アップロードできるファイルサイズを増やす
upload_max_filesize = 50M

# POST で送信できるデータサイズ
post_max_size = 50M

WordPress: エディタに設定した padding が無視される

WordPress のデフォルトのスタイルに !important が付加されているため、

editor-style.css などで設定したスタイルが無視されている可能性が高い。

該当するスタイルに !important を付加して、

優先順位をデフォルトのスタイルよりも高く設定すれば反映される。

body#tinymce.wp-editor {
    background-color: #FFFFFF;
    padding: 55px 12px 50px 12px !important;
    width: 642px;
}

Apache: さくらのレンタルサーバで「options not allowed here」

別サーバからさくらのレンタルサーバへファイルを移行した際に、
タイトルのエラーが発生して 500 （Internal Server Error）を返すようになった。

原因は .htaccess 内で「Options +FollowSymLinks」が存在していたこと。
さくらのレンタルサーバ上では上記オプションが使用できずエラーになるらしい。
該当箇所をコメントアウトしたところページが表示されるようになった。

Options +FollowSymLinks
↓
# Options +FollowSymLink

WordPress: 投稿のアイキャッチ画像を設定できるようにする

WordPress の投稿にはアイキャッチ画像を設定できる。

デフォルトでは設定するインタフェースが表示されていないが、
テーマ内の functions.php に以下のコードを追加すると表示される。

if(function_exists('add_theme_support')) {
    add_theme_support('post-thumbnails');
}

add_theme_support()
http://wpdocs.sourceforge.jp/関数リファレンス/add_theme_support

HTML: JavaScript で書き換えられる前のソースコードを取得

ページ読み込み時に JavaScript が HTML の内容を書き換えることで、
広告や Twitter のタイムラインを表示するページが多くある。

サイトの移植などで、元のファイルに直接アクセスできず、
ブラウザのデバッグツールで HTML 等をコピーしてくる場合、
JavaScript の使用をOFFにした状態でデバッグツールから HTML を取得すると、
JavaScript で書き換えられる前の元のソースコードを取得することができる。

広告や Twitter タイムラインなど、
読み込み直後に書き換えられるページを移植する場合に便利。

Chromeアプリ: <webview>はドキュメントに追加されたときに動作する

JavaScript でオブジェクトを作成した際にはロードされない。
DOM に追加されてはじめて src が読み込まれる。

// ここでは読み込まれない
var webview = $('<webview src="http://yokano-jp.blogspot.jp/"></webview>');
webview.on('loadstop', function() {
    console.log('loaded');
});

// ここではじめて読み込まれる
$('body').append(webview);

Mac: Numbers で連番を作成

Excel の場合は連番になっているセルを選択して、
右下のハンドルをドラッグすると連番を作成できた。

Numbers の場合は連番になっているセルを選択して、
下部中央の黄色いハンドルをドラッグすると連番を作成できる。
右下の白いハンドルは違うので注意。

Chrome: 見えない <webview> で操作を行う

Chrome アプリ内に見えない <webview> を設置したい場合は、

幅と高さを 0px にすればよい。

<webview src="http://hogehoge.com/" style="height: 0px; width: 0px;"></webview>

display: hidden; にすると埋め込んだスクリプトが実行されなくなるので注意。

<webview src="http://hogehoge.com/" style="display: none;"></webview>

jQuery：onclick イベントが動作しない場合

jQuery() から要素をクリックする場合は以下のように .click() や .trigger('click') が使用できる。

// .click() を使う場合
$('#my_element').click();

// .trigger() を使う場合
$('#my_element').trigger('click');

しかし、詳しい原因はわかっていないが上記の処理で発動しないケースがあった。
その場合は、DOM を取得して DOM の .click() を実行すると通る場合がある。

// DOM の click() を呼び出す
$('#my_element').get(0).click();

Chrome アプリ：<webview> から親要素へオブジェクトを渡す

Chrome アプリの <webview> から親要素（embedder）にデータを渡す際に console.log() を使う方法がある。

<webview> 内で console.log() を使用すると、<webview> の consolemessage イベントが実行される。

JSON データを console.log() で出力して、親側で受け取れば複雑なオブジェクトも渡すことができる。

親要素側

var webview = $('#my_webview');
webview.on('consolemessage', function(e) {
    var message = e.originalEvent.message;
    try {
        var datas = JSON.parse(message);
        console.log(' からデータを受け取りました', datas);
    } catch(e) {
        console.log(' からログが発行されました', message);
    }
});

webview 側

var result = {
    id: 1,
    value: 1234
};
var json = JSON.stringify(result);
console.log(json);

JavaScript: <input type="image"> で座標を送る

<form> 内の <input type="image"> は画像をクリックした時の、
マウスカーソルの座標（画像の左上の 0,0 とする相対座標）も送信する。

jQuery でお手軽にクリックイベントを実行すると、
座標として x = 0, y = 0 が送られる。

JavaScript による自動クリックの対策として、
<input type="image"> のクリック時の座標がセットされていることや、
(0, 0)以外の座標でなければリクエストを拒否するサイトも存在する。

JavaScript から座標をそれっぽく送りたい場合は、
createEvent() と initMouseEvent() で
座標を指定したマウスクリックイベントを作成・実行すれば良い。

// 検索ボタン(をクリックする場合)
var searchButton = document.querySelector('input[name=search]');
var event = document.createEvent('MouseEvents');
event.initMouseEvent(
 'click',
 true,
 true,
 window,
 0,
 0,
 0,
 $(searchButton).position().left + 15,  // X = 15
 $(searchButton).position().top + 15,  // Y = 15
 false,
 false,
 false,
 false,
 0,
 null
);
searchButton.dispatchEvent(event);

参考
<input type=image>で送信すると、X,Y座標が送信されるので、調べたら闇だった | それマグで！
http://takuya-1st.hatenablog.jp/entry/2014/12/05/145944

Word：改行記号を非表示にする

MS Word 2013 の場合
ファイル → オプション → 表示 → 常に画面に表示する編集記号
段落記号をOFF

Word のオートシェイプなどで作成した図形は、
Web 用に保存を選択しても画像として出力されない。

Word の画面を直接スクリーンショットで撮影して、
ページに貼り付けてしまうのが早い。

スクリーンショットを取る場合には、
波線や改行記号が邪魔になるため非表示にした状態で撮影したほうが良い。

Chromeアプリ：<webview>を使ったセッション(Cookie)の共有

Chrome アプリでは外部サイトを表示するために <webview> が使用できる。
ただし会員サイトなどログインが必要な場合など、
ログイン状態を保存するために Cookie を複数の <webview> で保存したい時がある。

<webview> の partition 属性に共通した文字列を渡しておくと、
複数の <webview> 間で Cookie が共有されるようになる。

<webview id="foo" src="http://www.google.com/" style="width:640px; height:480px" partition="persist:googlepluswidgets"></webview>

webview Tag - Google Chrome
https://developer.chrome.com/apps/tags/webview

jQuery: 要素内の HTML を無視したテキストを取る

.html() だと HTML を含めた内容を取れる。
.text() だと HTML を無視した内容を取れる。

HTML
<div id="my-div">Hello <strong>World !</strong></div>

$('#my-div').html();  // Hello <strong>World !</strong>
$('#my-div').text();  // Hello World !

Facebook はコンソールに盛大に警告を出している

Facebook ログインページで Web ブラウザのデバッグコンソールを出すと、
盛大に警告される。

コンソールに JS を貼り付けて、
アカウントの乗っ取りなどがされないように注意文を書いている。

Chrome アプリ：<webview> は描画されていなくても動作する

<webview> では partition を設定することでクッキーの保存が可能であるため、

ログインした状態でセッションを継続させるために利用できる。

<webview> に外部サイトのログイン画面を表示して、

JavaScript でフォーム入力・送信すれば自動的にクッキーが <webview> に保存される。

これらの処理は <webview> を隠した状態で動作させられる。

例えば height: 0px にしたり、visibility: hidden; を指定すれば良い。

/* CSS */
#my-webview {
    display: hidden;
}

<!-- HTML -->
<webview id="my-webview" src="http://target-site.com/login" partition="persist:googlepluswidgets"></webview>

/* JavaScript(jQuery) */
$('#my-webview').on('loadstop', function() {
    var doc = $(this.contentWindow.document);
    doc.find('#login-id').val('my_id');
    doc.find('#login-pass').val('my_pass');
    doc.find('#login-submit').click();
});

Chrome アプリ： 内の console.log() を jQuery で取得

Chrome アプリでは <webview> 要素を設置することで、
外部サイトをアプリ内に表示することができる。

<webview> 内で発生するイベントは、
<webview> を含む親（embedder）から JavaScript 経由で取得できる。

<webview> 内で console.log() を使用する場合は、
consolemessage イベントを使って親要素側で改めて出力しなければ確認できない。

jQuery の場合は originalEvent の中に入っているイベントから取得する必要がある。

var webview = $('#my-webview');

// webview 内で console.log() が使用されると consolemessage イベントが発生
webview.on('consolemessage', function(e) {
    // 引数内の originalEvent.message にメッセージが渡される
    console.log(e.originalEvent.message);
});

jQuery の .on() でバインドした場合は、
本来のイベントオブジェクトは originalEvent 内に格納されるので注意。

Chrome アプリ：外部サイトの表示

しばらく Chrome アプリ開発に集中していました。

Chrome アプリで外部サイトを表示したい場合は

<webview> 要素を使って実現できる。

<webview> は Chrome アプリでのみ使用可能。

<webview> Tag - chrome

https://developer.chrome.com/apps/tags/webview

<webview id="foo" src="http://www.google.com/" style="width:640px; height:480px"></webview>

ちょっとお休み

多忙のため来週頭まで更新休止します。

フレーム内でリンクした時にブラウザ全体を遷移させる

<iframe> や <frame> の内部でリンクを踏むと、
フレームの中身だけが書き換わる。

フレームを含む親も含めて丸ごと遷移して欲しい場合は、
<a> 要素の target 属性に _top を指定すれば良い。

<a href="http://yokano-jp.blogspot.jp/" target="_top"></a>

ガラケーのブラウザエミュレータ

Web ブラウザ上で確認できるもの
http://emu.mobile.goo.ne.jp/emu/emu.php

基本的に JavaScript は動かいないと考えたほうが良さげ

jQuery: 選択されたラジオボタンの取得

セレクタで :checked を使用するとチェックされている要素を取得できる。
必要であれば name 属性も指定する。

var selected = $('input[name="my_input"]:selected');
alert('選択されたのは' + selected.val() + 'です');

Mac：Kindle でログインできない

Mac App Store から Kindle アプリを落として使用しようとしたところ、
ログインで弾かれてしまった。

どうやら日本の Amazon アカウントだと入れないらしい。
iOS 版の Kindle であればログインできるので、
iPhone や iPad から読むことにする。

HHKB Lite 2 for Mac の掃除法

1. キートップを外す（細長いものをキーの下に入れてテコの原理で外れる）
2. 裏面のネジをすべて外す（１つはシールの裏側）
3. カバーをは外す
4. キートップとカバーを水洗い or 水拭き
5. 乾かす
6. カバーを装着
7. キートップを装着
8. 完了

今メインで使っているのがこちら

HHKB Lite 2 for Mac

http://www.pfu.fujitsu.com/hhkeyboard/lite2mac/

Pro を買おうか考え中

Bootstrap：テキスト入力とボタンを組み合わせる

Component の Input groups を使うと、複数の入力要素を組み合わせることができる。
例えばテキスト入力とボタンを組み合わせると以下のようになる。

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default">更新</button>
    </span>
    <input type="text" class="form-control">
</div>

JavaScript： Cookie を読み書きするときのライブラリ

Mozilla Developer Network で公開されているコードが非常に便利。
https://developer.mozilla.org/ja/docs/DOM/document.cookie

docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])

のように使用できる。

Chrome アプリ：クロスドメイン通信

Chrome アプリでは Ajax などでクロスドメイン通信が可能である。
マニフェストファイルの permissions の値として、
通信先のサーバを設定しておけばクロスドメイン通信できるようになる。
あとは $.ajax などなんでも良いので通信するだけ。

HTTP 通信のみであれば sockets を使う必要はない。

WordPress: 投稿タイプを変更する

プラグイン「Post Type Switcher」を入れると、
投稿の投稿タイプをあとから変更できるようになる。

プラグインを導入すると投稿の編集画面に、
PostType の項目が出現する。
ここから投稿タイプの振り分けが可能。
もちろんカスタム投稿タイプにも振り分けられる。

カテゴリが存在しないブログから、
WordPress へ記事をインポートした後に
特定の記事だけ別のカテゴリタイプに振り分けるといった場合に使用できる。

Pages: 行間の設定

行間の設定は、右上のフォーマットボタンを押して、
「間隔」の「段落の前」「段落の後」で設定できる。

箇条書きの行間も同じ。

最近は Pages を使っている状態。

WordPress: Collapsing Archives で折り畳み状態を保存しない

https://wordpress.org/plugins/collapsing-archives/
Collapsing Archives を使用すると、
月別アーカイブやカテゴリ一覧を折りたたみ可能な状態にできる。

関数で呼び出す場合はオプションを文字列で渡すことで、
動作を指定できる。

プラグインページには書かれていないが、
折り畳み状態を保存せず、毎回リセットするには userCookies をオフにすれば良い。

collapsArch('useCookies=0');

Chrome アプリ：複数のスクリプトを読み込む

manifest.json に複数の js ファイルを渡すと、
アプリ起動時に先頭から順番に読み込みを行ってくれる。
もちろん html ファイルから <script> で読み込んでも良い。

"background": {
  "scripts": [
    "foo.js",
    "background.js"
  ]
}

WordPress: collapsArch() が動かない

サイドバーに表示する月別アーカイブを折りたたみ可能にするために、
プラグイン Collapsing Archives を導入した。

ウィジットして折りたたみ可能なアーカイブを表示するのが基本的な使用方法だが、
プラグインの使用方法によると PHP の関数も使用できたので、
関数による呼び出しを試してみたところ、
クリックしても折りたたみが動作しなかった。

原因は Collapsing Archives が依存している jQuery のバージョンと、
サイトで読み込んでいる jQuery のバージョンが違ったこと。
今回は最新の jQuery に合わせてプラグインのファイルを書き換えることで対応した。

対象ファイルは wp-content/plugins/collapsing-archives/collapsFunctions.js

• live() 関数を on() 関数に変更（document にバインドして live と同じ動きにする）
• セレクタの id を削除

こんな感じで動くようになった。

function addExpandCollapse(id, expandSym, collapseSym, accordion) {
  jQuery(document).on('click', 'span.expand', function() {
    if (accordion==1) {
      var theDiv = jQuery(this).parent().parent().find('span.collapse').parent().children('div');
      jQuery(theDiv).hide('normal');
      jQuery(this).parent().parent().find('span.collapse').removeClass('collapse').addClass('expand');
      createCookie(theDiv.attr('id'), 0, 7);
      jQuery(this).parent().parent().find('span.sym').html(expandSym);
      //jQuery('#' + id + ' .expand .sym').html(expandSym);
    }
    expandArch(this, expandSym, collapseSym);
    return false;
  });
  jQuery(document).on('click', 'span.collapse', function() {
    collapseArch(this, expandSym, collapseSym);
    return false;
  });
}

WordPress: アーカイブで前後のページへ移動するリンク

date.php や archive.php, category.php などのアーカイブでは、
デフォルトで 1 ページに 10 記事までしか表示されない。

1ページに10記事以上存在する場合に、
前後のページへ移動するリンクは以下の関数で生成できる。

<?php previous_posts_link() ?>
<?php next_posts_link() ?>

Firefox: HTTP ヘッダをキャプチャする

Firefox のアドオン Live HTTP headers がオススメ。
ブラウザの HTTP リクエスト、レスポンスヘッダをリアルタイムに表示できる。
socket で HTTP ヘッダを作るときなどに便利。

Firefox にインストール後、
アドオンから Live HTTP headers の設定画面を開くとキャプチャできる。
ツールバーにボタンを設置しておくとすぐに起動できて便利。

iMac: メモリのフタが開かない

iMac 5K Retina のメモリを増設しました。

背面にあるメモリのフタを開ける必要があるのですが、
電源差し込み部分に付いているボタンを押しても開かずにあれ？という感じ。

ボタンはかなり押しこむ必要があり、指だと無理です。
自分は小さなフォークの柄の部分をぐいっと思い切り押し込んだところ開きました。
細長いものを準備しておくと良いです。

Mac: TimeMachine でファイルが存在しないといわれる

誤って削除してしまったファイルを復元するため、
TimeMachine で過去のファイルを復元しようとしたところ、
そのファイルはオリジナルが存在しないため復元できません、
エイリアスを削除しますか？と表示されました。

試しにファイルを作成した直後の日付まで戻してみると、
ファイルの復元が出来ました。

復元に失敗する場合は、
更に他の日付を試してみると良いです。

Steam：ライブラリのゲーム一覧を見やすく表示

Steam クライアントでライブラリを表示中に、
右上の表示モードからゲーム一覧の表示方法を変更できる。

一番右のグリッドビューにすると、
大量のゲームも見やすく表示できる。

Chrome アプリ：パッケージアプリから CDN で jQuery を呼び出せない

Chrome のパッケージアプリ（HTML, CSS, JS で構成されるアプリ）からは、
外部サーバ上の JS ファイルを直接読み込むことはできない。

これは CSP(Content Security Policy) として、
クロスサイトスクリプティングを防ぐために敢えて禁止されている。

CDN で jQuery などのライブラリを読み込みたい場合でも、
予めファイルとしてダウンロードしたものを、
パッケージ内にファイルとして設置して、それを読み込む必要がある。

詳細はこちら
https://developer.chrome.com/extensions/content_scripts

Chrome アプリ：アプリインストール時の処理

Chrome アプリをインストールした時に１度だけ実行される処理を作成できる。

onInstalled | developer.chrome.com
https://developer.chrome.com/apps/runtime#event-onInstalled

アプリ内のバックグランドスクリプトへ以下を追加する。

/**
 * インストールされた時の処理
 */
chrome.runtime.onInstalled.addListener(function() {
    // ここにインストール時の処理
});

アプリの設定データを Chrome 上に作成するなど、アプリの初期化を行う際に使用する。

iBooks：このコンピュータは認証されていません

別の Mac で購入したコンテンツを閲覧しようとしたところ発生。

iTunes を起動して Store > このコンピュータを認証
を選択して Apple のアカウントで認証するとダウンロードできるようになる。

詳細はこちら
http://support.apple.com/ja-jp/HT1420