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 プロパティが効かなかったりします。*思い切って GSAPSnap.svg といったライブラリを利用したほうが余計な手間がかからずすみます。
SMIL Animate は既に削除される仕様なので、今後は利用しないほうがいいでしょう。

ロード方法について

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

まとめ

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

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

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

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

1 HTMLコーディング

 

HTMLバージョン

基本的にHTML5を使用する。

スペース

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

 
HTML タグの命名

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

ID、Class の命名

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

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

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

画像の命名

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

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

profile-text-01.jpg

profile-bg-01.png

 

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

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

2. CSS

ファイル命名

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

ファイル分離について

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

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

 

CSS設計を考えてみた

image

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

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

はじめに確認すること

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

対応ブラウザ

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

命名規則

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

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

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

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

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

コーディング時

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

Sass

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

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

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

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

・ファイル命名規則

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

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

 

 

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

PAK93_taikusuwariatama20140322-thumb-815xauto-16854-1

 

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

実はプライベートで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:

 

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 や バージョン機能などもフルに取り込まれています。

Artboard 2

2. 細かい操作性。

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

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

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

9bc78e0013062bcf047c408041ebc0a2

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

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

sketch-share

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

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

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

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

5bfd179df55e0d0adc312e3bedff44aa

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

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

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

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

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

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

  • sketch-mesure : レイヤーの幅や高さ、丸みなどの情報を別レイヤーとして自動生成してくれます。
    2014-10-07 22.06.20

  • content-generator : 写真やテキストのダミーを自動生成してくれます。
    日本語版も配布されています。

  • Duplicator : 素の状態でもレイヤーをコピーしやすいですが、このプラグインを使用することでより柔軟に複製することが出来ます。

25272d8a99674f5396f3a86eef1f6f03

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

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

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

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

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

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

sketch-workflow

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

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

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

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

2. Photoshop、Illustrator からコピペ

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


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

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

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のソースも公開されています。 )

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

これからですかね。

これはすごい。便利すぎるmacアプリ2個見つけてしまった件【作業効率化】

PageLayersSlicy

今後の作業が激変しそうなmacアプリを2個も見つけてしまいました…..

僕が知らなかっただけでしょうか。そうだとしたら今まで相当損をしていたような気がします。

そこまで思わせるような作業の短縮には持って来いのアプリを紹介します。

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!

transmitのディスクマウント機能 × codekitが便利すぎる

最近本格的にsassやlessなどのcssプリプロセッサを使い始めた1shiharaです。

まぁ、先日あったHTML5勉強会のお陰です。
windowsの時にはいちいち変換→アップロードという手順を踏まなければならなかったので、すごくめんどくさいという印象でした。
しかし、どうやらcodekitというソフトを使用すると簡単にできるみたいですね。
そこから実際に使い始めて見た印象ですが、

神っすね。もう普通の作業並みのスピードを保っていられる。
しかも、ブラウザもオートリロードしてくれるので至れりつくせりです。
でもね。それも所詮ローカル環境のみの話だろと。思っていたんですよ僕は。
クライアント様にとりあえずトップだけでも先にサーバーにアップして欲しいなんて言われると諦めてたんですよ。

一回一回保存してtransmitにドラッグアンドドロップ。

結局こうなるのかと。

いやいや、でも待てよ。いちいち普通の開発者さんたちがこんなこと繰り返してるのか?

やっぱり大事なのは探究心ですよね。

探し始めてまずmac fusionというサーバーをFinderに表示するソフトを見つけたのですが、いろいろあって結局使えず。
それでもへこたれずに探しました。

くそー。transmitってmacで一番使えるFTPクライアントじゃないのかとか。
もうね、多少なりとも恨みも入ってました。
意地でも探してやる。みたいな感情もありましたね。
でもよく考えるとtransmitって正直使い倒したことないんですよね。少なくともごく平凡なFTPクライアントとしてしか使っていませんでした。
ちょっといじくってみるかとtransmitを触っていたんですが、

そこには気になる「ディスクマウント機能」の文字が!!!!!1111
気になってwebサイトを見てみると僕が探していた機能がそこには書いてありました。

