短期集中型 アドビ認定トレーニングセンター
m-Schoolは、駿河台学園グループが運営するITスクールです。

2010年08月31日

Contribute CS5 の基本操作をしてみた動画

連載:eラーニング教材開発内製化支援の第25回です。今回はAdobe Creative Suite Web Premium CS5に含まれているContribute CS5(コントリビュート)を使ってみました。

基本は見て・編集して・公開するの3ステップ


普段の連載では、新機能紹介をメインにしていますが、Contribute CS5の新機能は!といってもピンとくる方はなかなかいないと思います。
それよりもContributeってなに?という人の方が多いと思いますので、今回はContributeの使い方Adobe Captivateで撮ってみました。

Contributeとは?


Contributeは、「見る・編集・公開」という3ステップの簡単操作でサイトやブログの更新管理が行える簡易ホームページ更新ソフトです。
複数の人とサイトの更新作業を行う場合や、日常的に更新作業をしなければ行けないサイトの場合にとくに力を発揮します。Dreamweaverよりも安価で購入できるところも魅力のひとつです。



操作方法


1.Webサイトを表示します。
※動画ではローカルフォルダのデータを参照していますが、一般的にはWebサーバー内の実際のWebページを参照します。
2.サイトが表示された後、編集したいWebページを開きます。
3.[ページを編集]をクリックします。
4.ページを編集します。
5.編集完了後、[ページを公開]をクリックします。
※これでWebサーバー内のHTMLファイルが上書きされ、ページの更新作業が完了します。

こちら紹介した動画を作りたいなら、 Captivateの短期習得講座がオススメです。
m-Schoolでは定例でCaptivate4トレーニング(2日間)をやっています。操作方法はもちろん、制作するときのポイントも含め盛りだくさんの内容をご紹介いたします。Captivate5をお持ちの方でも基本の記録方法に関しては同じなので、安心してご受講いただけます。内容の詳細・申し込みはこちらからAdobe Captivate4トレーニング
posted by エンディー at 17:08
連載:eラーニング教材開発内製化支援 | コメント(0) | トラックバック(0)
2010年08月26日

Firefox 4.0のSync機能を試した

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

番外編です。現在Beta版が出ているFirefox 4.0の新機能、Syncを試してみました。

ちなみに、最近起動速度等でSafariやChromeに遅れをとっているFirefoxですが、4.0 Beta 4の起動はチョッパヤでした。(環境によると思います)

ではSyncの紹介です。
Synchronize your settings, passwords, bookmarks, history, open tabs and other customizations across multiple devices so you can take Firefox with you wherever you go.

Syncは異なる端末間でFirefoxの設定、パスワード、ブックマーク、履歴、開いているタブ、その他諸々をさくっと同期できる機能です。様々なデバイスで同じ環境を再現できます。

いやいや、地上最速のOpera師匠はンなもんとっくに実装してっから。というOperaマニアの声はさておき。

まずインターフェイスはこんなかんじ。WebブラウザーはシンプルスッキリUIが当たり前になってきましたね。
Firefox4 betaのUI

では早速Syncしてみましょう。ウィンドウ右下にSyncボタンがあるのでクリック。すると、初Syncか既に他の端末で登録済みか聞かれます。初なので上を選択。
初SyncかSync済みか選択

アカウント登録をちゃかちゃかと済ませます。秘密の言葉は絶対わすれないように。
Syncのアカウント登録

秘密の言葉を入力

端末名を指定

人間の証明もします。
人間の証明

これでこの端末のFirefoxのデータがSyncサーバーに行きます。
Sync完了

では、別端末で見てみましょう。

Windows上にFirefox 4.0をインストールしておきました。まだブックマークはスッカラカンです。
ブックマークはからっぽ

ウィンドウ右下のSyncボタンをクリック。次は既にSync済みなので下を選びます。
Sync済み

