未分類

情報収集の取り組み

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

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

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

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

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

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

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

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

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

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

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 という設定ファイルを作り、コマンドから構築する方法の２つがあります。
今回はめんどくさいので
同じ階層に 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のソースも公開されています。 )

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

これからですかね。

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！

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

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

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

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

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

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

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

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

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

      • *

    • *

使いやすい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や、Motopress 、pagelinesなど、革新的な記事編集方法を売りに、いっぱい金を稼いでいます。

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

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

Advanced Custom Fields

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

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

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

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

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

ここらへんは我らが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を目指す！管理画面カスタマイズ – アクションフック編をお送りします。

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 ) { // 配列以外が渡されるとエラー
      • 関数の呼出
      • コールバック関数
        • 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における参照 (リファレンス) とは、ある値を指し示すものを言います。別の言い方をすると、変数のもつある値の格納領域を指し示す別の名前をもつ変数のこと。

ModernIE様のおかげでmacでwin環境がタダで出来ました。

メインマシンをMACに変えてからbootcampでwindows環境を構築したいなとずっと考えていたのですが、なかなか実行できず。。。

だって、高いよ！！それなら今ある旧メイン機のwindowsで頑張るよ！！って感じだったんですが、ModernIEさんで仮想イメージ配布してるってこと聞いて早速入れてみました。

もっと読む

【webサービス】3Dプリンタが今熱い！【その他】

最近、FREEなどでも有名なクリス・アンダーソンの「MAKERS―21世紀の産業革命が始まる」を読みました。

メイカーズでも核となるのは「3Dプリンタ」です。3Dプリンタ自体の存在自体は知っていたのですが、すごいな～と思うぐらいであまり関心を持っていませんでした。

しかし、調べてみると思いのほか熱い！！

今後さらなる発展が予想される3Dプリンタ業界についての記事をまとめたいと思います。

もっと読む

【サイト構築】wordpressの構造を理解！初心者から中級者にスキルアップ【wordpress】

僕がサイト構築する際に一番使用するCMSはwordpressです。

もともとブログサイト用としてのCMSですが、現在ではコーポレートサイト・ECサイト・ポータルサイト等様々な目的のサイト構築に使用されています。

僕自身触り始めた時点ではphpに関する知識が乏しかったため、google大先生に何回も何回も教えを乞いながら制作していました。

今回の記事ではphpの構文の書き方から、wordpressの関数の仕組みまで僕なりに解説していきたいと思います。

wordpressの仕組み！

wordpressは膨大なphpファイルによって構築されています。

phpにはユーザー定義関数という仕組みがあり,

function 関数名() {
　　  処理に必要なプログラム  
}

という書き方で関数名を指定して呼び出すだけで定義されている処理を呼び出すことができます。

例えば、wp_title() というページタイトルを呼び出すテンプレートタグはwp-includesフォルダ内のgeneral-template.phpというファイル内で定義されています。

function wp_title($sep = '&raquo;', $display = true, $seplocation = '') {
    global $wpdb, $wp_locale;//データベースと日付設定をグローバル化

    $m = get_query_var('m');
    $year = get_query_var('year');
    $monthnum = get_query_var('monthnum');
    $day = get_query_var('day');
    $search = get_query_var('s');
    $title = '';

    $t_sep = '%WP_TITILE_SEP%'; // Temporary separator, for accurate flipping, if necessary

    // 投稿の場合
    if ( is_single() || ( is_home() && !is_front_page() ) || ( is_page() && !is_front_page() ) ) {
        $title = single_post_title( '', false );
    }

    // カテゴリ・タグページの場合
    if ( is_category() || is_tag() ) {
        $title = single_term_title( '', false );
    }

    // 分類がある場合
    if ( is_tax() ) {
        $term = get_queried_object();
        $tax = get_taxonomy( $term->taxonomy );
        $title = single_term_title( $tax->labels->name . $t_sep, false );
    }

    // 投稿者ページの場合
    if ( is_author() ) {
        $author = get_queried_object();
        $title = $author->display_name;
    }

    // 投稿タイプアーカイブの場合
    if ( is_post_type_archive() )
        $title = post_type_archive_title( '', false );

    // 月別アーカイブの場合
    if ( is_archive() && !empty($m) ) {
        $my_year = substr($m, 0, 4);
        $my_month = $wp_locale->get_month(substr($m, 4, 2));
        $my_day = intval(substr($m, 6, 2));
        $title = $my_year . ( $my_month ? $t_sep . $my_month : '' ) . ( $my_day ? $t_sep . $my_day : '' );
    }

    // 年別アーカイブの場合
    if ( is_archive() && !empty($year) ) {
        $title = $year;
        if ( !empty($monthnum) )
            $title .= $t_sep . $wp_locale->get_month($monthnum);
        if ( !empty($day) )
            $title .= $t_sep . zeroise($day, 2);
    }

    // 検索ページの場合
    if ( is_search() ) {
        /* translators: 1: separator, 2: search phrase */
        $title = sprintf(__('Search Results %1$s %2$s'), $t_sep, strip_tags($search));
    }

    // 404ページの場合
    if ( is_404() ) {
        $title = __('Page not found');
    }
    $prefix = '';
    if ( !empty($title) )
        $prefix = " $sep ";
    // パンくずのセパレータと方向の位置を決定
    if ( 'right' == $seplocation ) { // sep on right, so reverse the order
        $title_array = explode( $t_sep, $title );
        $title_array = array_reverse( $title_array );
        $title = implode( " $sep ", $title_array ) . $prefix;
    } else {
        $title_array = explode( $t_sep, $title );
        $title = $prefix . implode( " $sep ", $title_array );
    }
    $title = apply_filters('wp_title', $title, $sep, $seplocation);
    // 出力
    if ( $display )
        echo $title;
    else
        return $title;

}

このようにwp_title()というテンプレートタグが上記の処理を呼び出す役目をしているわけですね。

処理の内容は理解できなくてもこういう仕組みなんだなーということだけでも頭の片隅に置いといてください。

テンプレートタグ？条件分岐タグ？インクルードタグ？？そもそもタグってなんだ？！

wordpressを構築する際に様々なサイトを訪問すると思いますが、必ずと言っていいほどこの言葉が出てくると思います。

タグとは簡潔にいうとwordpressの関数です。wp_title()のような処理の集合体のことですね。

wordpressには膨大な数の関数が定義されており、ユーザーはそれを簡単にコピペで使うことができるのです。（す、すごい）
関数のことを説明する際、便宜上いくつかの種類に分けて説明します。それが、テンプレートタグや条件分岐タグです。

  • テンプレートタグ
    テンプレートタグはその名の通り、テンプレートファイル内で使用するタグのことです。
    wordpress テンプレートタグ一覧
  • 条件分岐タグ
    条件分岐タグは、テンプレートファイル内で表示される内容や、特定のページ内容を表示する条件を設定するのに使います。
    条件分岐タグ – WordPress Codex 日本語版一覧

    このタグこそ初心者から中級者へのかべ！(ドドーン)。このタグを使いこなせば、構築できるサイトの質もターンと広がります。
  • その他wordpressで定義されている関数
    wordpressには上記のもの以外でもたくさんの関数が定義されています。たとえば[php][/php/]


    この関数(タグ)はデータベースから登録されているユーザーのメタデータを取得するものです。
    これ単体では何の表示もできませんが、
    [php]
    user_login . “n”);
    echo(‘ユーザーレベル: ‘ . $user_info->user_level . “n”);
    echo(‘ユーザーID: ‘ . $user_info->ID . “n”);
    ?>
    [/php]
    上記のソースを書くことによって各ユーザーデータを表示できます。
    この関数自体は調べればすぐ出てきますが、大事なのはどうプログラムを組み立てるか。です。
    関数リファレンス – WordPress Codex 日本語版

    では、次項でphpの書き方について説明します。

