WordPress の最新動向 について話しました。

jMDDv0IGyo2TOiaFmylUU07QjJcHrS-1200

お疲れ様です。

先日行われた WordFes Nagoya 2014 にて、WordPress の最新動向についてお話しました。
相変わらず緊張しまくりの発表で、途中声が震えそうになりましたが、
なんとか無事に終わり良かったです。

WordPress の最新動向について

WordPress の最新動向について、僕自身コアに貢献した経験がなく、
話す資格あるのか…という感じでした(汗)

とりあえず本番までに何かしらできればと思い、ソースコードを読みまくりましたが間に合わず….
というか、英語力がないので時間がかかりすぎました。
当分の課題は英語を学ぶことになりそうです。

WordPress のコア開発について

今回、コア開発に参加するために、開発ブログやTracなどのドキュメントにひと通り目を通しました。

地道に翻訳しながらだったので不正確な点もあったかもしれませんが、
「こんなに慎重なんだ」ということを感じました。

一つのアクションフックや、関数などを追加することに対しても
何十といったコメントがされたていたり、いろんな視点から突っ込みが入ったりしていました。

WordPress がこれだけシェアを拡大している中、それは当然のことかも知れません。
後方互換性や歴史的な事情を考慮し、コアのコードに改変を加えるのは相当大変なことだと感じました。

コア開発へ参加するために必要なこと
  • 英語
  • HTML, CSS, JavaScript, php …etc などのスキル
  • 後方互換性への知識
  • 既存のコードに至った歴史的背景

もちろん、わからない所は相談すれば誰かが答えてくれると思います。
それがオープンソースのいいところであるのは間違いありません。
しかし、それが逆にノイズとなってコア開発の足かせとなっているのかも知れないなとも思いました。

やはり、簡単ではないなと感じました。
これから修行しようと思います。

これからの WordPress について

こちらの記事が非常に参考になりました。

The Future of WordPress

というか、僕のスライドなんかより上記の記事を読むことを強くおすすめします。

WordPress を使うということ

今回このスライドを作るに当たり、WordPress に対してもっと深く学習することができました。
と同時に感じたことがあります。

俺、WordPress に依存しすぎじゃないか…

ということです。(自分が)

基本的に実案件では9割 WordPress を使用してサイトを構築しています。

コードの多くは WordPress に依存しています。

内包されている API を利用し機能を実装することはとても便利です。
でも、もし自分が WordPress を使用せずに1からその機能を実装できるかと言われたら
相当な時間がかかると思います。
そもそも学習から始まることがたくさんあるかと。

そこら辺を意識して今後も開発なり学習を進めていかないと、
気づいた時には手遅れになりそうで怖いです。
頑張ろう。

スライド内の参考URL

スライド内で紹介している参考サイトのURLを以下に書き出します。

セクション2 – 3.9, 4.0 の復習

セクション3 – 今後の開発動向

セクション4 – コア以外の開発トレンド

力技!Json から WP Theme Customizer の設定

今回は WordPress に関する小規模なハックです。

テーマに組み込んで、ユーザーさんにテーマのカスタマイズを簡単に提供する「テーマカスタマイザー」機能ですが、設定がややこしく、コードも肥大化しがちになります。

なんで、json などから手っ取り早く設定項目かけたらなと思って、
ちょっとコードを書いてみました。

めちゃくちゃなコードと英語かも知れませんが、Gist にあげているので良かったら参考にして下さい。

上記ファイルと同じ階層に以下の形式の json ファイルを作成して渡してあげると、
無事テーマカスタマイザーに反映されます( はずです )

    "gg_general_settings": { // セクション ID
        "title" : "基本的な設定", // セクションのタイトル
        "priority" : 29, // セクションの順番
        "setting" : {
            "general_keywords" : { // 設定 ID
                "transport" : "postMessage", // js でリアルタイムに反映させる場合は "postMesage", リロードさせる場合は "refresh"
                "default" : "", // デフォルトの値
                "label" : "キーワードをカンマ区切りで入力してください。", // 項目のラベル
                "type" : "option" // 設定項目のタイプ "select","radio","option","image","color"
            }
        }
    }

でも、結局あんまり意味がなかったような……あはは
こんなこともできるんだよレベルで覚えてもらえたら嬉しいです。

次は管理画面から簡単に設定できるようなプラグイン作ります。

( 最近プラグイン作ろう作ろう詐欺になりつつある )

2014年06月11日 追記 :

WordCamp kansai 2014 2日目のコントリビューターデイにて、プラグイン化しました。

https://github.com/1shiharaT/extend-theme-customizer

WordPress の制作効率UP! 「TGM-Plugin-Activation」

今日は、ちょっとした制作効率を上げる Tips です。

普段 WordPress でサイトを制作する際に、独自に制作している内部的なテーマを使う会社も多いんじゃないかなと思います。

そこで、実際にサイトを制作する際に繰り返す作業が「プラグインのインストール」作業です。

大体、サイト制作する時に必須なプラグインって決まってきますよね? (僕だけ?)

そんな非効率な作業を今回短縮できるソフトウェアを紹介します。

TGM-Plugin-Activation

Github で公開されている TGM-Plugin-Activationというリポジトリがあります。

結構前から公開されていまして、なにができるかと言いますと….

プラグイン一括インストール & 有効化 です。

予めPHPファイルに、インストールさせたいプラグインを記述しておき、管理画面から一括インストールすることができます。

設置方法

Github で公開されていますので、zip で落としてくるなり、
フォークして自分のリポジトリ作っておいたり、なんなりと。

今回はとりあえず、zip で落としてくるパターンの設置方法を説明します。

1. テーマ内にディレクトリを作成

テーマ構成をとりあえず仮定しときます。
hogehoge というテーマの場合です。

/hogehoge/
    /assets
    /includes
    style.css
    functions.php
    index.php
    page.php
    single.php
    .....

とりあえず、テーマ内の第一階層に 「plugins」 というディレクトリを作成します。

/hogehoge/
    /assets
    /includes
    /plugins
    style.css
    functions.php
    index.php
    page.php
    single.php
    .....

2. ダウンロードしたzipファイルを解答し、先程作った「plugins」ディレクトリ内に展開

/hogehoge/
    /assets/
    /includes/
    /plugins
        /plugins/..
        /composer.json
        /README.md
        /class-tgm-plugin-activation.php
        /example.php
    style.css
    functions.php
    index.php
    page.php
    single.php
    .....

zip でダウンロードしたものを、先程作成した plugins フォルダ内に展開すると、上記のようなファイル構成になります。

3. example.php をリネームし、functions.php で読み込む

plugins フォルダ内に入っている example.php をそのままではかっこ悪いので、plugins-install.php 等にリネームします。

リネーム後、functions.php で読み込みましょう。

