HOME

システム開発の株式会社システックス

システックス公式ブログ

2010年02月18日

システックス映画試写会【シャーロック・ホームズ】

システックス映画試写会のお知らせです。
シャーロック・ホームズ

2010年3月12日(金)全国ロードショーの「シャーロック・ホームズ」の試写会に
抽選でご招待いたします。

詳細・応募方法はCMでご確認ください。


2010年02月18日

システックス映画試写会【LIAR GAME The final stage】

システックス映画試写会のお知らせです。
LIAR GAME The final stage

2010年3月4日(木)18:30~長野グランドシネマズで行われる
【LIAR GAME The final stage】の試写会に
抽選で50組100名様ご招待いたします。

詳細・応募方法はCMでご確認ください。


2010年02月17日

Ajax入門(Adobe Spryでスライドショー)

つづきまして

「Adobe Spry」(アドビ スプライ)を応用したスライドショーの実現例をご紹介しましょう。

Adobe Spry

【公式サイト】
・「Adobe Spry framework for AJAX」(英語)

【特徴】
Adobe Spry とは、Adobeが提供するAjax対応Javasciptです。

Adobe Spry の特徴は、比較的簡単に“XMLデータ”を扱える点にあります。
つまり、XMLデータのデータファイルを元にしたWebページを手軽に作ることができます。
PartyWeb」のスライドショー機能は、このAdobe Spry (「Photo Gallery Demos」)を応用しています。

なお、Adobe Spry は、スライドショー以外にも、いろんな動き・効果・演出を付けることができます。
具体的にどんなことができるのか?については、下記URLのデモページをご覧下さい。
・「Spry Demo Gallery

【ダウンロード】

(1) Adobe ID を入手する。

Adobe Spry をダウンロードするために、まず「Adobe ID」を作成する必要があります。
下記URLの「Adobe ID を作成」を押して、ご自分の Adobe ID を作成して下さい。(無料です。)
・「Adobe – サインイン

(2) Adobe Spry をダウンロードする。

公式サイトにて、右上の「Download vX.X」をクリックします。
この後、ログイン画面が表示された方は、(1)で作成した Adobe ID でログインしてください。
最新版をダウンロードする画面に遷移するので、下記のファイルをダウンロードして下さい。
・spry_X-X-X_YYMMDD.zip
ダウンロードしたzipファイルの中には、Adobe Spry 本体はもちろん、使い方を記したドキュメントやデモ用のHTMLファイルも含まれています。(ただし、英語です。)

【サンプルコード】

※ご注意※
各ファイルを保存する文字コードが異なると、ブラウザで見たときに文字化けすることがあります。
これを回避するために、下記の全てのファイルを同じ文字コード(UTF-8など)で保存することをオススメいたします。

≪SlideShowData.xml≫

≪SlideShow.html≫

≪galleryEx.js≫
galleryEx.js は、「Photo Gallery Demos」で使われている gallery.js を、今回のサンプル用に少し改良したものです。
gallery.js を改良した部分を抜粋します。(他は gallery.js と変わりません。)

≪SlideShow.css≫

≪xpath.js≫
≪SpryData.js≫
≪SpryEffects.js≫
これら3つは、公式サイトからダウンロードしたものをそのまま使います。

サンプルコードの解説

Photo Gallery Demos」を元にしたサンプルコードです。

SlideShowData.xml では、<Slide>1つで、1つの画像データを表しています。
各属性は、下記を表しています。
・path … オリジナル画像へのパス
・width … オリジナル画像の幅(ピクセル)
・height … オリジナル画像の高さ(ピクセル)
・thumbpath … サムネイル画像へのパス
・thumbwidth … サムネイル画像の幅(ピクセル)
・thumbheight … サムネイル像の高さ(ピクセル)
・caption … 画像のキャプション(題名)

SlideShow.html を見ると、ちょっとコムズカシイHTMLになっていますが、ポイントは2つあります。

1つ目のポイントは、

です。
これにより、SlideShowData.xml の画像データの集まり(配列)が、dsPhotos に読み込まれます。

2つ目のポイントは、

です。

時折出てくる「spry:~」や「{~}」の部分が、Adobe Spry独自の構文です。

具体的な構文の説明は省きますが、上記のような記述をすることにより、dsPhotos に読み込まれた画像データの集まり(配列)が順番に読み出され、その度、<div> や <img> が出力されます。

SlideShowData.xml には、3つの <Slide> があるので、最終的には、

というHTMLが出力されることになります。

やってみると分かりますが、SlideShowData.xml の <Slide> を増減させたり、各属性の値を変えたりすると、スライドショーの内容を自由に変更することができます。(ただ、XMLデータとして構文が正しくないと動きませんので、ご注意下さい。)

【参照URL】
・「Spry Documentation」(英語)
 Adobe Spry のドキュメントです。

・「逆引きAdobe Spryリファレンス
・「逆引きAdobe Spryリファレンス(Spry pre release 1.6.1)
 「Adobe Spryで、こんなことができるのかな?」と思ったら、ご確認ください。

・「Adobe Edge: 2007年2月 「Ajax したい!」Web デザイナーのための Spry 集中講座

・「@IT – アドビのAjaxフレームワーク「Spry」を使ってみよう

終わりに

さて、3回にわたって、Ajax についてご紹介をさせて頂きましたが、いかがだったでしょうか?

Ajax対応Javascript の登場により、リッチなWebページ作成の敷居がグッと下がりました。
最近では、安定性も動作速度も増して、多くのWebサイトが、Ajax を利用したコンテンツを採り入れています。

もし、今回の「Ajax入門」で Ajax に興味を持って頂けたのなら、まずは、サンプルをダウンロードして、いろいろ試してみるところから始めてみることをオススメいたします。
今まで実現したくても難しそうでできなかったことが、意外にカンタンに実現できてしまうかもしれませんよ。

皆様のWebサイト作りに、今回の「Ajax入門」がお役に立てましたら幸いです。


2010年02月01日

【システックス会社説明会】今年第一回目の会社説明会が行われました

第一回目の会社説明会行われる

先日、システックス長野本社で会社説明会が行われました。
会議室で聞いていただいたのですが、満席のためちょっときつかったかもしれません。
すみませんでした。

会社説明会第一部:【経営トップが語る】

当社の社長北村が、IT業界の現況、当社の経営方針や今後の事業展開などを説明。
経営者の話を直接聞くことができるこの機会に、みなさん真剣に耳を傾けていました。
社長説明

会社説明会第二部:【先輩SEが語る】

先輩社員が具体的な仕事の内容、システックスを選んだ理由などを語りました。
質疑応答の時間には、非常に多くの質問が取り交わされ、学生さんたちの真剣さが感じ取れました。

会社説明会

参加していただいた学生の皆さん、ありがとうございました。
就職活動、頑張って下さいね。

会社説明会、まだまだ開催する予定です

満員続きでなかなか予約ができない状態が続いております。
大変申し訳ございません。
お問い合わせをたくさんいただいておりますが、会社説明会は3月以降も行います。
今後の予定、予約については後日お知らせいたしますので、しばらくお待ちください。