2014年12月31日水曜日

年末

今年もあと3時間で終わりです。

1日1記事のブログが何故か今年は 367 件ありました。
来年も技術的な内容で、身についた知識を毎日メモしていきたいと思います。
読みに来てくれたみなさんありがとうございます。

ざっと今年の記事タイトルを見なおして、
新しく身についた技術のうち大きめのものは以下の様な感じでしょうか。

  • PhoneGap でアプリ開発(広告・課金)
  • WordPress (カスタマイズ・移植手法)
  • OAuth
  • Google API (Feed, Chart)
  • メールサーバ周り
  • Chrome アプリ
特に PhoneGap と WordPress が大分触ったソフトです。

PhoneGap は課金や広告など細かくやるため、
結局 Android の Java, iOS の Objective-C も手探りで触っていた感じです。
急いで作るなら便利ですが、やっぱりネイティブ勉強したいなという印象。

WordPress は HTML の自動整形処理で結構悩んだのですが、
試行錯誤したおかげで大分いじれるようになりました。


来年は WordPress 含む Web 関連は引き続き触りつつ、
スマホの方にもうちょっと慣れていきたいなぁという感じです。

2014年12月30日火曜日

Angular JS: ゲーム風のチュートリアル

Chrome アプリでシングルページアプリを作る必要があり、
公式マニュアルで推奨されていた Angular JS を使おうと思った。

以前触った時よりにはなかったチュートリアルが追加されており、
これがすごくわかりやすい。

SHAPING UP WITH ANGULAR.JS
http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro

動画を見る→コードを書く
を繰り返しながら進んでいくのだが、
課題をクリアするともらえるポイントを消費してヒントを得たりするなど、
ちょっとゲームっぽい感じで進めていくことができる。


どうやら code school という e-learning サイトの1コースっぽい。
多分ドットインストールに課題があるような感じだと思う。
https://www.codeschool.com

そのままウェブ上でコーディングして確認できるのがすごくいい。
そういえば Go 言語のチュートリアルもそのまま入力して実行できた。
https://tour.golang.org/welcome/1

2014年12月29日月曜日

Chrome アプリ:フレームなしウィンドウを作る

https://developer.chrome.com/apps/app_window#type-ContentBounds

ウィンドウを作成する際にフレームを付けるかどうかを指定できる。
デフォルトだとフレーム付きのウィンドウが作成される。

ウィンドウ作成時に frame: "none" を渡すとフレーム無しで作成できる。
chrome.app.window.create('test.html', {
    bounds: {
        width: 640,
        height: 480
    },
    frame: 'none'
});


2014年12月28日日曜日

Chrome アプリ:文字化けが発生する

Chrome アプリで HTML, CSS, JavaScript を使用するパッケージアプリの場合、
HTML 内で文字コードを指定しておかないと環境によっては文字化けが発生する模様。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        ......
    </body>
</html>


2014年12月27日土曜日

Evernote: デフォルトのノートブックを変更する

Mac の場合、メニューから Evernote > 環境設定 > 全般 > 「初期設定では新規ノートは以下のノートブックに保存されます」
で新規作成したノートのデフォルトのノートブックを指定できる。

例えば日記を毎日付ける場合などは、
日記ノートブックに設定しておくと便利。


2014年12月26日金曜日

Chrome アプリ:使用する API 、アクセスする外部リソースの宣言

Chrome アプリから外部サーバへアクセスしたり、
準備された API を使用する場合は必ずマニフェストファイル上で宣言しなければならない。

https://developer.chrome.com/apps/app_external

"permissions": [
    "...",
    "https://supersweetdomainbutnotcspfriendly.com/"
  ]

2014年12月25日木曜日

Chrome アプリ: データのセーブ・ロード

Chrome アプリは storage API を使ってデータの保存・取得ができる。

まず、manifest.json で storage API を使うことを宣言。
{
    "name": "my_app",
    ...
    "permissions": [
        "storage"
    ]
}

起動している Chrome だけに保存する場合(他の Chrome 上で復元しない場合)は、
storage.local.set() で保存、 storage.local.get() で取得。
// 保存
chrome.storage.local.set({'data_key': 'data_value'});