require get_template_directory . '/plugins/plugins-install.php';

4. plugins-install.php を編集

やっと、一括インストールしたいプラグインの情報を追加していきます。

既に、plugins-install.php には、サンプルコードが書いてありますので、それを編集していきましょう。

※ 上記ファイルは確認していないサンプルコードです。

wordpress.org にホスティングされているプラグインであれば、

http://downloads.wordpress.org//plugins/zip/[プラグインのスラッグ名].zip

がダウンロードする zipファイルまでの絶対パスとなります。

スラッグ名は、プラグインのページURLを見ればわかります。

http://wordpress.org/plugins/[ここの部分]/

5. 管理画面からインストール

管理画面の「外観」メニューに「Install Plugins」というメニューができていますので、
そこからプラグインを一括インストールします。

これで、サーバーの設定などに問題がなければ、通常のプラグインと同じようにプラグインがインストールされていきます。

長々書きましたが、出来る人だと 5分ぐらいでできるはずです。

フォークして自分用に作っておくと便利ですね。

あとがき

一応、正規のリポジトリからインストールするので、ライセンスなどは問題ないかとは思います。
どうなんでしょうか。ご意見いただけたら幸いです。

有料でテーマを配布するなんて時には使ったらまずいと思いますが、
社内で使うテーマなどのにおいての効率化には使えるんじゃないでしょうか。

WP CLI を使って自動化すれば良い話かもしれませんが、世の中そんなに黒い画面が出来る人ばかりではないので….

現場からは以上です。

Sublime Text 3 を最強の Markdown エディタに。

design02-1

今日は Sublime Text 3 に関するメモ書きです。


ちょっとしたメモ書きからHTMLの生成まで大人気の Markdown 記法。

今まで Byword や、Writer
といった Mac アプリを利用して書いたりしていました。

せめて Sublime Text 3 でとことんできればいいじゃないか…ってことで、
Package Control 先生 に情報を取ってきてもらいました。

1. Sublime Text 3 – Markmon

Sublime Text 3 – Markmon

そしてこちらが見つけた良さそうなパッケージ。

mathjax, socket.io を利用して、超リアルタイムで変更が反映できます。

多分、Atom よりレスポンス早いんじゃないかなこれ。

利用には幾つか条件があります。

  • node.js がインストールされていること。
  • pandoc (Markdowm parser) がインストールされていること。
  • markmon がインストールされていること。

Node.js は割愛しますが、(手抜き)

pandoc は

$ brew install pandoc

markmon は、

$ npm install -g markmon

上記コマンドをそれぞれ打つことでインストールできます。
元々、markmon という Markdown Previewer をSublime Text 3 から扱えるようにしたパッケージのようです。
ってことで、Sublime Text 3 以外での他のエディタでも使えます!
詳しいことは、こちら

CSS も、markmon のパッケージ内に Sass ファイル が見つかったので、

自分好みのプレビュー画面に変更出来ました。

2. Sublime Table Editor

お次は Markdown での テーブル組み。
Markdown で書くと、

| test               | test            | test                 |
| :----------------- | :-------------- | :------------------- |
| test               | test            | test                 |
| test               | testtesttesttes | test                 |

こんな感じの記法になりますが、結構面倒くさいです。(おれだけ?)

縦棒線は揃えないと超絶気持ち悪いし、かと言ってセル内に情報を書き込む時、
文字数的に縦線超えたら全部揃えないといけない、という。

よって、テーブルなんてあんまり使わずにリストで単純に書き出していました

Sublime Table Editor – 辿々しいGIFファイル を使うと、
こんな感じになります。

  • タブでセルを行ったり来たり。
  • セル内の文字列に合わせて自動的に整形。
  • ctrl + k , | で CSV記法 からの一発置換。
  • alt + 方向キーで縦列・横列の移動。

とりあえず、便利です。

ショックなのが、もう 2年前からあること。
無知は罪ですね。

WP Pointer API を使って「使い方ツアー」を管理画面にさくっと導入!

-2014-05-23-0-10-37-1

以前、管理画面カスタマイズってことでアクションフックについて書きましたが、
中々まとめる時間が取れず今に至る 1shiharaT です。

一気にまとめるとすごい量になると思うので、何回かに分けて書きたいと思います。

今回は、 WP Pointer API の実装方法についてです。

初心者の方に使い方を教える一番の方法… ってなんだろう?

WordPress って、思ったより多機能です….よね。
僕のクライアントさんは企業のWeb担当者の方のような、普段は余り Web に関わらないような方が結構な数を占めます。

そんな中、デフォルトの機能に加えカスタム投稿タイプだったり、カスタムフィールドだったり、
いろいろなカスタマイズをして納品とするわけですが、
やっぱり最初は使い方を教える所から始めないといけません。

GrowGroup では、管理画面に使い方マニュアルのようなものを貼り付けていたり,
Skype でレクチャーしたり、しておりまして、最近は操作説明動画を撮影して管理画面に貼り付けていました。

でも、やはり説明出来ない所は多いですし、分からない所はやっぱり出てきます。
そんな中なんかもっといい方法ないかなーと思って色々考えていました。

よくある「ツアー形式」の使い方レクチャー

最近だと ( とは言っても結構昔かも知れませんが ) 会員登録後、自動的に始まる「使い方ツアー」なるものを見たりします。
これを WordPress で実装できたらなぁと思いまして、今回の WP Pointer にたどり着きました。

※ ちなみに、「使い方ツアー」なるイメージは下のリンク先のようなイメージです。
http://bootstraptour.com/

WP Pointer は バージョン 3.3 から搭載されている API です。
日本語での解説は高橋文樹さんの記事しか見つかりませんでした。

よくプラグインをインストールした時に見かけるかもしれません。

こういうやつ

書こうかな… と思ったら既に Gist で使えそうなコードがあったので紹介します。(手抜き)

https://gist.github.com/DevinWalker/7595475

これを元に、ちょっとだけ変更を加えました。

最初のは、1ページに1つのポインターのみ設置になっていたので、無理矢理複数設置可能にしました。
67行目から記述が始まる $adminpages という変数に配列として値を渡すことで実装できます。

// 例 
$adminpages = array(
    // 表示させたいページのスクリーンIDを指定
    'customize' => array(
        // 1ページに何個も表示させたいため、更に囲みます
        array(
            'content' => 'ポインターの内容をここに。h3 タグがタイトルとして装飾されます。',
            // ポインターを表示したい要素のセレクター
            'id' => '#menu-appearance', 
            'position' => array(
                // ポインター矢印の位置 : top left right bottom 
                'edge' => 'left',       
                // ポインターの位置     : top left right bottom 
                'align' => 'left'      
            ) ,
            // ボタンのテキスト
            'button2' => '次へ' , 
            // ボタンをクリックした時に実行する挙動
            'function' => 'window.location="' . admin_url('widgets.php?welcome_tour=2') . '";'
        ) ,
    ) ,
);