基礎の基礎！引数(パラメーター)の渡し方

タグ(関数)には「引数を指定しないでも作動するもの」と「必ず引数を指定しなければいけないもの」、または「指定することでその条件に合った動きをさせる」があります。この引数とは、関数の()内のことです。
[php][/php]
を使って説明すると、(‘url’)の部分が引数となり、サイトのurlを呼び出します。この部分を(‘template_url’)とするとテンプレートファイルのurlが呼び出されるようになります。
このように同じ関数でも因数によっておこる動作は違います。この関数はほかにどんな引数があるの？と疑問に思ったときは
WordPress Codex 日本語版

で確認するのがベターです。

上記の関数は一つの引数ですのでシングルクォート（’）で引数を囲めばいいだけなのですが、
複数の引数を指定する関数もあります。
また例を使って説明してみます。

[php] ‘, ‘

‘); ?> [/php]

the_date()は日時を呼び出すタグです。

出力結果は
[html]

2013-01-14

[/html]
となります。
書式として[php] [/php]
と記述してありますね。（書式はあくまでも書式なのでそのまま書くものではありませんのでご注意を）
the_date()には以下のパラメータがあります。

  • format （文字列）- 日時の出力形式。デフォルト値は管理画面のオプションで設定した形式。
  • before （文字列）- 投稿/更新日の直前に出力するコードやテキスト。デフォルト値は空。
  • after （文字列）- 投稿/更新日の直後に出力するコードやテキスト。デフォルト値は空。
  • echo （true/false）- 取得した値の処理方法。

    　　　　　true（デフォルト。日付をページ内に出力）
    　　　　　false（PHPで使用できる値として日付を返す）