// 取得
var value = '';
chrome.storage.local.get('value', function(item) {
    value = item.value;
});


2014年12月24日水曜日

Chrome アプリ: ウィンドウを開く・閉じる

Chrome アプリでは Web ブラウザとは独立したウィンドウを開くことができる。
通常のアプリケーションと同様に個別のウィンドウを持つ。

chrome.app.window API を使用する。
https://developer.chrome.com/apps/app_window
// 作成
chrome.app.window.create('my_file.html', {
    bounds: {
        width: 640,
        height: 480
    }
});

// 開いているウィンドウを閉じる
chrome.app.window.current().close();

2014年12月23日火曜日

PHP: 簡単に使えるパスワードハッシュ化&認証処理

PHP 5.5 以降ではパスワードのハッシュ化及び、生パスワードとハッシュの比較が簡単に行える関数が準備されている。

ハッシュ作成:password_hash()
http://php.net/manual/ja/function.password-hash.php
$hash = password_hash('raw_password', PASSWORD_DEFAULT);

生パスワードとハッシュ化アルゴリズムを渡すとハッシュを生成してくれる。
ソルトは自動生成されハッシュ内に含まれるため、別途保存しておく必要はない。


生パスワードとハッシュの比較:password_verify()
http://php.net/manual/ja/function.password-verify.php
if(password_verify($raw_password, $hash)) {
    echo '認証成功';
} else {
    echo '認証失敗';
}

生パスワードとハッシュを渡すだけで検証してくれる。
password_hash() で作られたハッシュにはアルゴリズムとソルトの情報が含まれるため、
別途ソルトやアルゴリズムの指定が不要。

2014年12月22日月曜日

WordPress: 既存サイトの WordPress 化で改行が入ってしまう

既存サイトのソースコードを WordPress のエディタの「テキスト」モードで貼り付けていけば大丈夫・・・と思いきや、改行や <p> タグ周りでうまく行きません。

WordPress では HTML の自動整形機能があり、
「テキスト」モードで改行があると <br> を挿入したり、
先頭のスペースを削除したり、<p> タグを付加したりします。
(ページ表示時にこれらの整形を行います)

自動整形を無効化することもできるのですが、
無効化すると、今度は「ビジュアルモード」でページを作成した時に、
意図的に入れた改行まで無視してしまい、これはこれでダメです。

数日悩み続けたのですが、以下のプラグインがベストでした。
自動整形を無効化できる上に、「ビジュアルモード」での意図的な改行は反映冴えてくれるという便利なプラグインです。

PS Disabled Auto Formatting
http://www.web-strategy.jp/wp_plugin/ps_disable_auto_formatting/#lang_jp

今後、既存サイトの WordPress 化を行う場合は外せないです。

2014年12月21日日曜日

Mac: wget コマンドを使う

MacPorts からインストールすると wget コマンドを mac で使用できるようになる。
$ sudo port install wget
...

$ wget http://example.com/target.html


2014年12月20日土曜日

WordPress: Custom Post Type Permalinks で 404 ページが表示される場合

カスタム投稿タイプの月別アーカイブを、
プラグイン Custom Post Type Permalinks で表示したところ、
クリック時に 404 ページが表示されてしまう問題が起きた。

functions.php 内の init アクションフックで、
flush_rewrite_rules() を記述したところ 404 ではなく、
カテゴリごとのアーカイブが表示されるようになった。

<?php

add_action('init', 'init_action');
function init_action() {

    // カスタム投稿タイプの追加など
    register_post_type( ...
    ...

    // リライトルールを更新すると月別アーカイブが表示されるようになる
    flush_rewrite_rules();
}

2014年12月19日金曜日

Google: 検索結果から自分のサイトを外してもらう

Google Web Master ツールで管理しているサイトであれば、
インデックスから削除してもらうことができる。

Google Web Master を開いて、
左側メニューから Google インデックス > URL の削除を選択。
しばらくするとインデックスから削除される。



意図せずインデックスされた場合などに使用可能。

2014年12月18日木曜日

Chrome アプリ: サンプルアプリの作り方

公式のサンプル作成方法
https://developer.chrome.com/apps/manifest

まず、Chrome アプリ用のフォルダを作成する。

フォルダの中にアプリの設定ファイル manifest.json を作成する。
{
  "name": "Hello World!",
  "description": "My first Chrome App.",
  "version": "0.1",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}

アプリの制御スクリプト background.js をフォルダ内に作成。
アプリ起動時にウィンドウを開くようにする。
chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'bounds': {
      'width': 400,
      'height': 500
    }
  });
});

