こんばんは、デザイナーのやまぴーです。

うちの会社では、メインのデザインアプリケーションとしてAdobe Fireworksを使用しています。（サブアプリケーションとして、PhotoshopやIllustratorも使用します）

Fireworksは、Webのデザインツールとしては、もの凄く使い勝手が良い。
効率化を重視している社内では、いかに早くキレイなデザインを作るか
というところも重要なポイントなので、とても役立っています。

そこで今日は、以前から気になっていたFwの拡張機能を
役にたちそうなものをピックアップし、実際に試してみました。

FontBrowser

FontBrowser

Adobe Fireworks CS3\Configuration\Command Panels　に、解凍したswfを入れる。
ウィンドウメニューの内にfontBrowser-2-001があればOK。

下記のような感じで、任意の文字列のフォントを確認できます。
デフォルトのフォント機能より、全然使いやすいですね。

Web 2.0 styles

Web 2.0 styles

スタイルパネルから、web20styles.stlを読み込む。

下記のような感じで、web2.0っぽいスタイルが登録されます。

デザイナーは基本使用しませんが、
たとえば営業マンやプログラマーが「手軽にデザインしたい」
という時には便利なのではないでしょうか。

Export Commands

Export Commands

書き出しのコマンド集です。実行すると、コマンド に追加されています。
急いでる時や、画像を大量に書き出したいときには結構便利です。

• Export Selected Elements:選択したものをパーツごと分けて書き出す。
• Export Selection:選択したものを１枚の画像に書き出す。
• Export All Elements: １度に画面内すべてのイメージをエレメントごとに書き出す。
• Export Full Slices: すべてのスライスを書き出す。

Text v2.0

Text v2.0

テキストに関するコマンド集です。
私は特に下記が便利だと思いました。

ひとつのテキストのなかに複数のスタイルがある時...

選択後、コマンドの中からSplit Text Boxesを適用

すると、スタイルごとにテキストが分割されます

そのほかにも下記のような便利なコマンドが入ってます。

• Merge Text Boxes：テキストボックスを合体
• Paste Text Attributes：テキストのスタイルだけペースト。
• Split Selected Text：選択したテキストを基準にテキストボックスを分割

Fwに関しても、それ以外でも、多くの拡張機能が開発・公開されています。 アプリケーションを自分に便利なようにどんどんカスタマイズしていって、より効率のいい作業をしたいものです。

こんにちわ、やすです。
今日は HTML 5 について書いてみます。

2010年9月に勧告予定の HTML5 は、約10年ぶりのアップデートだけあって
色々な機能改善があるそうです。

1. 要素の追加

主要なものとして以下のような要素が追加されました。

* セクション

• <header>
• <nav>
• <article>
• <section>
• <aside>
• <footer>

* マルチメディア

• <audio>
• <video>

* ベクターグラフィック

• <canvas>

例えば article はウェブページの本文がどこにあるかを指定します。 これによってウェブページをプログラムからアクセスして本文だけを抽出、ということが容易に出来ます。

また、nav や aside は今まで <div id="sidebar"> などと指定していたものが正式に導入されたもので、異なるウェブサイトでも統一された HTML になることが期待されます。

HTML 5 でサポートされる予定の要素はこのページでまとめられてます。

http://www.html5.jp/tag/elements/

2. API の追加

以下のようにウェブアプリケーションの使用、実装に便利な API が提供されるそうです。

* Offline Application Caching API
　　　ユーザーがネットワークに接続しなくてもウェブアプリケーションを利用出来る

* SQL-based database API
　　　SQL でウェブアプリケーションのデータをローカルに保存

* Web Sockets API
　　　JavaScript からサーバーとの双方向通信を行う

* ドラッグ&ドロップ、draggable という属性によって容易に実装
* クライアント側でデータのバリデーション
* ブラウズの履歴を表示

参考リンク：

http://www.infoq.com/jp/news/2008/02/html5draft

3. 対応状況

主要なブラウザではすでに HTML 5 への対応が始まっていて、
以下のバージョン以降で動作します。

Internet Explorer 8
Firefox 3.1
Opera 9.6
Safari 3.0

しかし現状ではブラウザによってサポートされないタグもあるようなので、
正式な勧告後に対応されることを期待しましょう。

HTML 4 からの変更についてより詳しく知りたい方はこちらを参考に。

http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/

海外のサイトですが、実際にHTML5で実装されたサイトのギャラリーはこちらへ。

http://html5gallery.com/

HTML 5 のリリースによってウェブがさらに進化するのが楽しみですね

