SVGをプロジェクトで利用してわかったこと

SVGをプロジェクトで利用し始めてわかったこと。

ここ数ヶ月、やっとSVGを実際の案件で利用し始めて、様々なことを学びました。
ハマって時間を潰すこともあれば、便利だなと思うことも。
この記事では、いくつかの感想をまとめてみます。

デザインツールについて

SVGが作れるデザインツールも数多くあり、今ではphotoshopでも作れるほど。

Adobe illustlator
Adobe photoshop
sketch.app
Affinity Designer

…etc。
他にもあるとは思いますが、メジャーなもので上記の4つでしょうか。

上記で一番コーディングしやすいツールは Sketchです。一番綺麗なコードを出してくれると思います。
illustrator もまだ大丈夫ですが、結構余分な情報もエクスポートされます。
photoshop もエクスポートはできますが、シェイプであることが前提です。また、defs タグの中に style タグと CSSで色などが定義されたSVGファイルがダウンロードされるので、HTML内でclassが衝突し思わぬ事態が起こりやすいです。

今でもスタンダードなツールはadobe 製品です。
photoshopでも、SVG化が考えられる箇所についてはillustratortで作成し、外部ファイルとして埋め込むようにすることが大切です。

ブラウザ互換に苦労する

SVGは非常に複雑な仕様ですので、SVGを解析しレンダリングするブラウザでも、ちょっとした差やできることに違いがあり、結構苦労することがあります。
特にIE8対応がマストの場合(まぁなくなるとは思いますが)、SVGを利用する選択肢はできるだけ避けた方が吉かもしれません。

SVGを利用したアニメーションでも、IEでは transform-origin プロパティが効かなかったりします。*思い切って GSAP や Snap.svg といったライブラリを利用したほうが余計な手間がかからずすみます。
SMIL Animate は既に削除される仕様なので、今後は利用しないほうがいいでしょう。

ロード方法について

SVGは基本的にHTML内に直接埋め込まないと、CSSでのプロパティの操作や、JavaScript でのアニメーションを実装することはできません。
Jade では include を利用することでより便利になります。
もしくは、icomoon などでアイコンフォントに変換したほうが楽だと思います。

まとめ

SVGは既にプロジェクトで利用できますし、使いようによってはとても便利です。
しかし、便利さに目がくらんでしまうと、意外に痛い目にあってしまいます。
今回紹介したことだけではなく、プロジェクトの規模感や仕様に合わせ対策を練りましょう。

firefox の placeholder カスタマイズ注意点

Firefox で Placeholder をカスタマイズする時、
:-moz-placeholder ではなく ::-moz-placeholder を利用する

コーディングルール策定までの道のりその①

社内のコーディングルールをそろそろ決めなければ、、、

※ この記事はパブリックなメモです。

1 HTMLコーディング

HTMLバージョン

基本的にHTML5を使用する。

スペース

コードのインデントはスペース2つで表現する。

HTML タグの命名

必ず小文字で記述するものとする。

ID、Class の命名

IDについては、基本的には使用しないものとする。ただし、JavaScript によってなんらかの理由により使用せざる得ない場合は例外とする。

class の命名には、BEM 記法を採用する。

ページに依存する命名 ( .home-banner, .about-contents 等 ) は極力さけ、コンポーネント単位での設計を心がける。

画像の命名

画像の命名については、以下の通りとする。

接頭辞として、Block を利用する
次に、Element を指定する
最後に数字を付与する。10未満の場合は、接頭辞として0をつける。
各単語の接続詞としては、- (ハイフン)を利用する。

例

profile-text-01.jpg

profile-bg-01.png

テンプレートエンジンについて

特別な理由がない場合には Jade を採用する。なお、極力HTMLテンプレートエンジンを利用してマークアップすることを心がける。

2. CSS

ファイル命名

基本的に、メインとなるスタイルシートを記述するファイルは style.css と命名する。

ファイル分離について

CSSファイルは一つにまとめること。

@import によるCSSファイルの読み込みは

CSS設計を考えてみた

最近HTMLコーディングをすることが増えてきました。
レスポンシブWebデザイン(以下RWD) をする上で大切なことってやっぱりCSSの設計っすね。

何回かコーディングやって決めたことをメモします。

はじめに確認すること

プロジェクトの最初にやらなければならないのは、まずは把握することです。以下のこと必ず最初に確認しましょう。

対応ブラウザ

最近ではIEの対応もほとんどなくなりつつある気がします。あってもIE9まで。プログレッシブエンハンスメントでの対応。

命名規則

BEMを導入する。ページ名に依存した命名をせずに、コンポーネントごとの命名をすること。また、モジュール名で簡潔にイメージできる命名を心掛ける。

モジュールのリストアップ