開かれるウィンドウの HTML を window.html としてフォルダ内に作成。
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, world!</div>
  </body>
</html>


アイコン画像を以下からダウンロードしてフォルダ内に設置。

Chrome を起動して URL に chrome://flags を入力して Enter。
「試験運用版の拡張機能 API」を有効にして、Chrome を再起動。
これで開発中のアプリを Chrome 上で実行できるようになる。


Chrome 右上のメニューボタンから、
その他のツール > 拡張機能

デベロッパーモードにチェックを入れて、
「パッケージ化されていない拡張機能を読み込む...」ボタンを押して、
作成していたアプリフォルダを選択。



するとサンプルアプリ「Hello World!」がインストールされる。
そのまま起動すると Hello World! と表示されるウィンドウが出現する。
以上で、サンプルアプリの作成は完了。



ちなみに新しいタブを開いた画面で、
左上のアプリアイコンをクリックしてアプリ一覧を表示し、
その中から起動することも可能。


2014年12月17日水曜日

Mac: Retina ディスプレイで撮ったスクリーンショットが大きすぎる

普通の解像度の PC へ渡すときには大きすぎるので縮小したほうが良い。

スクリーンショット撮影後、
画像をプレビューで開く。

右上のツールボックスボタンをクリックして、
サイズ変更アイコンをクリック。



単位をパーセントにして、
60% くらいにすると丁度よい大きさになる。


2014年12月16日火曜日

Linux: 複数階層のディレクトリをまとめて作成

mkdir はデフォルトだと1階層ずつしかディレクトリを作れないが、
-p オプションを使用すると複数階層一気に作れる。

my_dir
└sub_dir
$ mkdir -p my_dir/sub_dir/

同じ階層に複数ディレクトリを作る場合は {} で囲むと展開される。

my_dir
├sub_dir1
├sub_dir2
└sub_dir3
$ mkdir -p my_dir/{sub_dir1,sub_dir2,sub_dir3}

2014年12月15日月曜日

WordPress: 最新記事の取得

サイドバーなどへ最新記事を出す時に便利。
$posts = get_recent_posts();
foreach($posts as $post) {
    echo '
<li><a href="https://www.blogger.com/'%20.%20get_permalink($post['ID'])%20.%20'">' . $post['post_title'] . '</a></l>
';
}

get_posts() だと WP_Post クラスが取れるけど、get_recent_posts() だと配列が取れる。

2014年12月14日日曜日

Mac メール:〜の識別情報を確認できません

サーバが第3者から発行された有効な証明書を使用していない場合に表示される。
例えば自己証明書を使用している場合など。

自前で準備したサーバであればそのままでも問題ないが、
他者のサーバの場合はなりすましの可能性あり。
相手がわからない場合は接続しないほうが良い。

2014年12月13日土曜日

info@ で始まるメールアドレスにメールが届かない

root にエイリアスが貼ってあり、 root に飛ばされている。
エイリアスを外すと info で受信できるようになる。
$ sudo vim /etc/aliases
info:        postmaster
↓
#info:        postmaster


2014年12月12日金曜日

Windows: Telnet コマンドを使えるようにする

Windows では telnet コマンドはデフォルトで使用できないが、
設定すると使用できるようになる。

Windows 8.1 の場合、
「Windows の機能の有効化または無効化」から、
「Telnet クライアント」にチェックを入れると、
コマンドプロンプトから telnet コマンドが使用できるようになる。



2014年12月11日木曜日

dovecot:Windows Live メールからログインできない