どのようにSyncするか選びます。とりあえず推奨されてるのにしてみました。
統合Sync

すると、一瞬の間にブックマークがどーんと同期!
別端末のブックマークがでてきた

もっかい別端末に戻って、ページを開いてみます。
別端末でページを開く

で、また戻ってくると、この通り。開いているタブがSyncしています。
開いているタブがSyncしている

便利かもー。Opera Link今まで使ったことなくてごめんなさいー。

iPhoneアプリも既に出ています!
Firefox Home

便利かもしれないー。
posted by こう at 16:18
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2010年08月25日

CSSでtableのデザイン

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

CSSでtableのデザイン


今回は、Table要素、つまり表の見た目をCSSで設定していくときのコツを解説します。実は意外とクセモノです。

Tableの仕組み


まず何より大切なのが、table要素の仕組み、マークアップを理解しておくことです。これはtableに限ったことではないですが、普通の要素とくらべると構造がチョイややこしいので、整理しておきます。

シンプルな例を挙げてみます。
<table>
<tr>
<th scope="col">ヘッダー</th>
<th scope="col">ヘッダー</th>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>

table要素の構造

この他にもtheadやtbody、tfoot要素などを使う場合もありますが、まずはシンプルケースということで、1行目のみをthで見出しにしています。

では、tableをデザインするときに重要なCSSの関連プロパティを見てみます。
border-collapse
セル同士の間にスペースを入れるか密接させるかを指定します。値はcollapseで間隔なし、separateで間隔が空きます。
border-spacing
border-collapseがseparateの場合に、間隔を数値で指定します。IE6,7未対応。
empty-cells
border-collapseがseparateの場合に、空白セルの表示または非表示を指定します。値はshowで表示、hideで非表示になります。IE6,7未対応。


次に実際にスタイルを書いていくときのポイントです。

まず覚えておくとよいのは、trにborderは設定できないということです。正確には、border-collapseがcollapseであればtrにborderが設定できるのですが、IEはこの通りに動いてくれません。たとえcollapseでもtrのborderは表示されません。6〜8まで全滅です。

縦線のないtable

そこで、上図のようなborderを描きたいときはどこに設定すればいいかというと、各thやtdのborder-bottomで設定します。
table {
border-collapse: collapse;
border: 1px solid #000;
border-bottom: none;
}
th, td {
border-bottom: 1px solid #000;
}

まずtable全体にぐるっとborderをひき、各セルの下側だけborder-bottomをひきます。するとtableの下側のborderと一番したのセルのborder-bottomが重複するので、tableのborder-bottomのみnoneとして線を表示しないようにしています。(これはやらなくてもいいかもしれません)

もう少し手を加えていくとこんな感じに。

thとtdに背景色をつける

body {
color: #24282b;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
"メイリオ", Meiryo, Osaka,
"MS Pゴシック", "MS PGothic", sans-serif;
}
table {
width: 400px;
border-collapse: collapse;
border: 1px solid #548582;
background-color: #fcf9ca;
}
th {
padding: 5px;
border-bottom: 3px double #548582;
background-color: #9fc7b2;
text-align: left;
}
td {
border-bottom: 1px dotted #548582;
}

tableを表として正しく使う分には用途は非常に多いと思います。
参考までに様々なデザインのサンプル集を紹介しておきます!

Pricing Tables: Examples And Best Practices

Top 10 CSS Table Designs

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 15:05
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2010年08月24日

Acrobat 9 Pro 新機能ポートフォリオ使ってみた動画

連載:eラーニング教材開発内製化支援の第24回です。Adobe Creative Suite 5 Premiumシリーズ(CS5)に含まれているAcrobat 9 Pro(アクロバット9プロ)の新機能を使ってみました。

PDF ポートフォリオの作成


今回はAcrobat9の新機能を紹介いたしますが、Acrobatについてもっと詳しく知りたい!という方は、「Acrobat 9入門講座」や、m-Schoolのデベロッパー記事「今さら聞けない Adobe Acrobat & PDF」で詳しく紹介をしてますので参考にしてみてくださいね!