デザインカンプをすべて確認し、どのようなコンポーネントが存在するかリストアップする。

HTMLコーディングルールの確認

.editorcofigなどのツールを利用して、個人の環境に左右されないことが大切。

コーディング時

コーディングする時に注意すべきこと。

Sass

導入するが、過度のネストは厳禁。コンパイル後のCSSを意識して書くこと。納品案件の場合、最後にはSassを切り捨てることもある。

IDでのスタイリングは極力避けること。

!important の利用は極力避けること。

メディアクエリーは、Sass 内に直接ネストして埋め込むこと。

・ファイル命名規則

ScssファイルはBEMで記述した一つのモジュールに、一つのファイルが対応するように命名。クラス名でファイルを開くことができるため、効率がいいと考える。

どんどんSassファイルを増やせるように、css-globbingの導入は必須。

姓名判断について考えてみた

最近忙しい忙しいばかり唱えている呪術師石原です。

実はプライベートで12月にパパになります。
子供ができるということは、父親になること。ダメパパになりそうですね。

子供が生まれる時に、絶対にしなければいけないのが名前決め。

我が家ではかれこれ数ヶ月名前を決めるために悩みに悩み、
残り2ヶ月の今でもさっぱり定まっていないのが現状なんです。

原因は、姓名判断。

僕は全く神様だとか、信仰だとかを気にしない人間で、もちろん占いの類もそう。
姓名判断もこれまで聞いたことはあったけれども、世の中でこんなに広まっているとは。
たいてい、周りの経験者方に聞いても8割ぐらいは参考になさったそうで。

これまで数え切れないぐらいDOMに命名してきた僕が提案しても、姓名判断で突っ込まれる。うーんどうしたものか。

大体、姓名判断ってなんなのと思い調べてみました。

姓名判断の歴史

実は、画数の考え方（日本式姓名判断）の歴史は80年ちょっとです。

姓名判断の歴史は80年ちょっと｜ことだま「名前」占い水蓮オフィシャルブログPowered by Ameba :

姓名判断の理論の基礎的内容は熊﨑健翁によって広く世に広められ、熊﨑が姓名判断の源流と広く認知されているが、熊﨑は姓名判断の理論を開発したのではなく、明治時代の易者・林文嶺と言語学者・永杜鷹堂が理論化したものを大衆向けによりシンプルにしたものが熊﨑の姓名学である。

姓名判断 – Wikipedia

どうやら、現在広く使われている姓名判断って熊崎健翁という方が昭和に入って発表した「熊崎式姓名判断」というものを元にしているようで。

はは、一つ根拠をつかんだ

よくある姓名判断サイトについて

複数の姓名判断サイトをみたところ、画数から

・天格 : 苗字の画数
・外格 : 苗字の一文字目と名前の最後の文字の画数
・人格 : 苗字の最後の文字と名前の最初の文字の画数
・地格 : 名前の画数
・総格 : 苗字と名前を合わせた画数

を計算し、各格の画数に応じてあらかじめメッセージを用意し結果を出力する。

中には、

var TenChiGai = RndVal(Math.pow(Ten * Chi * Gai, (1.0 / 3.0)) * 30.0, 10);

みたいな形で格を計算し、メッセージを出すようなものを。いくら流派によって判断が変わるとはいえ、こんな算出方法本当にあんのかいな。

結論

画数調べるって言って、上記のようなサイトで調べてるので、そこを丁寧に説明。
あわよくば自分で作って、自分がつけたい名前の結果を満点にして、ばれないように嫁さんに知らせよう。

– – –

補足

面白い Github のリポジトリ見つけた。

暮らしの姓名判断
https://github.com/MasakatsuNakamura/seimei-kurashi
0 forks.
0 open issues.
Recent commits:

composer.lock, ma-nakamura
'test', ma-nakamura
'test', ma-nakamura
あじあ姓名うらないに集約, ma-nakamura
README修正, Masakatsu Nakamura

Sketch 3 の魅力

どうも。@1shiharaTです。
今度「Sketch 3 勉強会 in NAGOYA」を開くついでに集客がうまくいっていない(汗) ので記事を欠かさせていただきます。

Sketch の魅力

Sketch 3 は、Bohemian Coding 社が開発・販売している Mac 用のベクタードローイングソフトです。

ベクタードローイングソフトといえば思いつくのは、米 Adobe 社が開発・販売している Illustrator
もしくは Inkscape などが頭に浮かぶかも知れません。

Sketch はベクタードローイングソフトという名を冠しながら、
ピクセルを前提にしているという不思議なソフトです。

「新規開発が事実上中止となっている Adobe Fireworks の後継ソフト」

というキャッチコピーを良く聞くかもしれませんが、
実際に使っている身としては、その機能・操作性を大きく凌駕しているのではないかと感じています。

