ホームページ制作 Archive

皆さんお疲れ様です。よんです。

さて今日はCSSアニメーションについて書きたいと思います。Webに詳しい方ならご存知だと思いますが、今までWebサイトでアニメーションを表現すると言えばAdobeの「Flash」が使われていました。今もバリバリに使われていますけど（笑）

ですが、HTML5とCSS3が世に出てきてからは、徐々にその方向性が変わってきています。というよりもiPhone/iPadが出てきてからと言ったほうが正解かもしれません。お持ちの方はご存知の通り、iPhone/iPadではFlashは見ることができません。Flash対応のブラウザアプリを入れれば見ることは出来るのですが、標準では見れないようになっています。Appleが頑としてFlashを拒んでいるということもあります。そして、昨年の11月頃ですが、遂にAdobeはモバイル向けのFlash Playerの開発を打ち切りました。※PC版は今後も続けていくようです。

米アドビ、モバイル向けFlash Playerの開発打ち切りへ

実際にFlashを使っていた私個人の意見としてもFlashは独自仕様すぎるように感じます。素晴らしいツールなんですよ？ただその独自仕様により使いづらい（開発しづらい）というのが難点です。Appleいわく、オープンではない、また、Adobeを介さないと開発がままならないというのが主な理由のようです。

前置きが長くなってしまいましたが、私も脱Flashと思い、今回CSSアニメーションにチャレンジしてみました。Sencha Animatorというツールを使えば簡単にHTML5/CSS3ベースのアニメーションが制作可能です。

Sencha Animator

Adobeも「Adobe Edge」というCSSアニメーション制作ツールのベータ版を出しているようです。また機会があれば今後触ってみたいですね。

今回は弊社のメインサイトのFlashと同じアニメーションをCSSで表現してみたいと思います。詳細な制作方法は省きますが、制作段階を箇条書きにしてみました。

1. Sencha Animatorをインストールして起動
2. IllustratorおよびPhotoshopで各アニメーションのパーツ分け
3. 各パーツをタイムラインに読み込み＆配置
4. タイムラインに沿って各パーツのアニメーションを設定
5. HTMLプロジェクトとして書き出し
6. 各種ブラウザで動作を確認

注意点・気付き（※覚え書き用に）
画像はなるべく容量を軽く。また、画像がアニメーションの際に重なり合う場合は透過画像（png）に統一したほうがよい。

という流れで行いました。

Sencha Animatorの画面はこのようになっています。

各パーツを配置するとこのように。

一枚の画像に見えますが、動く箇所はそれぞれ別の画像を配置しています。レイヤーが重なっているので一枚に見えています。

そして完成したのが以下のアニメーションです。弊社のホームページにあるものとほぼ同じ仕様になっています。

■CSSバージョンデモ
（※Internet Explorerでは動かないかもしれません。）

■Flashバージョン（弊社のサイトです）

※Google Chrome、Firefox、Safariは動作確認済みです。

Sencha Animatorのインターフェースや使い方はFlashにとてもよく似ています。そのおかげでほとんど感覚で作ることができました。というわけでいざサイトにアップ！と、思ったら何故か…