では、本題のPDFポートフォリオとはなにかというと、ひとつのPDFファイルの中に、Word・Excel・PDF・動画などのあらゆるファイルを添付させ、ひとつのPDFファイルにまとめあげることができる機能です。乱雑になったファイルをひとつのファイルとしてまとめておくことができるため効率よくファイルを管理することができます。



操作方法


1.ポートフォリオを新規に作成します。
2.まとめたいファイルを複数選択して読み込みます。
3.表示効果や全体の色合い等を変更します。
4.保存して作成したポートフォオファイルを開きます。
5.確認したいデータをダブルクリックして個々のファイルを開きます。

こちら紹介した動画を作りたいなら、 Captivateの短期習得講座がオススメです。
m-Schoolでは定例でCaptivate4トレーニング(2日間)をやっています。操作方法はもちろん、制作するときのポイントも含め盛りだくさんの内容をご紹介いたします。Captivate5をお持ちの方でも基本の記録方法に関しては同じなので、安心してご受講いただけます。内容の詳細・申し込みはこちらからAdobe Captivate4トレーニング
posted by エンディー at 15:01
連載:eラーニング教材開発内製化支援 | コメント(0) | トラックバック(0)
2010年08月18日

clearfixの使い方

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

clearfixの使い方


以前、floatで崩れた?コレでなおせ!という記事でfloatによるレイアウト崩れの対処方法をご紹介しました。そこでは、overflowプロパティを使った方法を取り上げましたが、clearfixはさらっとスルーしたので、改めて見てみたいと思います。

clearfixとは


まずclearfixとはテクニックにつけられたただの通称であって、そのようなセレクターやプロパティがあるわけではありません。

clearfixはfloatによって親要素の高さが足りなくなる、またはなくなってしまったときに、高さを元に戻すために使います。

clearfixの意味


clearfixのコード自体は検索すればいくらでもでてきます。バリエーションも様々ですが、今回はスタンダードと思われるものを取り上げて、そのコードの意味を解説します。

/* afterに対応したブラウザ向け */
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
/* IE6 */
* htm .clearfix {
height: 1%;
}
/* IE7 */
*:first-child+html .clearfix {
height: 1%;
}

ポイントはafterに対応したブラウザ向けの部分です。

after疑似要素はIE8以上、firefoxやsafari、chrome等の標準仕様に準拠したブラウザーで使えます。
afterとcontentプロパティを使って「高さが足りない/なくなっている要素の直後に文字(ピリオド)を追加」します。その文字をdisplayプロパティでブロックレベル要素の様に表示します。そこでclearをするという寸法です。つまりclearできる要素がないなら追加してしまうという考えなのですが、HTMLのソースコードを汚さずに解決できます。

この例では汎用性をもたせるために.clearfixというクラスセレクターで適用していますが、たとえば#contents:afterというようなピンポイントな書き方もできます。

ですが、これだけではafterが使えないIE6や7では解決できません。そこで、IE6と7向けにはハックが必要になります。ハックの内容は正直おまじない的なものですが…IEのバグを使った裏技です。

その他のバリエーションとしてはMac版 IEを考慮したものもありますが、シェアとしてはもう無視してもよいのではないかと思います。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 01:37
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2010年08月11日

FlashCS5 新機能 air2.0書き出しをしてみた動画

連載:eラーニング教材開発内製化支援の第23回です。今回は、Adobe FlashCS5(アドビ フラッシュCS5)の新機能を使ってみました。

AIR2.0ファイルの作成


本ブログの連載にて、FlashCS5でAndroidアプリを書き出す方法は既にFlash CS5でAndroidアプリ開発:パブリッシュ編!で紹介済みでしたので、ここではAIR2.0の書き出しをやってみました。AIRコンテンツの書き出し方法はFlashCS4でも行えますが、CS5からAIR2.0の書き出しが行えるようになっています。