またパラメーターにはデフォルト値が決まっているものと、必ず値を指定しなければならないものがあります。

the_dateではデフォルト値が設定されているのでthe_date()とカッコ内は未記入でも値を出力してくれます。

また、最初につまづきやすいのが( ) 内の書き方です。
これには大きくわけて3種類あります。

1.カンマで区切る

シングルクオートで囲んであるパラメーターの指定値をカンマで区切り値を渡す

パラメーター＝パラメーターの指定値&パラメーター＝パラメーターの指定値……..の書式でパラメーターを渡す

【サイト構築】検索エンジンに話しかける方法 : Microdata 【HTML5】

新たなwebスタンダードになりつつあるHTML5。
レガシーブラウザへの対応等も整ったことあり、企画の段階でも提案しやすくなったのではないでしょうか。

今回のテーマは”セマンティックHTML5″。
そのままズバリ”意味”を持ったマークアップについてです。

HTML5はセマンティックwebの進化形態

みなさんはセマンティックwebという言葉を知っていますか？ 響きが難しそうですよね。
ですが概念はとっても簡単。 [quote style=”1″] インターネットをデータベースにしようぜ！ [/quote]

まぁ解説しているときりがないので以下にリンクを貼ります。

セマンティックウェブにおける新しい潮流: コンサルタントのコラム | NECネクサソリューションズ
専門用語も多く読みにくいかもしれませんが、詳細なことまで書いてあります。
セマンティックWebによる情報統合 〜Web 2.0と情報活用を支えるメタデータ
シンクイットさんの記事です。概念部分は分かりやすいかと。

ほどほどにしておきます。

人間である私たちはwebサイトをクロールする際、「あ、ここがナビゲーションでこの人がこの文章を書いた人かなー」と感覚で理解しています。

しかし検索エンジンをはじめとする機械は、「え、全部divじゃんわかんね」とか「名前二つ並んでるし、、」というしか理解できないわけです。

もちろんGoogle大先生もおそらく血もにじむような努力をしてなんとか解析しようとしたでしょう。
まぁ、webサイトは世界中で5億8000万サイトあるそうなので、(出典:)現実的に考えて既存のやり方では無理なのでしょうね。

そこでHTML5ではよりセマンティクス(意味を持った)タグが導入されました。

また今まではブロック要素とインライン要素の二つのカテゴリしかありませんでしたが、HTML5ではコンテンツモデルとして各要素ごとに内包できるコンテンツを定義されたんです。
これにより検索エンジンもよりHTMLの構造を理解しやすくなり、より一層サイトの差別化ができるようになりました。
でも、実際にHTML5が直接SEOに関係は「現時点ではない」説が濃厚です。

