y.okano blog: 1月 2015

2015年1月29日木曜日

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>

2015年1月23日金曜日

2015年1月21日水曜日

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

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

2015年1月20日火曜日

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

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

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

2015年1月19日月曜日

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

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

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

2015年1月18日日曜日

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

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

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

2015年1月17日土曜日

HHKB Lite 2 for Mac の掃除法

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

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

HHKB Lite 2 for Mac

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

Pro を買おうか考え中

2015年1月16日金曜日

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>

2015年1月15日木曜日

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

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

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

のように使用できる。

2015年1月14日水曜日

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

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

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

2015年1月13日火曜日

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

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

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

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

2015年1月12日月曜日

Pages: 行間の設定

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

箇条書きの行間も同じ。

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

2015年1月11日日曜日

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

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

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

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

collapsArch('useCookies=0');

2015年1月10日土曜日

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

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

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

2015年1月9日金曜日

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;
  });
}

2015年1月8日木曜日

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

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

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

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

2015年1月7日水曜日

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

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

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

2015年1月6日火曜日

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

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

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

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

2015年1月5日月曜日

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

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

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

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

2015年1月4日日曜日

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

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

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

2015年1月3日土曜日

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

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

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

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

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

2015年1月2日金曜日

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

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

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

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

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

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

2015年1月1日木曜日

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

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

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

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