未分類

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

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

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

なおかつ、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

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

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

【サイト構築】検索エンジンに話しかける方法 : 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でした。

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

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

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

もっと読む

【ディレクション】情報アーキテクチャ ～3 : ナビゲーション～

まだまだまだまだまだまだ勉強中の@1shihara-Tです；；

当初は3回で記事を終えるつもりでしたが、、、、、、

足りません！！！！！

学べば学ぶほど情報アーキテクチャへの興味は深まっていく、、、、、
不思議です(^^;)
今回はナビゲーションについて記事を書こうと思います。

もっと読む