雑なコードで申し訳ないです….

まだまだ改善の余地ありまくりなので、
管理画面から内容を操作できるようにプラグイン化しますー!

WordPress Widget Customizer – Tips.

WordPress 3.9 から追加された「Widget Customizer」でのTips。

「Shift + クリック」 で、ウィジェットをクリックすると、カスタマイザーの方でウィジェットが開く。

ウィジェットにマウスホバーすると、フロントのウィジェット部分がフォーカスされる。

ソースは

wp-includes/class-wp-customize-widgets.php  
wp-includes/js/customize-preview-widgets.js  

あたりを参照。

テーマ関係なく動作するはずですが、テーマによってはバッティングするかも。

それだけ。

postfix

もう季節も変わったことが感じ取れるほど、暖かくなってきました。
弊社では暑がりばかりなため、あと2週間もすれば冷房を入れ始めるのではないかと思います。

さて本題ですが、この度レガシーなPHPで稼働しているシステムを新サーバーに移行する案件を引き受けました。

内容としては、

  • apache + php 5.1.6 + MySQL で動作する一般的なWebアプリケーション
  • クライアントが現制作元との契約を切り、コスト削減のためにシステムを移行するため、情報開示に非協力的。
  • 4月末日で現在の制作会社との契約を切るため、急いで対応して欲しい。( この時点が4月25日ほど。 )

この情報のみが受注前に与えられ、やる、やらないかの2択。

一見、博打のような案件です。黒い。ドス黒い。

… ですが、金額が結構な高単価だったため、引き受けました。

まぁ、そのおかげで全く経験のなかったことをやれたのですが、
それと引き換えに睡眠時間を奪われました。

また、sugimotoさんにもTwitterから助けて貰い、本当に迷惑をおかけしました。

メモ用にちょっと記事を書いてみます。

移行の開始

新サーバーは さくらのVPS SSD 4G プランを採用しました。
正直、VPSの中ではSSDがこんな低コストで使えるのはここだけなんじゃないかな。( 海外も含めるといっぱいあるかもしれませんが。 )

まぁ、正直クライアント的にはもっと安いレンタルサーバーにしたかったみたいです。
それではいざ蓋を開けた時にどうもできないということになるといけないので、VPSに。

さくらのVPSを借りてもらい、手続きをしてもらったのですが、やり取り上のミスで実際に新サーバーが使えるようになったのが25日。あと5日しかない。

とりあえず、chef で環境を構築。

そこで旧サーバー元からやっとこさFTP、DBなどの必要情報を貰い中身を見てみると…….

な、なんじゃこりゃー!

現状のWebアプリケーションを動かしているのは、

  1. サイト本体のデータが入ったサーバー
  2. サイトの管理画面が入っているサーバー

上記2つに別れているということがわかりました。

なおかつ、2 の管理画面が入っているサーバーと、本体が入っているサーバーとではphpのバージョンも、apacheのバージョンも、Mysqlのバージョンも違うことも判明。

これ以上サーバーは借たくない。無慈悲なクライアント。

まぁ、なんとかやってみました。

PHP 基本からやり直す

パーフェクトPHP

今のままではいかんなとメモ。

PHPの言語仕様

  • エラーには大きく分けて3種類ある

    • パースエラー ( シンタックスエラー )
    • 実行時のエラー ( 実行も中断される )
    • 警告・注意 ( 実行はする )
  • エラーの種類とエラー定数

    • E_PARSE
    • E_ERROE
    • E_WARNING
    • E_NOTICE
    • E_DEPRECATED
    • E_STRICT
  • エラーに関する設定

    • error_reporting

      • php.ini ( または.htaccessに書く ) に 記述

型と演算子

PHPは動的型付け型言語なので、普段は型を記にせずプログラムを書けるが、
内部的には明確に区別されている

  • PHPの型

    • PHPには8つの型がある

      • 整数 ( int )

        • キャストしたい場合には、 (int)、または intval()関数を使用
      • 浮動小数点数 ( float )
        • floatval()、(float)でキャスト
      • 文字列 ( string )
        • シングルクオート内ではエスケープ文字は展開されない。
        • ダブルクオート内では変数を展開できる
          • スペースを開けずに展開したい時には{}をつける
        • ヒアドキュメント内でも変数は展開可能。
        • Nowdoc
          • PHP 5.3から利用可能
          • const や define に利用
          • 文字列がパースされない。 ( 変数が使えない )
        • strval() (string) でキャスト可能
        • 文字列型が特に注意が必要 ( キャストを明示的に )
      • 論理型
        • 真偽値 true , false を扱う
        • true , false の 大文字と小文字は区別されない
        • キャストには (bool)、(boolean)を使用
        • falseと判断するものは以下の7つ
          • false
          • 0
          • 0.0
          • 空の文字列
          • 要素の数がゼロの配列
          • null ( 地がセットされていない変数を含む )
          • 空のタグから生成されたsimplexmlオブジェクト
      • 配列型
      • オブジェクト型
        • クラスを new 演算子によってインスタンス化したものへの参照
      • リソース型
        • オープンされたファイルやデータベース接続など、何らかの外部リソースへの参照を保持。

          • sockets file
          • curl
          • mysql link
          • stream
      • null
        • 変数が値を持たないことを表す特別な型。

          • 定数nullが代入されている場合
          • 値が何も代入されていない
          • unset () されている場合
  • 型の明示的なキャストと変換関数

| 型 | C言語風のキャスト | 変換関数 |
|:——————-:|:————————-:|:———————–:|
| 論理型 | (bool) (boolean) | – |
| 整数 | (int) (integer) | intval() |
| 浮動小数点数 | (float) (double) (real) | floatval() , doubleval() |
| 文字列 | (string) | strval() |
| 配列 | (array) | – |
| オブジェクト | (object) | – |

  • 自動キャストについて

    • 発生する状況

      • 異なる型同士で演算を行う場合
      • 演算子、制御構造、関数やメソッドが特定の型の引数を必要としており、それとは異なる型を渡した場合
        • 関数などに、指定する型と異なる型を渡したにはエラーがでる。
  • 文字列のキャスト

    • 数値らしい文字列とは

      • 10進数を表した文字列
      • 16進数を表した文字列
    • PHPは自動キャストによって思いもしない挙動が再現する