IMAP/POP サーバの dovecot で Windows Live Mail だけからログイン出来ない現象が発生した。

IMAP で STARTTLS を使用して認証データの暗号化をしていたのだが、
Live Mail からのみ弾かれてしまった。

disabled_plaintext_auth = no

一時的にプレーンテキストでの認証を許可することで通すことができた。
改めて Windows Live メール + 暗号化認証の動作確認が必要。

2014年12月10日水曜日

Cyberduck: ダブルクリックでエディタを開く

Cyberduck はデフォルトでダブルクリックしたファイルをダウンロードする。
設定すると代わりにエディタでファイルを開くことができる。

メニューから Cyberduck > 環境設定 > ブラウザ > ダブルクリックしたファイルを外部エディタで開く

こちらの方が Finder と同じ感じで操作しやすい。


2014年12月9日火曜日

WordPress: スラッグに数字がついてしまう

スラッグが他の投稿と被っていると番号が自動的に付けられる。

スラッグ-1
スラッグ-2
スラッグ-3
・・・

これはゴミ箱に入っている投稿も対象になる。
もし、同じスラッグが見当たらない時はゴミ箱の中の投稿とかぶっていないかチェックして、いらない投稿を削除すること。

2014年12月8日月曜日

Google スプレッドシートで使える関数

Google スプレッドシートの関数リスト
https://support.google.com/docs/table/25273?hl=ja

正規表現を使った置換や数学関数などいろいろ揃っています。
みんなで共有して作業するなら Excel より断然便利ですね。

2014年12月7日日曜日

WordPress: 条件に一致するすべての投稿を取り出す

get_posts() 関数のオプションに
nopaging = 1 を指定するとページ分けを無効化して全データを1度で取得できる。

$posts = get_posts(array(
    'post_type' => 'my_post_type',
    'nopaging' => 1
));

2014年12月6日土曜日

WordPress: 管理者メニューのアイコン

管理者メニューのアイコンは Dashicons が使われている。
https://developer.wordpress.org/resource/dashicons/#format-status

カスタム投稿タイプを定義する際にアイコンを指定すると、
メニュー項目のアイコンとして表示できる。

register_post_type('my_custom_posts', array(
 'description' => 'カスタム投稿',
 'public' => true,
 'menu_icon' => 'dashicons-format-aside',  // ここでアイコンを指定する 
));

2014年12月5日金曜日

さくらレンタルサーバ: PHP のバージョン変更

2014/12 月現在、さくらのレンタルサーバの PHP バージョンは 5.4 まで選択可能。

まずサーバのドメイン名とパスワードでコントロールパネルへログイン
https://secure.sakura.ad.jp/rscontrol/

左側のメニューから PHP のバージョン選択 → 新しいバージョン

2014年12月4日木曜日

WordPress: カスタム投稿タイプのカスタムタクソノミーを更新する

固定ページや投稿などデフォルト投稿タイプのタクソノミーの値を更新する場合は
wp_set_post_terms() を使用する。

この関数はユーザが定義したカスタム投稿タイプには使用できないので要注意。
(空の配列を戻り値として返して、処理は失敗する)

カスタム投稿タイプのタクソノミーを更新したい場合は、
wp_set_object_terms() を代わりに使うこと。

2014年12月3日水曜日

WordPress: 指定した投稿タイプの投稿一覧を取得

get_posts() で可能。
$posts = get_posts(array(
    'post_type' => 'my_post_type'
));


関数リファレンス
get_posts()
http://wpdocs.sourceforge.jp/テンプレートタグ/get_posts

2014年12月2日火曜日

Illustrator : 複数のレイヤーの表示/非表示を一括で切り替える

レイヤーパネルで目のアイコン部分を Shift を押しながらドラッグすると、
一気に表示・非表示の切り替えができる。


2014年12月1日月曜日

Chrome App: 開発ドキュメント

Chrome アプリや拡張機能を作成する際に参照するドキュメントはこちら
https://developer.chrome.com/home

Chrome アプリなら PLATFORM -> Apps
Chrome 拡張機能なら PLATFORMS -> Extensions

から開発方法が確認できる。