Internet Explorer　で　う　ご　か　な　い　！　ヽ(`Д´)ﾉｳﾜｧｧｧﾝ

やっぱりIEが立ちはだかりますね…。と、言ってもIE9であればCSS3にも対応しているはずなのでどうにかすれば動くはずなんですけど、こればかりはツールを使って書き出したものなのでどこを見るべきか…。まだ勉強不足なのでもう少しいろいろ試してみる必要がありそうです。

制作手順の詳細が知りたいという方は以下のアスキーのサイトから詳細を見ることが出来ますよ。私もここを参考にして作りました。

CSS3でFlash並みアニメが作れるSencha Animator

皆さんお疲れ様です。よんです。

年が明けてはや10日。正月休みと連休を挟んだので、まだ休みボケが直っていないような･･･そんな感覚です。

皆さんは正月はどのように過ごされましたか？私は例年実家に帰るのですが、今年は息子が生まれて初めての年越し･･･と、言っても年越しの時間は寝ている時間なので起きて一緒に越せるのはまだまだ先の話になりそうです。実は私も年越しの時間は疲れて寝てしまったというオチで･･･そういうこともありますよね？

さて、1年の計は元旦にありと言いますが、私も1日に計画、と言いますか「目標」を密かに決めました。

それは「HTML5」を使いこなせるようになる！･･･という目標です。

HTML5、名前だけでも聞いたことはないですか？HTML5とは、今までのHTML（HTML4やXHTML1.1）に変わる新しいWebのプラットフォームです。従来のHTMLと比べてより構造的に、またよりアプリケーション的な使い方も可能になるという代物です。

以下に分かりやすいスライドショーがありますのでちょっと長いですけど興味のある方はご覧になってみてください。

今までもHTML5は少しずつ使ってきていたのですが、全て実践できているかというと、まだまだと言わざるを得ません。今年はこのHTML5を使いこなせるようになるというのが私の目標です。

このブログにも学んだことを記事にしていきたいと思います。

皆さんお疲れ様です。よんです。

前回の続き。WordCamp 2011 KOBEに参加してきました！（前半）に続き後半のお話です。

前半にも書いたのですが、WordCampとはWordpressの…お祭りみたいなものですね！…あれ？前回言ってることと違う？まーどちらも似たようなものです（笑）

さて、昼食も取ったので昼からはカンファレンスです。

どうやら午後から本格的なスタートらしく、挨拶もそこそこにマクラケン直子さんの講演が始まりました。この方はWordpress.comを制作されたスタッフらしく、Wordpressの最新事情というテーマで話をされました。

WordPress.comはこちら

マクラケン直子さんがスライドショー資料アップされていたので引用させていただきました。

注目すべきはWordpressの世界中での導入率です。トップ100万サイト中、Wordpressの利用率は14.7%。CMSでの割合はなんと56.6%。これってけっこうすごい数字なんですよね。それだけWordpressは世界中で愛されているということではないでしょうか。

なぜここまでのシェアがあるのかというと、スライドショーにもありますが、柔軟性と拡張性が素晴らしい。何より制作者に愛されているCMSと言ってもいいかもしれません。私もCMSをいくつか使ってきましたが、あれが出来るけどこれは出来ない、これは出来るけどあれは出来ない、というように一長一短なものがほとんでした。Wordpressはまだまだ発展途上のCMSですけど、柔軟性、拡張性に優れているのでクライアント、制作者の要望を叶えてくれるCMSのように感じます。制作者の間でこれだけ盛り上がっているCMSは他にないのではないでしょうか。

さて、マクラケン直子さんのお話も終わり、次は各Cafe（教室）に分かれてのカンファレンスです。このWordCampは「一日限りのUser’s Cafe」と題されており、各教室を以下のように分けています。

• Central Cafe（キースピーチや幅広い範囲の内容）
• User’s Cafe（実用例、体験談など）
• Designer’s Cafe（デザイナー向けセッション）
• Developer’s Cafe（開発者向けセッション）
• Genius Cafe（質問から情報交換、参加するセッション）

面白い発想ですね。

私が参加したのは以下のカンファレンスです。

●13:00～13:20　Designer’s Cafe（光速テーマ開発のコツ）

WordPressのテーマ開発をいかに効率よく、スピーディーにするかという話。なるほど子テーマでやればいいんですね。

●13:30～13:50　Designer’s Cafe（Wordpressで作るスマートフォンサイト）

WordPressでのスマートフォン対応についてのお話。年々増えいてるスマートフォンにどうやって対応していくか。簡単な方法から玄人向けの方法まで。簡単なものであればプラグインがあるんですけど、やっぱりそれだけでは対応できないこともあるそうで。これは今後の必須項目ですね。

●14:00～14:20　User’s Cafe（作家とWordpress～電子書籍販売の試み）

この高橋さんという方は、作家さんなんですが、Webサイト制作会社に勤めていたらしく、Wordpressを使用して個人で電子書籍を制作して販売もされています。いろいろ試した結果…「売れない」という言葉が印象的でした。ですが独自にいろいろ調べて実際に販売もされているスタイルに感服です。

●14:30～14:50　Designer’s Cafe（Wordpressサイトをデザインする時にきをつけていること）

人気過ぎて教室に入れませんでした…orz
想像してみて下さい。教室の中。席は満席、教室の外周は参観日のように囲まれて、机の間のスペースも座り見でぎゅうぎゅう詰め…。泣く泣く教室を後に。どれだけ人気なんですか。というより予想よりも多い参加者に主催者側も驚いていたようです。
他のセッションに途中参加しましたが、やはり途中だったのでちょっと分からなかったですね。残念。

●15:00～15:20　Central Cafe（できるWordPressサイト大解剖）

●15:30～15:50　Central Cafe（WordPressを利用した、大手Webメディア運用～マネタイズの話）

●14:00～14:40　Central Cafe（ライトニングトーク）

こんなところですね。時間割はすごい悩みました。他にもいろいろ聞いてみたかったのですが、同じ時間でかぶってるものは聞けないので（泣）

最後のほうはCentral Cafeにいたのですが、このイベントに参加して思ったことはなるべくユーザー視点でのセッションに参加するべきなんだなと思いました。企業のセッションもあったのですが、やはり実際に現場の最前線で制作をされている人の話が一番ためになり、分かりやすく面白い内容でした。

最後はライトニングトーク。

これは準備中風景です。
最初の元気ですか！！が印象的です（笑）

これは持ち時間数分ほどの短いトークで自分のコミュニティ紹介やプラグイン、サービスを語るというもので次々にトーク者が入れ替わっていきます。

詳細はこちらで紹介されていますので、興味のある方は見てみて下さい。

WordCamp Kobe 2011 ＬＴ＆懇親会レポート

さて、これでWordCamp2011KOBEは閉幕です。この後には懇親会があったのですが、時間の都合で参加は断念。そもそもすでに定員になっていたようです。orz

今回のこのイベントで改めてWordpressの魅力が分かったように思います。オープンソースのCMSなので、やはり制作者のほうで盛り上げていきたいですね。私もまだまだ勉強が必要です。今後もWordpressを使い倒していきますよ！ちなみにこの亀の日常茶飯事もWordpress仕様ですｂ

もちろんWordpressでのホームページ制作も承っています！

 

皆さんお疲れ様です。よんです。

先日記事にも書いたのですが、この9/11（日）に「WordCamp 2011 KOBE」というイベントに行ってきました。

WordCampとはWordPress（ワードプレス）というオープンソースCMSを使うホームページ制作者を対象にしたセミナーです。制作者だけではなく、個人的に使う人もこよなく愛する方々も集まってきます。セミナーだけではなく、アンカンファレンスという参加型のディスカッションなどもありました。※CMSって？という方は私の前回の記事を参照下さい。

タイトル通り「KOBE」とあるので開催地は神戸。神戸芸術工科大学で行われました。ここは小中高大と様々な学校が集中しているようで「学園都市駅」という駅名がついているほどです。

駅から南に向かってしばらく歩きます。なんだか人がほとんどいません。…あれ？本当にここだよね？というほど静かだったので、だんだん不安になってきた人→（￣ ￣）

と、思ってたら、おーありましたありました。

WordCampの看板もちゃんとありますね。

午前中はアンカンファレンスという参加型のディスカッションのみのようなので、セミナーメインの人は昼から来場ということみたいです。

受付は9:30からでしたのでそれに間に合うように到着。

いろいろなパンフレットがありました。

廊下はこのような感じに。協賛会社がブースを出していました。

会場マップです。手書きなのがいいですね（笑）

メイン会場でアンカンファレンスの説明。

このアンカンファレンスは、参加者がテーマを決め、それについて議論したい人が集まってグループを作り、ディスカッションを行うというものです。

ちなみに私は「Wordpressを顧客によりよく使ってもらうにはどうしたらよいか？」というテーマに参加しました。いや題名は少し適当なんですが、要はWordpressでホームページを制作した後に更新が滞りがち、またその管理画面が使いにくい、分かりにくいという顧客に対してどのようにしてWordpressをよりよく使って更新をしてもらうか、というテーマです。やはり同じような悩みを抱えている方は多いらしく、私もその一人だったりします。いかにCMSがWeb上で簡単に更新が可能と言っても、その敷居は人によりけりです。簡単にできる人もいれば、難しいという人もいるわけですね。

その他にプラグイン開発についてのテーマもあったり、有名なプラグイン開発者もいましたね。

教室を替えてグループに分かれます。自己紹介を簡単に済ませて、まずはどうしたらよいのか、皆さんはどういう対応をしていますか？ということから始まりました。やはり普段からWordpressを使っている企業や個人事業の方もいたのでいろいろな話が聞けました。いやー参考になる。私はどちらかというと、まだ使い始めのぺーぺーなのでそれほど議論はできなかったのですが、ちょこちょこ口を挟みつつ、皆さんの話をよくよく聞いていました。なるほどなるほど（￣ ￣；）

WordPressは独学で学んでいるので我流になりがちなのですが、話を聞いていると私のやっていることは間違いではないようなので、これだけでもここに来た甲斐があったように思います。

そしてディスカッションの結論。というよりは、このようにすればいいんじゃないかな？というディスカッションの内容をグループごとに発表。

私たちのグループは、

• 管理画面のカスタマイズ（今の画面は少しとっつきにくいので使いやすい、見やすいように）
• 余計な情報は「見せない」（管理画面には様々な情報があるので余計なものは削る。あえて見せない。）

その他もいろいろあったのですが、これが有力な解決方法ではないかと。

アンカンファレンスが終わったら名刺交換をしました。ニシキの名刺をたくさんばら撒いておきましたよ（笑）でもやっぱり県外の方ばかりでしたねー。

いやーそれにしても有意義な時間でした。もし、次回どこかで開催された際にアンカンファレンスがあれば参加されることをお勧めします。

午後からはセミナーがあるので昼食を食べつつ、午前中の要点のまとめ。

 

午後からのセミナーについてはまた後日に続きを書きます。

後半に続きます。

皆さんお疲れ様です。よんです。

台風一過ですね。金曜日は朝の市電の混雑で危うく遅刻してしまいそうでした。滑り込みセーフです（￣д￣）いやもっと早く出ればよかったんですけど。

それにしても最近台風ではなく、ゲリラ豪雨とか集中豪雨が頻発しています。先日も雷がゴロゴロ。会社のPCも何度か落ちてしまう始末…無停電装置はあるんですけど、設定がどうやら違っていたらしく、雷の際にPCがプチっと…「ああああぁぁぁ」という悲鳴が社内からいくつか聞こえてきました。幸い、私は区切りがよく保存もしていたのでよかったんですけど…データは小まめに保存しておくべきですね。

さて、今日は久しぶりに（え？）ホームページ制作ネタを記事にしてみました。以前メルマガの時代に少し書いたものなのですが。

「CMS」という言葉を皆さんご存知ですか？

Wikipediaには、このように書かれています。

コンテンツマネジメントシステム（Content Management System,CMS）は、Webコンテンツを構成するテキストや画像などのデジタルコンテンツを統合・体系的に管理し、配信など必要な処理を行うシステムの総称。2005年頃より一般的に普及したといわれる。コンテンツ管理システムとも呼ばれる。

簡単に言うとWeb上でサイトの管理が全てできますよーというシステムのことです。

うまくイメージできない方は、無料ブログなどのサービスを提供している「アメーバブログ」や「ライブドアブログ」「楽天ブログ」などをイメージしてみて下さい。これらのサービスもCMSでできています。

従来のサイト制作では、PCローカル上でHTMLファイルなどを作成・修正、そのファイルをホームページサーバーにアップロードして初めて更新などができていましたが、このCMSでは全てその作業をWeb上の管理画面で完結することができます。（アップする画像などは別に用意しないといけませんが）

HTMLなどの知識がなくても更新が可能なのです。管理ページの投稿画面などはWordの感覚に似ていますね。テキストを打ち込み、画像を貼り付けて、リンクも貼って、後は「公開」ボタンをポチっと押すだけ。これで更新完了です。

これがもし従来の方法だと、「更新作業が発生」→「業者に依頼」→「見積り」→「発注」→「業者で更新作業」→「依頼主に校正」→「OK」→「本サーバーで公開（完了）」という流れで、正直面倒ですね。簡単な更新でも時間と外注費がかかるわけです。

これがCMSならば「更新作業が発生」→「管理画面にアクセス」→「更新内容入力」→「確認作業」→「公開」という流れになります。だいぶ時間も短縮になりますし、何より外注のコストが発生せずに自社で完結できるわけですね。

CMSと言ってもその数と種類は様々です。WikipediaのCMS一覧を見てもたくさんありすぎですね。正直に言うと私もさっぱりです。

コンテンツマネージメントシステムの一覧

 

弊社では「WordPress」というCMSを使用してホームページ制作のお手伝いをさせていただいております。このCMSはオープンソースのCMSで世界的にも普及しており、国産ではないのですが日本語のサポートページなども充実しています。プラグインも充実しているので簡単に機能追加なども可能です。

この「亀の日常茶飯事」もそのWordpressでできているんですよ（∀）

実は今月の11日に神戸で「WordCamp 2011 KOBE」というイベントがあるのでそれに参加してきます。Wordpressに関連したイベントセミナーなので勉強になりそうです。その内容も後日レポートしたいと思います。