操作方法


1.新規ファイルAir2.0で作成します。
2.通常のFlash制作と同じようにコンテンツを作成します。
3.パブリッシュの設定をします。
4.AIRファイルの書き出しには、電子証明書が必要なため証明書を持っていない場合は作成します。
5.パブリッシュをします。
6.書き出された.airをインストールします。

Captivateの短期習得講座をやってます。
m-Schoolでは定例でCaptivate4トレーニング(2日間)をやっています。操作方法はもちろん、制作するときのポイントも含め盛りだくさんの内容をご紹介いたします。Captivate5をお持ちの方でも基本の記録方法に関しては同じなので、安心してご受講いただけます。内容の詳細・申し込みはこちらからAdobe Captivate4トレーニング
posted by エンディー at 15:30
連載:eラーニング教材開発内製化支援 | コメント(0) | トラックバック(0)
2010年07月29日

グランプリ賞金100万円 Yahoo! JAPAN インターネットクリエイティブアワード2010開催中

Yahoo! JAPAN運営によるYahoo! JAPAN インターネットクリエイティブアワード2010が開催されております。遅ればせながらm-Schoolも協力をさせていただくことになりました。

公式サイト


Yahoo! JAPAN インターネットクリエイティブアワード

概要


本アワードは、2006年に創設され今年で5回目になります。
インターネット関連で革新的なクリエイティブ制作を行うクリエイターと、新しいインターネット広告の可能性を開拓した広告活動を顕彰することで、インターネットと広告のさらなる発展を目的に開催するものです。今年からスマートフォン部門も新設されました。

募集期間


2010年7月15日(木)〜8月10日(火)
募集期間があとわずかですので、アプリケーションの開発は難しいかもしれませんが、短期間でも手軽に作れるバナー広告部門であれば気軽にご参加いただけると思います!

応募条件


各部門、下記の作品を募集します。プロ・アマチュアの別は問わず、複数人での共同制作作品のエントリーも可能ですが、企業・各種団体による広告作品は「企業の部」にエントリーください。

一般の部


■ ウェブコンテンツ部門
インターネット上で閲覧し、またはインターネットを通じてダウンロードすることができるオリジナルのウェブコンテンツ作品

■ バナー部門
Yahoo! JAPANをテーマとしたバナー作品

■ スマートフォン部門
スマートフォンで利用できるアプリケーション

企業の部


各部門、下記の作品を募集します。2009年8月18日〜2010年8月10日に公開されたものを対象とします。

■ ウェブコンテンツ部門
企業・各種団体によるウェブサイト

■ バナー部門
Yahoo! JAPANおよびGyao!に掲載されたバナー広告(エントリー対象外)

■ スマートフォン部門
スマートフォン向けに開発された広告

応募方法


2010年7月15日(木)に本サイトにオープンする専用応募フォームからエントリーを受け付けます。

賞について(一般の部)


グランプリ:賞金100万円/賞状/トロフィー(1作品)

■ ウェブコンテンツ部門
Gold:賞金30万円/賞状/トロフィー
Silver:賞金20万円/賞状/トロフィー
Bronze:賞金10万円/賞状/トロフィー
(各1作品)

■ バナー部門
Gold:賞金30万円/賞状/トロフィー
Silver:賞金20万円/賞状/トロフィー
Bronze:賞金10万円/賞状/トロフィー
(各1作品)
※バナー部門受賞作品は、広告として採用される可能性があります。

■ スマートフォン部門
優秀賞:賞金10万円/賞状/トロフィー(1作品)

賞について(企業の部)


グランプリ:賞状/トロフィー(1作品)

■ ウェブコンテンツ部門
Gold:賞状/トロフィー
Silver:賞状/トロフィー
Bronze:賞状/トロフィー
(各1作品)