どうも水口です。「日常生活にも数値目標を！」を合い言葉にテレビドラマフリークとしても近年着実に視聴レコードを増やしていますが、このあたりがうまくサービスと結びつけられないかなという事で、週末サイト構築プロジェクト＠2009 SUMMER第一弾としてドラマウォッチというサイトを作ってみました。

 

ドラマウォッチ機能

• テレビドラマデータベース
• テレビドラマ 感想・レビュー機能
• テレビドラマ 掲示

です。水口が素人プログラマということもあり、イケてるおもしろい機能は特にありません。データベースを増やし、自分で感想を投稿し愚直に広めていこうとおもっています。

PC版から作ってしまいましたが、利用者想定からもおそらくモバイルが主な利用になっていくかなと思っています。モバイル版も一応用意はしました。ドラマウォッチモバイル版。

※ロゴに関してはラボサービスな事もあり、DramaWatchということで、DreamweaverをリスペクトしたDWがロゴになっています。

■ドラマウォッチ
http://dramawatch.jp/

週末にYaho知恵袋のAPIを触っていたのですが、SimpleXMLでXMLをパースしても意図する値が入っていません。おかしいなと思っていたところ、SimpleXMLでCDATAを取得するにはLIBXML_NOCDATAというオプションが必要でした。
PEARとかXMLを解析するライブラリを使えばいいのですが、普通にゴリゴリやってるサイトではPHP5からはこのSimpleXMLでパースできるのでたいへん楽ちんです。CDATAを取り扱う事も多いですし、覚えておくとよいでしょう。

SimpleXML LIBXML_NOCDATAの使い方

$xml = simplexml_load_file($url,'SimpleXMLElement',LIBXML_NOCDATA);

簡単ですね。今回はYahoo知恵袋でしたが他のAPIでもCDATAを利用している事はわりと多いので参考にして下さい。

こんにちは。逆から読んでもきつつきです。

 

最近、Google Analytics Data Export APIを利用したアプリケーションを構築する機会があったので、利用方法や概要についてざっくりと紹介させて頂きます。

PHPから簡単に利用できるライブラリとしては、

「Google Analytics API 」をPHPから便利に使えるクラスライブラリ

にて紹介されているライブラリがおすすめです。

 

さて、実際に「こんなデータが取りたい」という場合のお話をいたします。

DimensionsとMetrics

データを取得する際に、DimensionsとMetricsを指定する必要があります。

たとえばDimensionsに日付、Metricsにページビューを指定すると、日付ごとのページビューが返ってきます。

DimensionsとMetricsにどのような値を指定できるかは、

http://code.google.com/intl/ja/apis/analytics/docs/gdata/gdataReferenceDimensionsMetrics.html

が参考になります。

直帰率などの計算

Analyticsトップのマイレポートには、集計期間中のセッションやPV、直帰率などの値が出ています。

Dimensionsを指定しない場合、集計期間中の合計が取得できるので、セッション数やPV数は簡単に取得できます。

• セッション数
• Metrics・・・ga:visits
• PV数
• Metrics・・・ga:pageviews

• 平均ページビュー
• PV数/セッション数

※以降、便宜的に「PV数/セッション数」を「ga:pagevies/ga:visits」といった形で表現いたします。

直帰率、平均サイト滞在時間、新規セッション率を取得するには、他のデータを取得して計算する必要があります。

詳細な計算式については、以下が参考になります。

http://code.google.com/intl/ja/apis/analytics/docs/gdata/gdataReferenceCommonCalculations.html

ここの直帰率、平均サイト滞在時間の計算式をピックアップすると

• 直帰率
• ga:bounces/ga:entrances

• 平均サイト滞在時間
• ga:timeOnSite/ga:visits

また、新規セッション率は、セッション全体と新規セッション数との割合なので

• 新規セッション率
• ga:newVisits/ga:visits

で取得できます。

マイレポートに出ている多数のグラフに関しては、Dimensionsをdateに指定して、取得したデータを何かしらの方法でグラフ化する必要があります。

（従って、マイレポートと同じ内容のページを作ろうとすると結構大変です。）

アクセス元ドメインなどの取得

どのドメインからどれだけアクセスがあるか、という情報がAnalyticsページから閲覧できますが、こちらはセッション数でカウントされています。

ドメインごとのセッション数でデータを得るには

• Dimensions・・・ga:networkDomain
• Metrics・・・ga:visits

とします。

カスタムレポートから閲覧できる、アクセス元の都市などでの集計も可能です。（Dimensionsでga:city）

 

このように、APIを利用すればGoogleAnalyticsのアクセス解析データが利用できるので、独自に集計する機能をCMS等にも組み込むことが出来ます。