[browser-shot width=”700″ url=”http://www.kevinleary.net“]

なんて時間の無駄だったんだ。結構、1,2時間ぐらいは時間たってました。
transmit様悪口いったりしてすみませんでした。
やっぱり最強のFTPクライアントソフトの名は伊達ではなかったんですね!

ということでこの機能で一体どんなことが出来る解説します。

1. sublime textにファイルごと突っ込んでそのまま編集&保存。

sftpなんていらなかったんだ…..

でも、バックアップには気をつけよう。

2. codekitにもそのまま突っ込んでそのままコンパイル。

コンパイルされたファイルも当然サーバー上にそのまま吐き出される。

テキストエディタで保存するだけでコンパイル ×  アップロードも完了。

3. FInderのUIでファイル操作が可能になる。

 しかも結構軽い。

でも探したらかなり有名な機能だったんですね。

 はぁ、もっと前から知っておけばバリバリのsass使いに慣れたのに。。。。

 

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

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

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

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

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

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

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

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

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

  • *

【nginxはやい】AWSにサーバーを移行しました。その際のメモ。

先月のAWS(Amazon Web Service)の勉強会に参加した時に決意したこと。


 AWSでサーバーを構築して見せる!!(ドンっ)

…みたいな感じだったんですが、nginxでつまづき気づけば2週間。

いやー、やっぱりサーバーって難しいです。

この2週間黒い画面とにらめっこでなんとか今日解決しました。

長かった。そして長かった。ホントーにながかったです。

nginxのconfigファイルとどれだけにらめっこしたか….

そして結局php-fpmのほうの設定という熱い展開でした。

苦労したのでメモっときます。

ちょっと寄り道 – Amazon Web Serviceについて

Amazon Web Service(以下AWSとします)は、かの有名な米Amazon社が提供するクラウド・コンピューティングwebサービスのことです。

Iaas呼ばれているサービス形態ですが、他にはwindows Azureや、

Google Apps engineが有名どころです。

クラウド・コンピューティングについては以下の記事が参考になるのではないかと。

5分でわかるクラウド・コンピューティング – アットマークIT

平たくいうと、PC(サーバー)をインターネットを通じて借りるといったサービスです。

AWSのメリットといえば安い早い。そして簡単にできる
とよく言われています。

僕もAWSについては早い段階から知っていたのですが、今まで使う機会が中々ありませんでした。

実際に使うにはクレジットカードとPCがあれば使用出来ますので、是非試して下さい。

nginx(エンジンエックス)について

nginxとはオープンソースのWebサーバです。
webサーバーには他にも様々な種類があります。
普段皆さんがよく使っているapache(アパッチ)や、
Microsoft製のIIS(Internet Information Services)というものもあります。

前者の2つ、nginxとapacheはオープンソースであり、大抵のOSに対応していますが、
後者のIISの方はwindows上でのみ稼働します。

コチラはよく使われているものですね。

使いやすい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を目指す!管理画面カスタマイズ – アクションフック編をお送りします。

(no title)

Responsive and Adaptive Design

レスポンシブ & アダプティブ webデザイン


すっかり普及しているレスポンシブwebデサイン ( 以降 RWD )。
しかし、問題点も数多くあります。

UXを考えたUIを表現しにくい。デバイスごとに最適化しにくい。

デスクトップとモバイル機器の違いは何も画面サイズだけではありません。

使う「場所」も違えば、操作するツールも違う。

ニーズを持つユーザー層や、接続するスピードも違います。

デバイスごとに最適化されているサイトと、
レスポンシブでCSSの範囲で作られているサイト。

どちらが優れたUXをもたらすデザインを考えやすいのか。

いうまでもないと思います。

パフォーマンスが落ちる。

スマホがいくら高性能になってきたからといっても、

デスクトップ・ラップトップとの性能差は大きな壁として存在しています。

javascriptの処理スピード。
ネットへの接続状況。

javascriptがandroidのあの端末だけ異常に重い…….

なんてこともよくある話です。

構成から実装まで複雑である。

RWDでもしフレームワークを使わずに、
一から設計、実装をやる。

経験したことがある人にはわかると思いますが、
多大な時間と労力がかかるものですよね。

開発費用にコストがかかる。

多くの人が未だに、

RWD = ワンソースマルチユース

ワンソース? = コストが低いのでは?

と考えている方がまだまだいます。

しかし現実は、デバイスごとにサイトを作成するのと同程度、
または、それ以上にコストがかかってしまうこともあります。

( もちろんやり方によっては、RWDで制作することにより、コストを削減できます。)


以上、RWDの問題点について簡単に書き出してみました。

レスポンシブwebデザイン。
確かに多様化するデバイスの中、
我々制作者が対応していくには必須の技術だと思いますが、
まだまだ考えるべき課題はたくさんあります。

レスポンシブwebデザインで以下に効率よく制作するか。
にいては、

Web Design Process for The Fiture – こもりまさあき さん –

のスライドがものすごく参考になるので是非目を通してみて下さい。

( 実際に僕もセミナーで発表をきいたのですが、衝撃的でした。)

臨機応変に手法を変える。

僕は別にレスポンシブwebデザイン自体がダメだとは思っておりません。

上記のデメリットについては、

Responsive Web Design is Not the Future

から拝借させて頂きましたが、
僕は、

A Response to ‘Responsive Web Design is Not the Future’

の意見に賛成です。

技術者の努力・知識によって解決出来る問題もたくさんあります。

そこで僕は、

  • レスポンシブwebデザインで素晴らしいサイトを作るためにどんな手法があるのか、

  • これからのレスポンシブwebデザインはどう変わっていくのか。

調べてみました。


レスポンシブwebデザインに広まっている誤解


今のレスポンシブWebデザインは誤解されている

といった文献も見受けられました。

「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点

Responsive and Adaptive Design: Defined

RWDはあくまでも可変するものです。

これがレスポンシブ。

.container{
    width:90%;
    max-width:1200px;
    margin:0 auto;
}

そしてこれが、アダプティブ。

.container{
    width:700px;
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
    .container{
        width:420px;
    }
}
@media only screen and (max-width: 767px) {
    .container{
        width:300px;
    }
}

例とすると、

MR.SIMON COLLISON

が典型的なAWDとして紹介されています。

メディアクエリーを利用していますけど、
コンテンツの配置・幅自体は3段階しか種類がありませんね。

RWDは、デバイスのサイズに常に応答する(サイズが可変する)物。
という考え方が、どうやら海外では主流なようです。

でも、このやり方でもいいと思うんですけどもね。僕は。

もちろんクライアントには説明しますが、

予算は少ないけれど、スマートフォン・タブレットでも見たい。
という方にはぴったりなような気がします。

各メディアクエリーの最小幅に合わせないと崩れるというのがちょっとたまに傷ですが。


3つの「アダプティブwebデザイン」


アダプティブwebデザイン。

こちらもレスポンシブwebデザインが考えられた際に時同じく考案された手法です。

Responsiveが「応答性」なのに対し、

Adaptiveは「適応性」という意味。

いろいろ調べ直した結果、
今現在では、4つのアダプティブwebデザインという概念?があるような気がしました。

一つは、先ほど紹介した、メディアクエリーを利用したアダプティブデザイン。
しかし、こちらはなんだかレスポンシブwebデザインの下位互換として広まっています。

そして2つ目が、
デバイスごとに適応させたサイトを作る方法のこと。

ユーザーエージェントごとにスマートフォン専用サイトや、タブレット専門サイトにリダイレクトさせるものアダプティブwebデザインだそうです。

気になる3つ目は、RWDを内包した概念とした立ち位置のAWD。

以下の図をみるとよくわかります。

title

プログレッシブ・エンハンスメントは、最新のブラウザにはよりリッチに、古いブラウザには最低限の見れるものを、というあの概念です。

RWDというのは、 AWDという考え方の中の一つの手法でしかない、というわけです。

最後は、ユーザーのコンテキストに合わせて表示する内容を切り替えるAWD。

レスポンシブからアダプティブへ – 必要な情報を、必要なときに、必要としている人へ

性別、場所、年齢、といったユーザー属性や、ユーザーの行動を分析し、それに合わせたサイト設計をする。

ということらしいです。

上記の記事・元になったスライドでは、主にセンサーを利用した判別方法を使用していました。

確かに、

  • wifiにつながっている時だけ、背景で動画を流す。
  • 高齢者向けにサイトを用意する

なんてこともできますよね。
ポータルサイトでも、アクセスした地域によってスタートページを変えるということも今までよくあったと思います。

これは、結構面白い考え方だなと感じました。


レスポンシブwebデザイン + アダプティブwebデザイン = ?


………ってことで、

  • レスポンシブwebデザイン ≠ アダプティブ webデザイン

  • これからのデザインはアダプティブ web デザイン。

  • センサーや位置情報を利用したもの

  • RESS ( Responsive web design + Server SIde Compornent )を使用してデバイスごとに適応。

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における参照 (リファレンス) とは、ある値を指し示すものを言います。別の言い方をすると、変数のもつある値の格納領域を指し示す別の名前をもつ変数のこと。