■ バナー部門
Gold:賞状/トロフィー
Silver:賞状/トロフィー
Bronze:賞状/トロフィー
(各1作品)

■ スマートフォン部門
優秀賞:賞状/トロフィー(1作品)

特別賞


■ Creative Hack賞
賞金5万円/賞状/トロフィー(1作品)
対象・・・企業の部、一般の部エントリー作品のなかで、ウェブ上で公開されているAPI、もしくは、それに類するウェブ上で提供される各種サービスを利用した作品
※Yahoo! JAPANが公開しているAPIについてはこちら

■ Silverlight賞
賞状/トロフィー/副賞(1作品)
対象・・・企業の部、一般の部エントリー作品のなかで、Microsoft Silverlightを使用した作品
※Microsoft Silverlightについてはこちら
※副賞は、複数人での共同制作であった場合も、1名分です。

審査員


【特別審査員】
内山 光司(GT INC./(suit)men entertainment クリエイティブディレクター)
川口 清勝(TUGBOAT アートディレクター)
福田 敏也(777interactive 代表取締役 クリエイティブディレクター)
※その他の審査員は公式サイトでご確認ください。

発表について


2010年9月にノミネート審査を行い、10月上旬に本サイトにノミネート作品を発表します。
その後、最終審査会を経て、2010年11月下旬に贈賞式を行い、本サイトで受賞作品を発表します。
posted by エンディー at 16:41
ニュース | コメント(0) | トラックバック(0)
2010年07月27日

DreamweaverCS5 新機能 BrowserLabを使ってみた動画

連載:eラーニング教材開発内製化支援の第22回です。今回は、Adobe DreamweaverCS5(アドビ ドリームウィーバー5)の新機能ムービーです。

複数のブラウザで同時にプレビュー


Dreamweaverは完成度が高い製品のため、新機能のほとんどはかゆいところに手が届く的な機能が多いですが、その中でもBrowserLab(ブラウザラボ)に関してはかなりかゆいところをカバーした機能ではないでしょうか?
BrowserLabは、Internet Explorer、Firefox、Safari、Chromeの複数のバージョンでWebページを表示した場合のスクリーンショットが確認できる、クロスブラウザーテストサービスです。いままで複数のブラウザをインストールしてプレビューしていた方にとっては、目からウロコの機能ですね。




操作方法


1.Dreamweaverで確認したいサイトを開きます。
2.[ブラウザでプレビュー]をクリックし、[Adobe BrowserLab]をクリックします。
3.[表示]から切り替えたい画面数を選択します。
4.ブラウザの名称を切り替え、内容を確認します。

Captivateの短期習得講座をやってます。
m-Schoolでは定例でCaptivate4トレーニング(2日間)をやっています。操作方法はもちろん、制作するときのポイントも含め盛りだくさんの内容をご紹介いたします。Captivate5をお持ちの方でも基本の記録方法に関しては同じなので、安心してご受講いただけます。内容の詳細・申し込みはこちらからAdobe Captivate4トレーニング
posted by エンディー at 15:55
連載:eラーニング教材開発内製化支援 | コメント(0) | トラックバック(0)
2010年07月26日

ActionScript3.0 データ型の活用方法

Flashの基本機能がわからないという方や、素朴な疑問をさくっと解決したい!といった方のために、毎回1ネタピックアップしてお届けするこのコーナーチャッピー

さて、第27回の今日は、データ型についてご紹介します。

データ型とは


ActionScriptで取り扱われるデータは、必ず何らかのに属しています。
変数の型宣言をする際や、値の代入を行う際は、このデータ型の特性を理解し、正しく扱う必要があります。

代表的なデータ型
代表的なデータ型

数値を扱うような変数を宣言したい場合、Numberintuintの3つのデータ型が考えられます。
Number型は、全ての正負の整数から浮動小数点を含む数値まで、全ての数値を扱うことができます。
扱うデータが「正の整数のみ」とあらかじめ決まっているような場合には、uint型で指定するほうが効率的です。