そこで Sketch の魅力について、幾つか上げていこうと思います。

1. 軽い。Mac に特化している。

Adobe 製品を使っていると感じる、重いという感覚。
誰しもその胸にしまいながら、仕方なく使用しているという方も多いのではないでしょうか？

Sketch はとにかく軽いです。さくさく軽快に動きます。

起動・操作のレスポンス供に Adobe 製品とは比べ物になりません.

Apple のフレームワークを活用し、ネイティブアプリとして開発されているため、iCloud やバージョン機能などもフルに取り込まれています。

2. 細かい操作性。

Sketch のユーザーインターフェースは、初見で見た時に「こんなシンプルでまともなの作れんの？」と不安を覚えることがあるかもしれません。

しかし、シンプルイズベストとはよく言ったもので、そのUIにすべてがつまっています。

キーセットを覚えるまでは慣れないかもしれませんが、
(といっても自然に使える程度) ほとんど Adobe 製品と同じような感覚で使用できます。

上記のGIFのような操作はもちろん、
これに Shift キーを合わせて使用すると 10px ずつマージンを測りながら移動できます。

3. シンボル・スタイルの共有

Fireworks にはお馴染みの機能である、シンボル機能も Sketch には搭載されています。

ボタンを繰り返し設置したり、
h1,h2,h3 などのHTMLタグに合わせてスタイルを共有したり。

より、コーディングの時のことを頭で考えながら作ることができるようになりました。

4. 充実した書き出し機能

Sketch はベクターベースのドローイングソフトですが、
豊富な書き出し機能により、 Web デザインにもより使いやすいものとなっています。

png, jpg といった従来のフォーマットはもちろん、
svg,eps, PDF での書き出しも容易です。

シェイブやレイヤーをスライスする時も、一々選択範囲を指定せずとも、簡単にスライスすることができます。

5. プラグインによる拡張

Sketch は、jstalk で機能拡張用のプラグインを書くことができ、その多くが Github などで公開されています。

最近では、 Sketch toolbox というアプリでプラグイン管理をすることができるようになりました。(まだベータ版ですが)

sketch-mesure : レイヤーの幅や高さ、丸みなどの情報を別レイヤーとして自動生成してくれます。
content-generator : 写真やテキストのダミーを自動生成してくれます。
日本語版も配布されています。
Duplicator : 素の状態でもレイヤーをコピーしやすいですが、このプラグインを使用することでより柔軟に複製することが出来ます。

6. ページ・アートボード

イラストレーターではおなじみのアートボード、
Fireworks でお馴染みのページが Sketch には容易されています。

Web サイトを作る時に、ページ毎にファイルを分けて保存するとなると、
ファイル数も膨大になりがちですが、
Sketch では、一つのファイル内で完結することができます。

また、アートボードも作成できるため、
一つのページ内に、PC・タブレット・モバイルのデザインを作成しつつ、
ページ毎にデザイン制作を進めていくことができます。

もちろん、前述した「シンボル」機能もページ・アートボードを超えて共有することができます。

これにより、いくつかのページをコンポーネントデザイン用のページに当てて、シンボル機能を使用し、ページごとにコンポーネントを挿入するなんてことも可能です。

7.その他地味に使えるところ

1. 画像の切り抜き・貼り付け

Sketch は画像の編集が苦手なのですが、
なんとかごまかせます。

例えば、ダブルクリック後に選択範囲を決めコピペすると、
その選択した範囲のビットマップ画像を別レイヤーとして作成してくれたりします。

2. Photoshop、Illustrator からコピペ

その他デザインソフトから、コピペでデータを受け渡しもできます。
ベクターベースのレイヤーでしたら、ほとんど誤差なしで Sketch に貼り付けることができます。

いかがでしょうか？
上記のことは、Sketch 3 の機能ほんの一部です。
10月18日の Sketch 3 勉強会 in NAGOYA では、こもりまさあきさんにもっと詳しくわかりやすく Sketch 3 の解説をしていただけますので、
是非ご来場ください！

Sketch 3 勉強会 in NAGOYA + Webデザインと開発の未来

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 )
  - また、型演算子では下記の２項を調べることも出来ます
    - 特定のクラスを継承したクラスのインスタンスか
    - 特定のインターフェースを実装したクラスのインスタンスか
