WordCamp Osaka 2012 のセッションで発表させていただいた資料です。 この資料では、WordPress のカスタマイズを、 エンジニア寄りの視点で、解説させていただきます。 WordPressのカスタマイズはこれからだけど、PHPには精通されている方、一般的なWebアプリケーションフーレムワークでの開発の知識のある方などを主な対象として、当初つまずきやすいと思われる箇所や、私個人が疑問に思った箇所、気付くのに時間が掛かった箇所などを紹介させていただいています。
![エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4c5a50acbfddff06584e470f4f9eb402504ee4d/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fwp-wc2012-wc-121103181640-phpapp02-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
スゴイ。ヤバい。 Adobe Shadowは、Adobeのラボがリリースした、スマホコンテンツの開発支援ツール。 何ができるかというと、PCのブラウザで表示したURLのコンテンツを、iPhoneやiPadで同時に表示してくれる。 PCでサイトをリロードするだけで、iPhoneやiPadでも自動でブラウザがリロードされて、表示を検証できる!! iPhoneやiPadはURLの入力が面倒だし、PCで作業する度にデバイスを移動するのが大変だった。 Adobe Shadowを使うと、PCでリロードするだけで、全環境で表示の確認がすぐできる。これは作業がはかどる。 使い方 Mac / PC に Adobe Shadowをインストール ブラウザ(Chrome)にAdobe Shadowの拡張をインストール iPhone, iPad, android, kindleに Adobe Shadowアプリをイ
WEB以上にUIが重要視される、モバイルアプリ開発。当然情勢も刻一刻と変わっていきスピード感も求められます。今日紹介するのは直感的にスマートにモバイルアプリのUIが作れるモックアップサービス「fluid」。 ブラウザ上で、用意されたパーツを並べていくだけで簡単にUIを設計することができます。非常に直感的に操作できるようになっており、海外のサービスですが、説明やチュートリアル無しで制作していくことができました。 詳しくは以下 予めよく利用するパーツが取り揃えられれていますので、基本設計は用意されているパーツで十分行えると思います。 フリー版では1つのプロジェクトで10スクリーンまで、10MBのアップロード領域まで利用できるそうです。それ以上は、STANDARD、PROFESSIONAL、EXPERTと開発規模に応じて有料プランが用意されています。有料版の利用料金は料金は「Plans & Pr
いくつか同じようなギャラリーサイトは ありますが、こちらもなかなか見やすか ったのでメモ。スマートフォンのUIの パターンギャラリーサイトです。スマー トフォンに限らず、通常のWebサイトの パーツデザインの参考にもなりそうです。 特にスマートフォンのUIは細かい部分のこだわりが見られてとても参考になりますので見ておいて損は無いかと思います。 シンプルな作りです。パーツはカテゴリで分けられていて探しやすいです。ちょっと重いかな・・ 例えばこちらはグリッドのカテゴリ。同じ幅、同じ高さという限られた空間の中で、様々な工夫が見られます。 クリックするとその場でLightbox風にポップアップします。iTuneへのリンクもあるので確認しやすいですね。 同じようなギャラリーサイト 似たようなサイトは沢山あるので合わせてチェックしてみてはいかがでしょう。 Mobile UI Patterns pttr
Socketbug - Mobile Web Application Debugging スマフォ上で動くブラウザベースアプリ開発に役立ちそうなデバッグツール「Socketbug」。 モバイルブラウザで動くことを想定してSafariなどで作っても若干挙動がおかしくなることがあったりします。 Socketbugを使えば、スマートフォンで動いているエラーをそのままキャッチしたり、JSコードを送信してスマフォ上での解釈で動かしたりできます。 出来ることは以下。 ・PC上のブラウザコンソールからJavaScriptを実行するなど各種リモート操作 ・スマフォブラウザに表示されているアプリのソースコードを得てPC上ブラウザに表示 ・スマフォブラウザのエラーをPCのブラウザコンソールに表示する ・スマフォブラウザの現在のHTMLソースをPC側のブラウザでみる(通常はiPhoneブラウザでソースを覗いたり
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px~640px、横向きで480px~960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px(縦)を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px(横)で作成すれば問題ないといえますが、iPhone4、4SやAn
スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない!」などの問題が回避できるかもしれません。 ASCII.jp:サイト制作の前に知りたいiPhone/Androidの仕様|実践!iPhone&Androidサイト制作ガイド ASCII.jp:サイト制作の前に知りたいiPhone/Androidの仕様|実践!iPhone&Androidサイト制作ガイド スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき iPhone iPad向けサイトを制作するためのいろ
リリースされたばかりですが、スマートフォン用のサイトを手軽に作れると言う事で早速試してみました。 普通のウェブサイトなら話題のabout.meであなたのプロフィールページを1分で作ってみようを参考にしてみるといいかもしれないです。 smart4meってどんなサービス? 以下引用を参考に。 smart4me(スマート フォーミー)とは?iPhoneやAndroidなどスマートフォン向けサイトが無料で、簡単に公開できる、世界初のWebサービス! ブログ感覚で、ユーザー自身のスマホサイト(スマートフォン向けサイト)を簡単に公開が可能。 TwitterやBlogなどのソーシャルメディアとも連携可能なので、あなたの最新情報をすべて集約できるなど、使い方はあなたのアイディア次第です! 早速ユーザー登録してみよう smart4me ユーザー登録はちゃちゃっと終わります。 登録したメールアドレス宛にメール
「WebサイトをiPhoneやAndroidで見やすく表示したい」「スマートフォンをターゲットにしたWebサイトをデザインしたい」――そんなWeb制作者のための新連載がスタートします。PCサイト制作のノウハウさえあれば、「モバイルサイトは未経験」でも大丈夫。スマートフォン(iPhone/Android)向けサイト制作の基礎知識から実践的なテクニックまで、H2O Space.のたにぐちまことさんが解説します。(編集部) iPhoneの快進撃とiPhone 4の登場、Android端末のXperiaとDesireのヒット、au初の国産Android端末「IS01」の発売――と、スマートフォンの勢いが止まりません。いまや一部マニアやビジネスマンにとどまらず、女性やお年寄りなどの幅広い層にまでスマートフォンの利用は広がり、「1台目の携帯電話」として購入する人も珍しくなくなりました。 PCとの連携、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く