演算子

  • PHPの演算子には3種類ある

    • 単項演算子
    • 二項演算子
    • 三項演算子
  • PHPの演算子の種類

    • 代入演算子

      • その名の通り、代入演算を行う

        • $a = 10; // 変数 $a に 10 を代入
    • 代数演算子
        • : 加算
        • : 減算
        • : 積
        • : 商
      • % : 剰余
    • ビット演算子
      • & : ビット積 : 両辺のビットどちらにも立っているビット
      • | : ビット和 : 両辺のいずれかで立っているビット
      • ^ : 排他的論理和 : 両辺のビットのどちらかにしか立っていないビット
      • ~ : 否定 : ビットの反転
      • << : 左シフト
      • >> : 右シフト
    • 文字列演算子
      • . : 文字列の結合

        • 文字列ではない変数との結合をすると、自動的に文字列にキャストされる。
        • 整数値を直接文字列と結合する場合には前後にスペースを忘れずに
    • 複合演算子
      • 左辺 演算子= 右辺

        • $a += 1; // $a に 1 を追加
    • 加算子・減算子
      • ある変数に1を加える ( 引く ) という演算を行い、結果を代入。
      • ++
      • 演算子を前置すると、まず演算を行い結果を返す
      • 演算子を後置すると、結果を返し、演算を行う
    • 論理演算子
      • && 及び and : 論理積
      • || 及び or : 論理和
      • xor 排他的論理和
      • ! : 否定
        • 論理積と論理和では2通りあるが、優先順位が違う
      • if ( isset( $argv[1] ) && $argv[1] ) // まず引数があるか確認し、ある場合はそれが真か調べる
    • 比較演算子
      • 2の値を比較し、その結果を論理値で返す

        • ==
        • != または <>
        • === : 右辺と左辺が等しいとは true 。 キャストが行われない
        • !== : 右辺と左辺が等しくない場合には true 。キャストが行われない。
        • < : 右辺より左辺が小さい場合に true
        • >
        • <=
        • >=
      • 二項が異る型の場合は自動的にキャストされる
    • 型演算子
      • instanceof : 右辺が特定のクラスのインスタンスである場合に真となる。

        • if ( $a instanceof SomeClass )
      • また、型演算子では下記の2項を調べることも出来ます
        • 特定のクラスを継承したクラスのインスタンスか
        • 特定のインターフェースを実装したクラスのインスタンスか
    • 三項演算子
      • 条件演算子とも呼ばれる

        • 条件式 ? 式1 : 式2
        • $param = isset( $args[1] ) ? $args[1] : ‘default’;
        • 条件式と式1が同じな場合 , 式2は省略可能
          • 条件式 ?: 式1
      • 三項演算子の結合規則
        • 三項演算子をネストして用いる場合には、必ず明示的に () を使用する
  • 演算子の優先順位

    • $b = $ a = 2 * 3 + 5 ;

      • $b = ( $a = ( ( 2 * 3 ) + 5 ) ) ;
    • 演算子にはそれぞれの結合法則と優先順位があり、ルールに従って式は評価される
  • 配列

    • 添字配列 : 配列の先頭から順に列挙し、その番号でアクセスする配列

      • 配列の要素にアクセスするには変数にブランケット [] をつけ、キーとなる添字を指定
      • ブランケットを使った配列の初期化は、初めて使われる変数に対してのみ有効
    • 連想配列
      • キーに名前をつけ、キーでアクセスできる配列
      • 初期化時にキーが重複していた場合、後に定義された要素が用いられる
    • キー
      • 配列のキーとして用いることができるのは以下の2つ

        • 整数
        • 文字列
      • 論理型、不動小数点数型、nullを用いることもできるが、それぞれ文字列文字列、数値型にキャストされる
    • 多次元配列
      • 連想配列の中に連想配列を入れることもできる
    • PHPの配列の特徴のまとめ
      • 添字配列と連想配列が同じ配列型として扱われる
      • 添字配列と連想配列を混ぜて使うことができる
      • 連想配列は入力順が保証される、順序付マップである
    • 配列のキーがセットされてあるか調べる
      • arraykeyexits() という関数がある
      • でもisset()でも調べることが可能かつ速い

制御構造と関数