- 三項演算子
  - 条件演算子とも呼ばれる
    - 条件式 ? 式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 ) { // 配列以外が渡されるとエラー
  - 参照による引数と返り値
    - 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つ )のものはマジックメソッド
    - クラスとオブジェクトの機能と特徴
      - オートロード
        
        クラスを必要な時に呼び出す仕組み
        
        定義されていないクラスを使おうとした時、指定されたオートロード関数が呼び出される
        
        autoload () 関数 : 引数に使おうとしたクラス名を受け取る
        
        Class名とファイル名は、同じにしなければならない
  - 名前空間
    - PHP 5.3 から実装された機能
    - クラスや関数の使える名前の集合を限定し、関数名やクラス名の衝突を防いだり、機能の参照をわかりやすくするための機能
    - 名前空間はいわばディレクトリのようなもの
    - 名前空間の区切りにはバックスラッシュ ( ) を用いる
    - 名前空間を定義した場合、グローバルな関数やクラスは先頭にバックスラッシュをつけ、グローバルな名前空間から参照しなければいけない
    - 非修飾名 : 名前空間区切り ( ) を含まない識別子 ( 例 Cake )
    - 修飾名 : 名前空間区切り ( ) を含むh識別子 ( 例 FoodDweets )
    - 完全修飾名 : 名前空間区切り ( ) から始まる識別子
    - 名前空間の定義
      - namespace 名前空間;
      - namespace 名前空間サブ名前空間
      - 名前空間の影響を受けるのは、クラス、関数、定数 ( constのみ )
    - インポートルール
      - use as キーワードを使うことで名前空間のエイリアスを作成できる
    - 動的な名前空間の使用も可能 : 基本、シングルクオートで囲む
  - 例外
    - PHP の例外
      - throw new 例外クラス名 ( [メッセージ, [エラーコード,[前の例外オブジェクト]]])
      - 例外は try ブロックで囲むことで補足できる
      - try 文にはそれに対応した catch 文が必要
      - 最も簡単な例外の使い型は、すべての例外の基底となる Exception クラスを使うこと。
      - 例外を拡張する場合でも、すべての例外クラスは Exception クラスを継承しなければならない
  - 参照
    - PHPにおける参照 (リファレンス) とは、ある値を指し示すものを言います。別の言い方をすると、変数のもつある値の格納領域を指し示す別の名前をもつ変数のこと。

WordPress Development Bookmarks.md

Ghostに移行した後の記事がWordPress関連という、なんとも言えない感じ。

ってことで、WordPressに関するリソースを僕なりにまとめてみました。
あとでGithubなんかに公開したいと思います。
案外時間かかるもんですね。これから更新し続けようと思います！

もし、おすすめのツールとかありましたら教えてください。

元ネタは https://github.com/dypsilon/frontend-dev-bookmarks

github : https://github.com/1shiharaT/WordPress-Developement-bookmarks

WordPress Development Bookmarks

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アプリケーションを動かしているのは、

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

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

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

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

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

2013/11/11 ~ 14日 Bookmarks.

2013/11/11 ~ 14日に読んでおお！と思ったweb関連記事まとめ。

1. ink

レスポンシブなEmailを作成できるフレームワーク

tool 、Framework

2. Glyphs

アイコンPSD

http://glyphs.bulb9.com/

3. SVGeneration

SVGをGUIで。Data URLでの取得も可能。

http://www.svgeneration.com/

4. OpenNote

Evernote、 MicroSoft OneNoteライクなwebアプリケーションを作成できる。
(ライセンスはどうなのか知らない。)

http://stardrive.us/OpenNote/index.php?folderID=7399&noteID=6936

5. Free vectors icons for download and Icon font | Flaticon

Photoshopのプラグインまで用意してあるフラットなiconセット。

http://www.flaticon.com/

6. Formoid – Beautiful CSS Form Generator

お問い合わせフォームを簡単に作成可能なアプリ。無料版だとformanoidの表記がフッターに入る。

http://formoid.com/

7. Typeform

ダイナミックなお問い合わせフォームの構築ツール。無料プランあり。

https://www.typeform.com

8.Dropzone.js

ドラッグアンドドロップでアップロード出来るエリアを表示するjavascriptライブラリ。

Dropzone.js : http://www.dropzonejs.com/

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

あたりを参照。

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

それだけ。

WordPress でレスポンシブ対策には必須のプラグイン？「BJ Lazy Load」

投稿内の画像を自動で遅延ロード、最適化、リサイズ、キャッシング。
さらには、画面の解像度までみて判断してくれる優れもの。

WordPressでレスポンシブwebデザインを実装するならもはや必須的なプラグインだと思います。

遅延ロードというのは、画像が表示領域に入るまでは別の画像 ( 極端にサイズが小さいもの、透明の画像とか) を表示しておいて、表示領域に入った際に読み込むというテクニックです。

もちろん、レスポンシブwebデザインでなくても使えますので、ぜひともご参考にー。

BJ Lazy Load

情報収集の取り組み

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

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

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

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

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

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

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

情報収集の取り組み from Takashi Ishihara

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

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/bomberstudios/7694497 : 先人の方のGistを参考にして下さい。

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

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があります。
うーむ。すごい。