かわいい数値(Number、int、uint)同士は算術演算子を使用して計算処理を行うことができます。
数値の算術演算


かわいい文字列(String)同士の算術演算はできませんが、加算演算「+」を使用すると、文字列同士を連結することができます。
文字列の演算


かわいいまた、数値と文字列も算術演算はできませんが、加算演算「+」を使用すると、「数値が文字列に自動的に変換」され、文字列同士の連結になります。
文字列と数値の演算


数値と数字


0 〜 9までのアラビア数字をプログラム上で扱う際には、データ型の違いに注意が必要ですひらめき
人間の目には同じ形の文字に見えても、プログラム上ではその数字が「数値」、つまりNumber、int、uintのいずれかの型なのか「数字」、つまりString型なのかによって扱い方が異なります。
例えば、uint型の100は算術演算が可能な「数値」ですが、String型の"100(イチゼロゼロ)"は、「数字(文字列)」です。

データ型の変換


データ型は意図的に変換することができます。
特に、文字と数値を取扱う際に文字⇔数値の変換をする場合が多くあります。
ユーザーがテキストフィールドに入力した値は数字かそれ以外の文字かに関わらず、必ずString型になっています。
そこで、入力された数字を算術演算で使用するために、String型のデータを数値の型に変換する必要があります。
このようにデータ型を意図的に変換することを「キャストする」といいます。

データ型をキャストする方法

データ型名(値)

uint(input_txt.text);


この例では、テキストフィールドinput_txtのtextプロパティをuint型に変換しています。このとき、input_txt にアラビア数字以外の数値に変換できない文字などが入力されていた場合は0、Number型に変換しようとしていた場合はNaN(Not a Numberの略)が割り当てられます。

変数の型指定は必須ではありませんが、しておくことが推奨されています。
型指定をすることで、誤ったデータが代入されるのを防げたり、処理が最適化され高速になったり等、メリットが沢山ありますぴかぴか(新しい)
posted by チャッピー at 13:00
連載:Flash Beginner's School | コメント(0) | トラックバック(0)
2010年07月21日

Captivate5 新機能 アニメーションエフェクトを使ってみた動画

連載:eラーニング教材開発内製化支援の第21回です。今回は、今月発売されたばかりのAdobe Captivate 5(アドビ キャプティベイト5)の新機能ムービーです。

アニメーションエフェクトでキャプションに動きをつけてみた


Captivate5の新機能については、発売まで待ちきれない!Adobe Captivate 5 新機能紹介で投稿しましたが、今回は実際の操作方法をCaptivateで記録しました。Captivate4まではテキストアニメーションを使うことで、入力した文字だけをアニメーションさせる方法がありましたが、Captivate5で追加された機能を使用することで、各種オブジェクトにFlashのようなモーショントゥイーンアニメーションのエフェクトを加えることができるようになりました。




操作方法


1.テキストキャプションなどのオブジェクトを追加し、選択します。
2.[タイムライン]パネルの隣にある、[エフェクト]パネルをクリックします。
3.[エフェクト]ボタンから追加したいエフェクトを選びます。
4.エフェクトを実行したいタイミングをタイムラインで調整します。
5.[ライブプレビュー]または[プレビュー]で内容を確認します。

Captivateの短期習得講座をやってます。
m-Schoolでは定例でCaptivate4トレーニング(2日間)をやっています。操作方法はもちろん、制作するときのポイントも含め盛りだくさんの内容をご紹介いたします。Captivate5をお持ちの方でも基本の記録方法に関しては同じなので、安心してご受講いただけます。内容の詳細・申し込みはこちらからAdobe Captivate4トレーニング
posted by エンディー at 11:37
連載:eラーニング教材開発内製化支援 | コメント(0) | トラックバック(0)