HTML5でサイトを作るとSEOに有利になるのか？ | お気軽無料ホームページ作成ガイド[browser-shot url=”http://hp-guide.com/attract/seo-column/advantageous-html5-seo/” width=”600″]
HTML5はSEOに有利？不利？

HTML5でマークアップすると検索順位があがりまくった！！！、、、なんてことになったら僕らは今頃大忙しのはず。
既存のサイトのほとんどがまだxhtml,html4.01の現状ですとそのようなことはありえないようです。

ですが、構造を意識してマークアップするということに関しては以前からSEO上とても重要だとうたわれています。
HTML5のルールにのっとってマークアップすることは自然と構造を意識したマークアップになる。これがメリットです。

じゃあ、HTML5ってSEOに関係ないの？

長くなりましたが本題に入りさせていただきます。

今までの流れだと「HTML5ってあんまりSEOと関係ないじゃん、、、」ってなっちゃいますが、あります。

HTML5の新たな機能として追加された「microdata」。
正直ほかのAPIやcanvasとかいった華やかな新機能に目を奪われがちですが、microdataもものすごく大切です。

下の画像を見てください。

microdata01

普段Googleで検索している際、よく見かけますよね。検索結果にパンくずが表示されていたり、著者の画像・名前が表示されてたり。
今まで気にしなかったんですが、SEO的にメリットは大きいですよね。
SERP(Search Engine Result Page:検索結果ページのことです。かっこつけました。)の狭い領域に少しですが情報を追加できる！
小さいことですが、大きなアドバンテージとなりそうです。
microdataでググるとすでに参考になりそうな記事がありました。

HTML5 の microdata について調べた « blog.udzura.jp
microdata について – ウェブマスター ツール ヘルプ

ふむふむ。。。

結構複雑そうorz。

ちょっとまとめてみました。

まずはmicrodataの書き方

次のコードをにmicrodataで意味を付加していきます。
あ、Googleさんの参考コードをもじったものですがすみません。

[html]

石原コーポレーション 住所: 愛知県名古屋市中川区 電話番号: 052-1234-XXXX http://example.com

[/html]

microdataの要素は5つあります。

それでは、実際にmicrodataを付け足していきます。

itemscope

この要素はmicrodataで情報を付加する際、必ず必要な要素です。
このitemscopeを付加することで検索エンジンさんに「ここにmicrodata埋め込みましたよー見てくださいねー」と知らせることができます。

[html]

石原コーポレーション 住所: 愛知県名古屋市中川区 電話番号: 052-1234-XXXX http://example.com

[/html]
まずはこうですね。

itemtype

itemtypeは示すmicrodataの種別を示すために付与します。属性値はgoogleさんたちが決めたurlを入れなければなりません。
たとえば、人物に関するmicrodataを埋め込むつもりなら

itemtype=”http://data-vocabulary.org/Person“

とすることで
検索エンジンは「あ、このタグの中に人物に関するマイクロデータ埋め込んでんのね」ってこちらの意思をくみ取ってくれます。
また、必ずitemscopeと同じタグ内に埋め込まないといけないそうです。
こちらが種類別の指定url一覧です。

itemtype 属性(マイクロデータのタイプを表す URL)

[html]

石原コーポレーション 住所: 愛知県名古屋市中川区 電話番号: 052-1234-XXXX http://example.com

[/html]

itemprop

itemprop属性はmicrodataのプロパティ名です。
会社の例ですと、

name : 会社名
url : 会社のホームページへのリンク
address : 会社の住所
tel : 会社の電話番号
geo : 会社の地理座標

この５つのプロパティを設定できます。
では、itemprop属性をspanタグなどに付加して情報を囲みます。

[html]

石原コーポレーション 住所: 愛知県 名古屋市 中川区 太平通り 電話番号:052-1234-XXXX

[/html]

ここにきて書き込む量が増えましたね。

それぞれ最低限の情報のみitempropで囲みました。しかし、３行目のspanにはaddressプロパティの他にitemscopeとitemtypeも付加されています。
Googleさんの解説を見てみると、

[quote style=”1″]プロパティは別のアイテムで構成されることもあります（つまり、アイテムに他のアイテムを含めることができます）。たとえば上記の組織の情報には、住所（itemtype=”http://www.data-vocabulary.org/Address“）とそのプロパティ（street-address、locality、region）が含まれています。[/quote]
プロパティには別のitemtypeが指定されていることもあるようです。
覚えるには時間がかかるので一回一回確認した方がよさそうだなー。

itemref

結構便利な属性っぽいです。
itemscopeと同じ場所に指定itemref=”ID名”とするだけでその指定したID要素内でもいきなりitempropとか使えるみたいです。

[html]

石原コーポレーション 住所: 愛知県 名古屋市 中川区 太平通り

電話番号:052-1234-XXXX

[/html]

のようなことができるんですね。
また、itemtypeと同様に必ずitemscopeと併記しなければいけません。

itemid

itemidは実際に使用したことがないのでリンクを上げさせてもらいます。

ISBNなどの本を定義するurlを指定する際に役立つらしいです。

確かにitemmtypeでは大まかなカテゴリーわけしかできないので、itemidでその”本”を識別できるurlを別に指定してあげれば、検索エンジンにも確実に情報が伝わるでしょう。

ということで完成形は

[html]

石原コーポレーション 住所: 愛知県 名古屋市 中川区 太平通り 電話番号:052-1234-XXXX

[/html]

となります。

 

microdataを使用してGoogleさんの検索結果に表示されるもの

今回はGoogleさんへのmicrodataの伝え方について書きました。
Google検索結果で変化があるのは以下の点です。

でもやっぱりめんどくさい。。。

まぁでもやっぱりめんどくさいですよねー。
そこで少しでも楽にマークアップできないかなと探していたところ、wordpress限定ですがプラグインがありました！

Microdata for WordPress: An SEO Plug-in to Help You Take Advantage of Schema.org

このプラグインを使えば…….

51360a4a2f7cc6529e000016

項目に応じてHTMLを吐き出してくれます。

ぜひ使ってみてください。
人間、堕落って怖いですね。では以上1shiharaでした。