制御構造

  • プログラムの構成要素と制御要素
    • プログラムの実行は、上から下へ、記述されたプログラムが流れるように実行される → 遂次実行 (ちくじ実行)
    • 文とグループ文
      • 「文・グループ文」「式」「制御構造」

        • 複数の文を中括弧 {} で囲むことで、文をグループ化する。

          • 文ですむ処理は{}で囲む必要はない
          • でも可読性が悪くなるので気をつける
      • PHPに於ける式とは、値をもつすべての物のこと。
    • 制御構造
      • if – elseif – else 文
      • while
      • do – while
        • 必ず do を実行
      • for
        • 反復を行う時に初期化をする変数、反復条件、反復ごとに実行する文を定義する
        • 最初の初期化式では、 , (カンマ)で区切り何個も式を書ける
          • 一般的には余りそういうことをしない
      • foreach
        • 反復可能なデータ構造を順番に処理するための制御構造
        • foreach を使うと、配列の要素を先頭から順にすべて出力するような処理を簡単に記述できる
        • PHPにはブロックスコープがない
          • foreach で 指定した変数は外でも使用可能
        • 反復時に参照を用いることができる
          • foreach ( $array as &$hoge ) // $hogeがそれぞれの値と同等になる
      • break
        • for , foreach , while , do-while, switch のブロックから抜けるために用いられる
        • 特定の条件時に反復を終わらせたい時
      • continue
        • 現在の繰り返し処理を途中で終了し、次の繰り返し処理をする場合に用いられる
      • switch
        • 複数の条件で複雑な分岐を行いたい場合、switch構文を用いることで、スマートに記述
        • break 文がない場合は、次のbreak文まで処理が継続する
          • これを利用して、複数のcase処理を行える
      • return
        *
      • exit
        • プログラムの実行を終了
      • require / requireonce
        • 別のファイルに記述されたスクリプトを読み込む
        • ファイルが見つからなかったらそこで実行が止まる ( エラーとなる )
      • include / includeonce
        • 外部ファイルを読み込むための構文
        • require と違い、実行は継続する
      • goto
        • ラベル付けされた箇所へジャンプするための構文

          • ラベルは ラベル名: の形で定義
        • 一般的にあまり使用されない
    • 関数
      • 再利用されうるコードのかたまりのロジックをまとめて関数を定義する
      • 関数の基本
        • function [&] 関数名 ( [引数[, ….]] )
      • 引数のデフォルト値
        • デフォルト値を持つ引数は、持たない引数より後に書く
      • タイプヒンディング
        • 引数に型を指定し、それ以外の型を持つ引数が渡された場合に致命的なエラーを返す
        • 実行が中段
        • function hogehoge( array $args ) { // 配列以外が渡されるとエラー
      • 関数の呼出
      • コールバック関数
        • PHPには引数に関数を指定すると特定の処理にその関数を呼び出すような関数がある。
        • コールバック関数には、定義済みの関数やユーザー定義関数の関数名を文字列で指定する他、次のような指定もできます。
          • 関数名を表す文字列
          • 無名関数
          • クラスやクラスのインスタンスとメソッド名を持つ配列
          • クラスの静的メソッドを表す文字列
      • 可変関数
        • 可変変数と同じように、関数名の代入された変数を使って呼び出すことが出来る。

          • $name(); // $name = ‘date’ の場合 , date 関数が呼び出される
      • calluserfunc() と calluserfuncarray()
        • 可変関数よりもより高度な関数呼び出しパターン

          • mixed calluserfunc ( callback コールバック関数 , [mixed 引数, …] );
          • mixed calluserfuncarray ( callback コールバック関数 , array 引数のリスト );
        • コールバック関数には、無名関数も指定できる
        • static メソッドの場合、クラス名を文字列で指定できる
        • static メソッドの場合、「クラス名::メソッド名」でも指定できる
        • インスタンス変数と、メソッド名でも指定出来る
        • calluserfunc と calluserfuncarray の違い
          • calluserfunc = 予め呼び出す関数の引数を知っておく必要がある
          • calluserfuncarray = 第二引数に配列として与えることができるため、呼び出す関数の実装を知らずに用いることができる
      • 参照による引数と返り値
        • function addone ( &$value ) // これでグローバル内の変数にも影響を与える
        • 引数を参照で渡す関数の場合には、直接引数を渡すことはできない
      • 無名関数
        • その名の通り、名前の無い関数
        • PHP 5.3 から実装された
        • 関数型プログラミングの際に用いられる
        • 関数をオブジェクトのように扱うことができる
      • クロージャ
        • use()構文を持ちいて使用
        • 名前空間を解決するための手段
    • クラスとオブジェクト
      • PHPには本格的なオブジェクト指向でプログラミングするための機能が揃っている
      • クラス
        • PHP5から本格的なオブジェクトの機能が備わってきた。
        • クラス名も関数と同じように、グローバルに命名定義される。
        • インスタンスの生成と使い方
          • クラスを使う時は new 演算子を用いてクラスをインスタンス化する
          • メソッドの呼出には アロー演算子 -> を用います。
          • 複製する時は clone 演算子を使う
          • アクセス修飾子
            • public

              • クラスの外側から呼出
            • private
              • 自分のクラスの内側からのみ参照・呼出
            • protected
              • 自分のクラスの内側、または自分のクラスを継承したクラスの内側からのみ参照・呼出が可能
        • プロパティ
          • クラスの中に保持している変数

            • メソッドと同じように、アロー演算子でアクセス
          • $this
            • インスタンス化を行うとクラスのメソッド内で使用できる $this という変数が自動で定義される
            • $this は自分自身のオブジェクトの参照
          • クラス定義時に宣言しないプロパティ
            • PHP では、宣言していないプロパティへの読み書きも可能
          • static プロパティ
            • 静的なプロパティ
            • メソッドの宣言時に static をつけると、インスタンスしていなくてもアクセスが可能となる
            • そのクラスに共通の変数のようなもの
            • ダブルコロン (::) をつけてアクセスします
            • この値がすべてのオブジェクトで共通ということを示す
          • self
            • クラスコンテキストの内部で、そのクラス自体を示す
            • ダブルコロン (::)と一緒に用いる
            • 似たようなキーワードとして parent , 遅延性的束縛という機能で用いられる static キーワードがある
          • 定数
            • クラス定数は const キーワードを用いて定義
            • 定数に使用できるにはスカラーの値のみ ( 配列などは無理 )
            • クラス定数は ダブルコロン (::)と定数名を持ちいてアクセス
        • メソッド
          • クラスに属する関数
          • 関数の定義と変わらない
          • static メソッド
            • 静的なメソッド。 static メソッド内では $this は使用できない

              • static メソッド内では self:: を使う
        • コンストラクタとデストラクタ
          • クラスのインスタンスが作られたり、消されたりスルタイミングで自動的に呼び出されるメソッド
          • 省略できる
          • 通常、コンストラクタはオブジェクトを生成する上で必要なパラメータや、そのクラスのオプションなどを引数と受け取り、プロパティにセットするなどという役割
          • コンストラクタとデストラクタは マジックメソッド。 _ ( アンダースコア 2つ )のものはマジックメソッド
        • 継承
          • あるクラスのメソッドやプロパティを引き継いで新しいクラスを定義すること
          • 一般的に継承されたクラスを親クラス, 継承したクラスを小クラス という
          • PHP では多重継承は許されていない
          • クラス名に続けて extends キーワードと継承するクラス名を指定
          • final キーワード
            • 継承された派生クラスでオーバーライドできなくなる
        • 標準クラスとキャスト
          • stdClass : プロパティやメソッドを一切持たない 標準クラス
          • 整数型や文字列型などのスカラー値をオブジェクト型にキャストした場合 ‘scalar’ というプロパティにその値を持つインスタンスとなる。 echo $foo->scalar
        • 抽象クラス
          • アブストラクトクラス

            • 共通の機能を抽象的な親クラスで定義し、特有の機能は個々の小クラスで実装させたい時に使用
            • 抽象クラスは abstruct キーワードを使用して宣言
            • 抽象クラスはそれ自体をインスタンス化することはできない
            • 必ずその抽象クラスを継承したクラスをインスタンス化する必要がある
            • abstract クラス名 { abstract アクセス件 function メソッド名 }
            • 抽象化されたabstract メソッドを可鳴らす実装しないと致命的なエラーがでる
        • インターフェイス
          • 機能の実装を規格するための仕組み
          • インターフェイスを用いると,特定のオブジェクトが特定の機能 ( メソッド )を有することが保証される
          • インターフェイスの定義には実体のあるメソッドを定義できない
          • インターフェイスを暮らすに実装する場合 implements キーワードを使う
          • 複数のインターフェイス を同時に実装することもできる
          • インターフェイスに定義されているメソッドを実装しないと致命的なエラーとなる
          • 定義済みインターフェイス
            • Iterator : foreach 構文で扱うことができるようになるイテレータインターフェイス
            • RecursiveIterator : 再帰的にいてレートを可能にするためのイテレータインターフェイス
            • SeekabkeIterator : シーク可能なイテレータインターフェイス
            • ArrayAccess : 配列のようにブラケット([])によるアクセスを可能にするインターフェイス
            • Serializable
            • Coutable
          • インターフェイスを定義し、それを実装させることのメリットは、それを実装したクラスのオブジェクトであれば、特定の機能を必ず実装していること。
        • クラスとオブジェクトの機能と特徴
          • マジックメソッド

            • 特定の条件で呼び出されるメソッド
            • マジックメソッドはどのようなクラスにも定義出来、定義されている場合に必要に応じて呼び出される
            • マジックメソッドは必ず public で定義しなければならない
            • PHP には 14 のマジックメソッドが用意されている
              • get : アクセス不能なプロパティを取得しようとする
              • set : アクセス不能なプロパティに代入する
              • call : アクセス不能なプロパティに対して isset () か emptyを実行
              • callStatic
              • sleep
              • wakeup
              • construct
              • destruct
              • isset
              • unset
              • toString
              • invoke
              • setstate
            • オーバーロード
              • デフォルトの挙動を上書きする
          • 遅延性的束縛
            • static キーワードを持ちいて、子クラスのメソッドをコールすることができる
          • オートロード
            • クラスを必要な時に呼び出す仕組み
            • 定義されていないクラスを使おうとした時、指定されたオートロード関数が呼び出される
            • autoload () 関数 : 引数に使おうとしたクラス名を受け取る
            • Class名とファイル名は、同じにしなければならない
      • 名前空間
        • PHP 5.3 から実装された機能
        • クラスや関数の使える名前の集合を限定し、関数名やクラス名の衝突を防いだり、機能の参照をわかりやすくするための機能
        • 名前空間はいわばディレクトリのようなもの
        • 名前空間の区切りにはバックスラッシュ ( ) を用いる
        • 名前空間を定義した場合、グローバルな関数やクラスは先頭にバックスラッシュをつけ、グローバルな名前空間から参照しなければいけない
        • 非修飾名 : 名前空間区切り ( ) を含まない識別子 ( 例 Cake )
        • 修飾名 : 名前空間区切り ( ) を含むh識別子 ( 例 FoodDweets )
        • 完全修飾名 : 名前空間区切り ( ) から始まる識別子
        • 名前空間の定義
          • namespace 名前空間;
          • namespace 名前空間サブ名前空間
          • 名前空間の影響を受けるのは、クラス、関数、定数 ( constのみ )
        • インポートルール
          • use as キーワードを使うことで名前空間のエイリアスを作成できる
        • 動的な名前空間の使用も可能 : 基本、シングルクオートで囲む
      • 例外
        • PHP の例外

          • throw new 例外クラス名 ( [メッセージ, [エラーコード,[前の例外オブジェクト]]])
          • 例外は try ブロックで囲むことで補足できる
          • try 文にはそれに対応した catch 文が必要
          • 最も簡単な例外の使い型は、すべての例外の基底となる Exception クラスを使うこと。
          • 例外を拡張する場合でも、すべての例外クラスは Exception クラスを継承しなければならない
      • 参照
        • PHPにおける参照 (リファレンス) とは、ある値を指し示すものを言います。別の言い方をすると、変数のもつある値の格納領域を指し示す別の名前をもつ変数のこと。

使いやすいWordPressを目指す!管理画面カスタマイズ – プラグイン編

WordPress も来週には3.9が出るということで、今回はWordPressネタを書いてみます。

WordPressは更新しにくい?

最近よく聞く言葉です。

確かにWordPressはブログ型のCMSですので、ページを編集する….といった時は直接テンプレートを編集したりなど、HTML,CSSなどの知識が必要になることが多いかもしれません。

ただ、次に出る3.9でも 「テーマのカスタマイズ」 でウィジェットを挿入できるようになったり、
その次バージョンではフロントエンドでの記事編集機能が予定されていたりなど、直感的な操作で記事を作成する改善が見受けられます。

現状、そしてこれからのWordPressで施策するときっと便利であろうカスタマイズ方法をババーンと幾つか紹介します。

今回はプラグイン編ということで、主にプラグインを使用して簡単にできるカスタマイズをお送りします。

目次

  1. ダッシュボードのカスタマイズ
  2. ウィジェットのカスタマイズ
  3. 投稿方法のカスタマイズ

ダッシュボードのカスタマイズ

WordPressでログインして一番最初に表示される「ダッシュボード」。
ここをカスタマイズして、ユーザーが必要な情報を出してあげます。

Dashboard Widget Sidebar

このプラグインを使うと、ダッシュボードにウィジェットがおけるようになります。

さらに後述する Black studio tinyMCEを合わせて使うと、もう怖いものなしです。

僕はダッシュボードに、説明動画、ショートカットリンク、トラブルシューティングなどを置くようにしています。

PDFなどでマニュアルを作ったりするより、20分程度の説明動画をとってダッシュボードに貼り付けておいた方がクライアントさんからするとわかりやすいようです。

また、ショートカットリンクも3.8から管理画面で使えるようになった dashiconsを使ってアイコンを使用して見立たせたり、
できるだけ気を使えばとてもわかり易いものになります。

ウィジェットのカスタマイズ

冒頭に説明したように、3.9からテーマカスタマイザーでウィジェットを追加することができるようになりました。

これは便利そうですね!

まだまだウィジェットを使用していないサイトもたくさん見ますが……あと、メニューも。

制作する上でも、ウィジェットはだいぶ役立ちます。そこら辺をご紹介できれば。

Black Studio TinyMCE Widget

ヴィジュアルエディターがウィジェットとして使えるようになるプラグインです。

もちろん、メディアのアップロードから画像を挿入できます。
サイドバーのバナーなんてのも、これで管理すると変更しやすいですよね。

3.9のウィジェットカスタマイザーでも動作します。

( 最初は動かないと思ってサポートフォーラムに書き込んだらもう改善済みでした ; バージョンが違ったという…. )

Display Widgets


ウィジェットの表示をコントロールできるプラグインです。

  • ユーザーのログイン状態
  • テンプレート
  • カテゴリー
  • カスタム投稿タイプ / カスタム投稿タイプアーカイブ
  • 固定ページ
  • 投稿IDを指定

上記の条件を組み合わせて、ウィジェットを選択したページでのみ表示することが可能です。

jetpackにも同じ機能があるのですが、こちらのほうが機能も多く便利な印象。

これで、sidebar-page.phpとか、”header-hogehoge.php”とか、乱雑なテンプレートを作る必要がなくなります。

投稿方法のカスタマイズ

WordPressでサイトを制作するからには、新着情報やニュース・ブログなど、更新頻度が高いコンテンツが多いのではないでしょうか。

標準の投稿機能であるWYSIWYGではそもそもレイアウトが難しく、ショートコードやクイックタグでの記事編集に嫌悪感をもつ方もいます。

世界中でもWordPressでの投稿方法を考えている人( または企業 )は多く、
Visual Composerや、Motopresspagelinesなど、革新的な記事編集方法を売りに、いっぱい金を稼いでいます。

かといって日本人に、上記のようなインターフェースは無理です。( 全部英語だし )

他の手段で簡単に組み込みるものをまとめました。

Advanced Custom Fields

言わずもがな知れた、カスタムフィールドを簡単に作成出来るプラグインです。

このプラグインにはアドオンも複数あり、

この2つにはお世話になっている人も多いんじゃないでしょうか。

上記のプラグインの組み合わせで、コンテンツブロック型の投稿方法をいとも簡単に実装することができます。

こんな形でブロックを積み立てていく形式の投稿方法が可能になります。

ここらへんは我らがWordBench 名古屋のアイドル yamadaさんのカスタムフィールドで作るカンタン投稿システム
が参考になるでしょう。

デザイニング インブラウザ の考えで流行っている、CSSのモジュール化などの面から見ても相性はバッチリ。

HTML + CSSモジュールの側面で追加するとなおよしです。

ただ、ACFは内部的なキーの持ち方が特殊でして、絞り込み検索などを想定する場合には
カスタムタクソノミー使うなど代替手段をおすすめします。

メモ : ACF 5の可能性

実はgithubにてACF 5の開発が進められています。

https://github.com/AdvancedCustomFields/acf5-beta

このバージョンがそのままリリースされるとなると、
ウィジェットにフィールドを追加できるようになります。

つまりは、ウィジェットは空のままコピペで作成し、ACFでフィールドを追加するということも可能にナルわけです。

Page Builder by SiteOrigin

ウィジェットベースでの記事作成が可能になるプラグインです。

![](/content/images/2014/Ap
r/admin_pagebuilder-2.gif)

メリット

  • カラム数を指定して追加
  • ウィジェットがほぼほぼ全て挿入できる
  • カラム幅をドラッグで変更可能
  • ウィジェットの複製、ドラッグ&ドロップでのウィジェット移動、テンプレート機能など、編集効率が上がる機能が盛りだくさん

デメリット

  • ビジュアルエディター・テキスト・エディターが( ほぼ )使えなくなる。
  • 動的にCSSを出力しているため、表示速度が遅くなる。
  • 基本英語 ( 翻訳ファイルはあるが、未対応部が多い)
  • 今後追加されるWordPress Front end Editorなどとの互換性が心配

といったデメリットも有ります。

GPL +3で、WordPress公式プラグインリポジトリでも配布しています。

特に、エディター関連は今後どんどんアップデートされるので、
導入には気をつけてください。

あとがき

いかがでしたでしょうか?

WordPressも日々進化するCMSであり、その使い方次第では何倍も便利になります。
他にも、こんなテクニックがある!といったことがあれば、教えてください。

次回は、使いやすいWordPressを目指す!管理画面カスタマイズ – アクションフック編をお送りします。

WordPress、投稿方法のベストプラクティス

今回は、WordPressの投稿方法について色々書き綴っていきたいと思います。

使いやすい?WordPressのWYSIWYGエディター

WordPressは長いことTinyMCEを使用したWYSIWYGエディターによる投稿方法が実装されてきました。

さて、もうそろそろ….ということで、Make core の方では既に次世代のエディターの開発が行われています。

WYSIWYGエディタはあくまでも文章を入力するためのツールです。
確かにWordPressはブログツールですので、そのまま使用することができます。

では、どんな時に使いにくいか。

思い浮かべて欲しいのですが、
文章以外の用途にヴィジュアルエディターを使用する時って、使いづらい、投稿しづらいイメージがありませんか?

  • 複雑なレイアウト
    • 2カラム・3カラムなどのブロック型
    • *

  • *

FC2 blogがオープンソースになったらしいので使ってみた。

https://github.com/fc2blog/blog

FC2ブログがオープンソースになったなったとのことを聞き、ちょっと触ってみました。
ライセンスはMIT。
下の方にインストールから内部的にどうなっているのかざっくりざっくり書きますが、
まず、触ってみて感じた感想を書き出したいと思います。

触ってみた感想。

  • 簡単・シンプル。
  • 1つのCMSで、簡単に複数のブログ運営が可能( サブディレクトリ型 )。
  • テーマも独自のテンプレートタグで記述。phpは書かなくて平気。
  • ドキュメントもそこそこ。
  • 管理画面も日本っぽいデザインのため、馴染みやすい。
  • スマートフォンの管理画面が使いやすい。
  • テンプレートの種類も豊富 ( ださいけど )
  • なぜか管理画面も標準で英語に対応している。
  • 静的なページの作成は当然だがない。

こんな所ですかね。ブログの作成という目的なのであれば、WordPressより簡単にできると思います。

インストール完了まで

データベースなどの設定は、

public/config.php.sample

を編集します。
丁寧に日本語でコメントがしてあるのでなんなく設定。

その後、config.php.sample をconfig.phpにリネームします。
次に http://example.com/admin/install.php にアクセス。

salt値を変更してくださいとのことで、例をそのままコピペし次へ。

IDやパスワードを入力してインストール完了です。

そして管理画面へ。

…./

おお!スマホのUIは使いやすい。

カテゴリやタグ・コメント機能といった、ブログの機能はだいたいそろっています。

内部的なこと

独自テンプレートエンジン

テンプレートは管理画面から編集・作成することができますが、データベースにまるまる保存し、phpに変換しているようです。

app/config/fc2_template.php

上記のファイルにテンプレートタグと変換するphpのリストがのっています。

コンパイルされたphpファイルは、

app/temp/blog_template/

フォルダの奥深くに保存されています。

基本的に1ページでURLから渡されるパラメーターで分岐しているようです。

プラグインというWordPressでいうウィジェットのような機能もありますが、
おんなじようなことをしているようです。

….ごく普通のブログエンジン

他のファイルもそろっとみてみましたが、いたって普通の?ブログエンジン的な作りになっていました。

まとめ

とにかく軽量!シンプル!なブログウェアです。

wigsygエディタには http://elrte.org/ が使用されています。

ただ、実際に使うかというと…..
その時はFC2ブログ使えばいいかと思いました!

そうか!これが作戦なのか!やるね!FC2!

metalsmith – シンプルな静的サイトジェネレーター

metalsmith という静的サイトジェネレーターを見かけたのでメモ。

http://www.metalsmith.io/

EVERYTHING IS A PLUGIN

すべてがプラグインである。

このキャッチフレーズに惹かれてちょっと試してみました。
金物細工師って意味も好きですね。
何よりメタル。
以前メタルにハマっており、slipknotとか、Dragon Forceとかメロメロでした。

そんなmetalsmithですが、
ベースはnode.jsで書かれております。

1. ファイル階層を準備します。

非常にシンプルな静的サイトジェネレーターのため、ファイル構造などは自信で設定します。

今回は下記の階層を想定し、jekyllみたいなことをやってみます。

demo /
    _layouts/
        index.html
    _posts/
        post01.md
    _site/

_layout フォルダにはラップするhtmlをいれ、
_posts フォルダにはマークダウンを記事として保存します。
_site フォルダには構築後のhtmlファイルが入るとします。

2. package.jsonの用意

まずは package.json を書きます。
metalsmith本体と、プラグイン郡を用意します。

{
  "name": "metalishihara",
  "private": true,
  "dependencies": {
    "metalsmith-watch": "0.0.2",
    "metalsmith-sass": "0.1.1",
    "metalsmith-drafts": "0.0.1",
    "metalsmith-templates": "^0.1.0",
    "metalsmith-markdown": "^0.2.1",
    "metalsmith-permalinks": "^0.1.0",
    "swig": "^1.3.2",
    "metalsmith": "^0.2.3",
    "metalsmith-sass": "~0.1.1"
  }
}

そのままコマンドでインストール。

$ npm install 

これで、metalsmithをはじめとするパッケージ郡がインストールされます。

3. metalsmith.jsonの用意

metalsmithでは、javascriptを書いて構築する方法と、
metalsmith.json という設定ファイルを作り、コマンドから構築する方法の2つがあります。
今回はめんどくさいので
同じ階層に metalsmith.json を用意します。

{
  "source": "./_posts",
  "destination": "./site",
  "metadata": {
    "title": "hogehogehoge",
    "description": "hogehogehogehogehogehoge!"
  },
  "plugins": {
    "metalsmith-watch": "*.md",
    "metalsmith-drafts": true,
    "metalsmith-markdown": true,
    "metalsmith-sass": {
        "outputStyle": "expanded"
    },
    "metalsmith-permalinks": {
      "pattern": ":title"
    },
    "metalsmith-templates": {
      "engine": "swig",
      "directory": "_layouts"
    }
  }
}

jsのテンプレートエンジンもswigとかhandlebarsjsとかお好きなのをどうぞ。

まぁ、デモなのでいろいろ適当に書いていきましょう。

_layouts/post.html

<html>
<head>
  <title>これは投稿です。</title>
</head>
<body>
  <h1>{{ title }}</h1>
  <time>{{ date | date('Y-m-d') }}</time>
  {{ contents | safe }}
</body>
</html>

_posts/post01.md

---
title: 最初の投稿
date: 2012-08-20
template: post.html
---

# これは最初の投稿です。

* これはリストですこれはリストです
* これはリストですこれはリストです
* これはリストですこれはリストです
    * これはリストですこれはリストです
    * これはリストですこれはリストです
    * これはリストですこれはリストです
    * これはリストですこれはリストです

    * マークダウンでかけます。
    * 自動でコンパイルもかけてくれます。

そして、

$ node node_modules/.bin/metalsmith

というコマンドを打つと、
_siteフォルダ内に書き出ししてくれます。

…… 。
上記のほとんどは examples内にまとめられていますので、参考にしてください。

感想

node.jsでのコーディングにおいて参考になるかなと思いました。
( metalsmith.ioのソースも公開されています。 )

バリバリコード書いて、カスタマイズするにはむいているのかなと思いますが、敷居は少し高いのかなと思いました。

これからですかね。

Sublime Text 3 からEvernoteへ。~ そしてマークダウンで ~

普段僕はVimかSublime Text 3を主力のエディタとして使用しています。

特にSublime Textでは手軽に拡張できるPackage Control という機能があります。

先日、Package Control – the Sublime Text package managerをしらーと見ていると、おもしろそうなプラグインを発見したので、
感想を書き綴ります。

Sublime TextからEvernoteへ

元々、SublimeText2用にプラグインがあったのですが、
そこからフォークしてフォークして作られたプラグインです。

https://github.com/bordaigorl/sublime-evernote

SublimeText3からEvernoteへマークダウンを保存できるというプラグインなのですが、
なぜエディタは人をそこまで突き進めるのか謎ですねホント。
別に他のでいいんじゃねと。

上記のgifでもちょっとでてますが、タグやノートの設定なども可能です。

まぁでも、便利ですね(ほっこり)。
作成していただいた方に感謝です。

ちなみに

Vimではもっと高機能なevervimがあります。
うーむ。すごい。

デザインツールのあれこれ

HTML5名古屋 #11 で「デザインツールのあれこれ」というテーマでLTをしました。

スライド内で紹介できなかったものも多々あったので、
(非常に) 簡単に書き出してみました。

Photoshop Plugin

1. BlendMeIn

ベクター素材をPhotoshop内で表示。ライセンスにはご注意を。

BlendMeIn

2. Flat Icon

フラットなアイコン素材をPhotoshop内でクロール・挿入。

Flat Icon

3. Ink

幅・高さ。Opacityといったのレイヤー情報を「_Ink」ディレクトリ内に、レイヤーとして書き出し。

Ink

4. Socail Kit

FacebookやTwitterなどのPSDテンプレートを用意。

Socail Kit

5. Zeick

選択したレイヤー(文字・シェイプなどのベクターに限る)を、ワンクリックでSVG書き出し。

Zeick

6. Random user generator

ランダムなユーザー画像・情報を表示・挿入可能に。

Random user generator

7. SUBTLE PATTERNS PHOTOSHOP PLUGIN

高品質なパターン素材をPhotoshop内でクロール・挿入。

SUBTLE PATTERNS PHOTOSHOP PLUGIN

8. PNG HAT

選択したレイヤーをBase64や、png・2xでの書き出しが一瞬で可能に。

PNG HAT

9. LAYER CONTROL

複数のレイヤー・グループのリネームや、使用していないエフェクトの削除

LAYER CONTROL

10. render.ly

命名規則に従うことで、一つのPSDファイル内でページを分けて書き出しできるように。

render.ly

11. composer

複数のレイヤー・グループ操作が可能に。

composer

12. Renamy

先に紹介したLAYER CONTROLより、柔軟なリネームが可能です。
また、よく使われる単語をサジェストで表示してくれます。

Renamy

13. Slash

名前・キャラクターの予想通り、スライスのためのphotoshopプラグインです。
しかし、自動で連番をつけたり、ディレクトリ階層を再現したりと他のスライス拡張ツールよりも多機能

Slash

14. Transform each beta

photoshopの時間がかかる作業の一つである、レイヤーのリサイズがしやすくなるスクリプトです。
各レイヤーの起点はそのままに、大きさだけリサイズできます。

Transform each beta


For Sketch.


https://gist.github.com/1shiharaT/9368608#file-design-tool-md


情報収集の取り組み

HTML5名古屋 #10で20分程お話しをさせていただきました。

前に軽くまとめていたのですが、今回発表者が少ないということで。

かなり簡素な作りになってますw

情報収集に関しては人それぞれ方法があると思うので一概には言えないですが、

僕の場合はこんな感じです。

こもりまさあきさんのSNSフィードも情報がものすごく早いので、
是非!

https://www.facebook.com/proteanim?fref=ts