2011.03.30 [水] トライデントWebサイトリニューアル

愛知県でも、桜の開花が聞こえ始め、やっと春らしくなってきましたね。そんな中、トライデントコンピュータ専門学校のWebサイトがリニューアルされてました。



今年は、大幅なレイアウトの変更もなく、記事の刷新と情報の整理が施されました。本格的にWebサイトを、学校情報を発信するツールとして活用してくる中で、情報過多で分かりづらくなってしまった部分や、動線の見直し、複数のユーザー層に考慮したコンテンツの充実など、今後、解析・検討していき、より使いやすいWebサイトへ、アップデートしていく予定です。ご覧になった方で、気になる部分がありましたら、ぜひお知らせください。



Webデザイン学科のページでは、他の学科同様、各専攻の説明、入学から就職・卒業までのモデルケースなどを紹介しています。また、これからWebの勉強を始める若い人に向けて、昨年「業界研究」の授業で特別講義をして頂いたunoplusの戸田芳裕さんからのメッセージも掲載されています。ぜひ、Webデザイン学科に興味のある方は、ご覧ください。

ついでにお知らせしておきますと、学内のブログが増えました。
全部で7つと、乱発しすぎな気がしますが、今後とも他のブログ共々ウェブDeBLOGをよろしくお願い致します。

2011.03.30 [水] 卒業式＆新年度

3月16日にトライデントコンピュータ専門学校の卒業式が行われました。
会場は、今年も金山駅近くのANAクラウンプラザホテルグランコート名古屋です。



Webデザイン学科は1期生ということもあり、カリキュラム、就職活動など試行錯誤の連続でしたが、ほとんどの学生が卒業式までに進路を決定して、新しい生活への門出を迎える事ができました。今後も社会人として、またWebデザイン学科の卒業生として、活躍することを期待しております。
たまには、近況報告をかねて、遊びに来て下さい。

卒業の感傷に浸る時間もないまま、翌週からは2011年度の集中授業が始まっています。現在、各自就職活動に向け、ポートフォリオサイトや作品の制作をしております。個人制作ですので、教室内はキーボードを打ち込む音と、マウスを走らせる音のみ。良い感じの集中力で、新2年生も頑張ってます。
完成した学生作品は、そのうちココでも紹介したいと思います。



4月からは、新入生も入学してきます。
良きOB・OGとして、良き先輩として、宜しくお願いしますねー。

2011.03.24 [木] 映画「英国王のスピーチ」

東北地方太平洋沖地震によって被害を受けられた方々に、心よりお見舞い申し上げます。
トライデントコンピュータ専門学校でも、義援金の募金が始まっております。
被災地、関東地方が、1日でも早く平穏な日々が戻ってきますよう、お祈りいたします。

先月末から公開してる映画「英国王のスピーチ」を観てきました。
シネコンで観たのですが、2010年のアカデミー賞の作品賞・主演男優賞・脚本賞・監督賞と主要4部門を受賞という事で注目されているはずなのですが、派手なアクションがあるわけでもなく、3D上映するような題材でもないので、観客は少なめでした。

ジョージ6 世は、幼い頃から吃音というコンプレックスを抱えていたため、いつも自分に自信が持てないでいた。厳格な父はそんな息子を許さず、様々な式典のスピーチを容赦なく命じる。ジョージは妻のエリザベスに付き添われて、スピーチ矯正の専門家・ライオネルのもとへ夫を連れていく。ヒトラーの率いるナチスドイツとの開戦直前、不安に揺れる国民は王の言葉を待ち望んでいた。王は国民の心をひとつにするため、世紀のスピーチに挑む……。

よく練られた脚本と、安定感のある演技は、素晴らしいです。終盤が少し物足りない感じですが、全編飽きずに見ることができました。ちなみに、名古屋での上映館がシネコンに加え、ミニシアター系の名演小劇場なのも、この映画の観客層が一般娯楽映画とは違うというのがわかります。

映画をじっくり観たいと言う人には、おすすめです。

2011.03.10 [木] 卒業制作・研究発表会2011

忘れないうちに、2011年2月10日に行われた卒業制作展の写真を紹介しておきます。






写真は、CGイラスト学科のyuto*くんに撮ってもらいました。もう、すでにフォトグラファーとして働いているだけあって、綺麗に撮れています。ありがとうございました。
yuto*ポートフォリオサイト「HitosashiYubi」

「卒業制作・研究発表会2011」の続きを読む≫

2011.03.09 [水] ぬいぐるみのラパン

最近、耳からはなれない曲があります。映像を実際に観たことが無いにも関わらず、軽快なリズムと「ぼくたち～ラパン♪ラパン♪」。もう、気になって気になって仕方がなかったのですが、とうとう見つけました。

「ぬいぐるみのラパン」

ラパンって？
ラパンはフランス語で“うさぎ”のことだよ
赤いタイツのペペ　まゆげがかわいいパパ　灰色うさぎのチチ。
彼らはタイツが大好き。ダンスとファッションが大好きで、今日もかわいいタイツをはいて踊ります。
タイツが大好きなので相手のタイツを引っ張ったりします。これは あいさつのようなものです。タイツを引っ張られると、嬉しくて耳が伸びるんです。
ぴよ～～ん

「秘密結社 鷹の爪」などを制作しているDLEとメ～テレの朝の共同プロジェクト「キャラモニプロジェクト」らしいです。
「皆さんに元気と話題を！」
うん、元気がでそう。。。



なんとDVDも発売中だとか。買ってしまいそう。
Youtubeの関連動画で紹介されている「パンパカパンツ」も気になる。

2011.03.08 [火] Wordpressビジュアルエディタ改造その3

芸能人のブログって、絵文字だらけですよねー。メールなどでは「絵文字のないメールなんて可愛くなーい」という話もよく聞きます。自分では、余り絵文字を使わないので、気にしていなかったのですが、Wordpressでも絵文字は使えるのだろうかと、ふと思いやってみました。
ビジュアルエディタの改造とはちょっと違うかも。。

実際、探せば、絵文字を使えるようにするプラグインは、いくつかあります。前回入れた「TinyMCE Advanced」でもSmilesボタンが使えるようになります。



将来的には携帯電話での閲覧や、投稿にも対応したいということで「KtaiStyle」を入れました。さらに、PCから絵文字入りで投稿しても、なるべく同じように携帯電話で見れるようにしたいですよね。ビジュアルエディタ上でも表示という事だけを考えると「emoji」が簡単です。pluginにアップロード後、wp-includes/images/smiliesの中に、使いたい絵文字画像を入れれば、すぐに使えます。携帯電話に対応した絵文字アイコンも「Type pad」で無償で配布されています。
「うっひょ～、簡単、簡単」と入れてみたものの、ただの<img>タグで絵文字が入るため、写真など他の画像と同様、上下にmarginが入ったり、上の絵文字のようにborderで囲まれてしまいます。絵文字だけに、変更を加えたくてもclassが挿入されていないので思うように操作できません。
そして、肝心の携帯電話でも画像として認識され、表示がされないという結果に。とほほ～

その後、色々とプラグインを入れては試し、最終的に「Custom Smilies」にたどり着きました。「emoji」同様、wp-includes/images/smiliesに画像を追加して、使用したい絵文字に「:パン:」などと、あまり使わないような文字列を設定すれば使えるようになります。<img>にclassも入りますので、個別にCSSで設定ができます。さらに、コメントにも絵文字が使えるようになりました。



そして、携帯対応ですが、各キャリアそれぞれの絵文字にコードが割り当てられており、そのコード（iモード絵文字コード、ezweb au絵文字コード、softbank絵文字コード）をココの絵文字にも設定できればいいわけです。
PHPはよくわからないので、調べてみるとKtaistyleを触ればいけそうかも。それもそんなに難しくない。

ktai-style/operatorsフォルダの中に入っているemobile.php、ezweb.php、i-mode.php、softbank.php、willcom.phpファイルに、それぞれKtaistyle用の文字列がどの絵文字コードに割り当て（'d140' => "\xf9\x95", // わーい (嬉しい顔)）られているかが、書かれています。その下に、画像にたいしてどのKtaystyle用コードを割り当てるのか（’icon_smile.gif’ => self::$pictograms['d140']）が書かれています。
これをwp-includes/images/smiliesに入った画像に割り当てていけばOK。画像は200以上あるので使いそうな画像だけにしておきます。

'angry.gif' => self::$pictograms['d141'],
'annoy.gif' => self::$pictograms['d152'],
'apple.gif' => self::$pictograms['d258'],
'art.gif' => self::$pictograms['d062'],
'atm.gif' => self::$pictograms['d043'],
'bag.gif' => self::$pictograms['d069'],
'ban.gif' => self::$pictograms['d245'],
'banana.gif' => self::$pictograms['d257'],
'bank.gif' => self::$pictograms['d042'],
'bar.gif' => self::$pictograms['d052'],
'baseball.gif' => self::$pictograms['d022'],
'basketball.gif'………

ビジュアルでディタでの、絵文字の表示はできませんが携帯でも見れるようになりました。
　⇒　

まだ、docomoしか変更できていないので、時間をみてsoftbank,auに取り掛かろうと思います。

参考：
Smiliesアイコンを携帯絵文字に変換するコード | 簡単ホームページ作成支援-Detaramehp
（携帯表示を諦めかけていた時に、たどり着きましたありがとうございます。）

2011.03.07 [月] WCAN 2011 Spring ライトニングトーク

3月19日に名古屋国際会議場で行われる「WCAN 2011 Spring」でWebデザイン学科の学生が、ライトニングトークで発表することになりました。内容は先日公開した「ART QUILT MUSEUM 2011 日本の四季キルト展」Webサイトの紹介です。話をするのは、平田悦子さん、鈴木美有さん、藤井亜紀さんの3人。
よろしくお願いします。

→ウェブDeBLOG「セントレア「日本の四季 キルト展」Webサイト公開」

■イベント名：WCAN 2011 Spring
■スピーカー：矢野りんさん、林 千晶さん
■日程：2011年3月19日(土) 13:30～19:00（受付13:00～）
■会場：名古屋国際会議場 会議室 141+142
（〒456-0036 愛知県名古屋市熱田区西町1-1→地図・アクセス方法）
■TEL：[phone]
■定員：210名（※キャンセル待ち）
■会費：事前支払●一般 ￥3,000 ●学生 無料(学生証をお持ちください)
■懇親会：炉端DiningBar てしごと家 金山店 \￥3,500

2011.03.05 [土] Wordpressビジュアルエディタ改造その2

さて、前回の続き。
これまでで、とりあえず画像を入れて、文章を書けば、実際の表示と同じように表示されるわけですが、この「画像を入れる」「文字を入れる」と言うのが、デフォルトの状態では優しくない。画像を入れる時はいちいちアップロード挿入ボタンを押してFlashを起動しなければいけないし、なぜか、見出しを設定できるボタンがあるのです。そして、文字のサイズを変更するものが他に見当たらない。見出しの設定で文字を大きくしてしまうと、HTML構造上おかしなコードができ上がります。


なので、このボタンをカスタマイズしましょうということで、「ビジュアルエディタ、ボタン、カスタマイズ」で検索。PHPのコードを書き込めば、必要なボタンを入れれそうなのですが、書くのが面倒くさいw。
という訳で「TinyMCE Advanced」というプラグインを導入し、ついでに日本語化もしちゃいます。

さらに、動画を埋め込みたい時のボタンも付けちゃいましょう。これもプラグイン「Viper's Video Quicktags」を使ってさくっと解決。
そして、TinyMCE Advancedの設定画面で、必要なボタンを追加したり、削除します。動画関連のボタンはココでは表示されませんので、Video Quicktagsで設定後、ビジュアルエディタ上で確認します。


動画はYouTubeだけでも良いかと思ったのですが、とりあえずGoogle Video, Vimeo, FLVを入れておきましょう。他には、注文のあった文字サイズ変更と画像の配置ボタン、その他作表のボタンを入れておきました。


設定画面では、英語だった「文字サイズ」ボタンもしっかり日本語で表示されています。う～ん「段落」ボタンは要らないかも。
これで、だいぶ使いやすくなったのではないでしょうか。まだ、「こんな事もした方がいいよ」というのがあれば、教えて下さい。

参考
Lovelog+*「TinyMCE Advanced*ビジュアルエディタを強化-日本語版配布 」
だって兎の耳は長いんだもん。「WordPressでYouTubeの埋め込み方法」

2011.03.05 [土] 愛知県立芸術大学卒業・修了制作展

愛知県美術館ギャラリーで行われている「愛知県立芸術大学卒業・修了制作展」に行ってきました。


昨年も行ったのですが、さすが芸術大学ということもあり、高い技術に裏付けられた自由な表現が観てて面白いです。
たしか、少女の夢中って題名だったんですが、キャンバス全面に女の子が好きそうな、キラキラしたシールやキャラクターグッズがこれでもかってぐらい貼ってあります。全体にブレず、圧倒的な作業量が好きな作品です。


ひと目みて、二度見せずにはいられない逆さの作品。エスキースなどアイデア段階のスケッチが収められたポートフォリオが下においてあります。題名は「ゆらぐ」だったかな?!（すみません、うろ覚えです）今年は、彫刻・立体作品が全体的に見てて楽しかったです。


大黒屋という（架空？）お店のブランディング作品。リサーチ→プランニング→デザインと進めた経緯が各分野に纏めてあります。プランニングの部分に“ペルソナ”とあり愛知県芸大でもペルソナを使った手法でやってる人もいるのね。余りじっくり見れなかったのが、残念。



アニメーションやWebサイトの作品もありました。Webサイトは、新しいWebに関する情報を紹介したり、インターネットに疎いおかあさんが、iPodを通じてWebの世界に親しんでいく四コママンガ「インターネットおかあさん」などが掲載されている「NET WATCHER」というサイト作品。同名のフリーペーパーもおいてあり、インターネットで話題の情報が載っています。インターネットが好きというのが伝わってくる作品。


そんな中、先生方が作品を1点1点講評する姿も。
他にも陶磁器作品やもちろん絵画作品もあり、色々と楽しめました。



3月6日までやってます。って明日までか。

2011.03.05 [土] Wordpressビジュアルエディタ改造その1

先日、公開した「かっぱ商店街Webサイト」ですが、今後しっかりと使ってもらおうと、ブログの更新の仕方を教えに行ってきました。
ところが、Wordpressのビジュアルエディターが思いのほか使いづらく、説明に窮してしまいました。普段、学生には「HTMLエディターを使うように」と言えば良かったのですが、商店街の皆さんはHTMLタグなど知りませんので、ビジュアルエディターで、記事が書けるように改造する必要が出てきました。

商店街のサイトは学生に作業してもらうとして、その前に実験と参考のために書いておきます。まず、実際のブログでは下記のように表示されます。（これも少し微調整してあります。）



ところが、デフォルトのビジュアルエディタではこのように、表示されています。これでは、エディターを見て書いても、実際に表示される記事と、イメージが違いすぎてしまいます。もう少しイメージができるように近づけてたいですし、もっと便利に使えるようにもしたいです。



まずは、外観＞テーマ編集で、ビジュアルエディターのスタイルシートを選択します。記事の表示と同じようにfont-family（書体）を"Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif"に書き替えます。その他、<p>タグにmargin-bottom:24pxも設定されているので、これを0にしてしまいます。行間はline-hightで調整。その他、フォントサイズなども変更していきます。
そして、よく問題になっているのが複数行の改行ができず、改行すると余分な<br>タグなどが入ってしまう現象。こちらはPS Disable Auto Formattingというプラグインを入れて解決しました。これは、複数行改行を可能にするだけでなく、余分な<P>タグや<br>タグが入らないようにもしてくれます。
また画像の上下にスペースが欲しいので、margin-topとmargin-bottomにそれぞれ5～10pxを設定します。



これだけでも、だいぶ一番上の実際の表示に近づいたのではないでしょうか。次は、プラグインで操作ボタンを加えて、リンクや画像の挿入をしやすくしましょう。
制作している時には、エディター部分をカスタマイズする事をまったく気にしていなかったのですが、いざ他人が使うとなると、非常に重要な事でした。
Web制作の現場では当たり前な事だと思いますが、学生のうちから気付いけて改善していけると良いですね。

2011.03.02 [水] セントレア「日本の四季 キルト展」Webサイト公開

中部国際空港株式会社セントレアと株式会社アクアリング、そしてトライデントコンピュータ専門学校の産学協同プロジェクトとして、2010年度進めてきました「ART QUILT MUSEUM 2011 日本の四季キルト展」Webサイトを公開しました。

ART QUILT MUSEUM 2011 日本の四季キルト展
http://www.centrair.jp/quilt/



今年で6回目を迎えるセントレアのアートキルトミュージアムは、日本のキルター（※キルトを作る人）の中ではよく知られている有名なイベントです。しかし今回は、そんなキルト展の紹介だけではなく、キルトとの接点の少ない方に「キルトとは？」「セントレアのキルトの魅力」「生活の中でのキルト」「キルトを始めるには？」といったキルトに、もう少し興味が湧くようなコンテンツを、学生の体験を交えながら紹介しています。
「この春、新しい趣味を始めてみようと考えているあなた！キルトなんていかがですか？」



また、セントレアに、搭乗や他のイベントで来場された方にも、立ち寄っていただけるように案内などの充実、さらにキルト展に来場された方には、もっとセントレアの楽しさを知っていただけるようにと、店舗街などのバナーを配置しています。さらに、簡単な“キルト占い”やTwitterのキルト展ハッシュタグ表示窓も設置しました。
ぜひ、2011年2月24日から約1年間展示されていますので、中部国際空港セントレアで開催中の「ART QUILT MUSEUM 2011 日本の四季キルト展」にお越しの際は、#centrair_quilt で、感想などツィートしてください。

■制作メンバー：平田悦子、鈴木美有、鈴木良、後藤章一、藤井亜紀（1年生）
■協力：Webデザイン学科2年生、CGスペシャリスト学科3年生


この度、学生にこのような機会をいただけた中部国際空港株式会社セントレア様、また企画・制作など全般に渡り細かくご意見をくださった株式会社アクアリング様、ならびにご協力頂いた関係者の方々に、感謝いたします。
本当にありがとうございました。

2011.03.01 [火] 放課後のプレアデス

先日の、FICCの平野さんの講演を聞いてから、Google Chromeのトップページは、iGoogleに設定してるのですが、今日、偶然おすすめ動画を見てみたら、萌え萌えなアニメーション画像でした。
なぜに?!と思いながら、クリックしてみると、自動車メーカーのSUBARUとアニメーション制作のGAINAXのコラボレーションだとか。２月１日から配信されていたのですね。

放課後のプレアデス公式サイトには、プロジェクトスローガンには車づくりとアニメーションづくりに対する姿勢への想いが綴られています。

ものづくりへの誇り、それを貫き通すスピリッツ。
GAINAX、そしてSUBARU。
それぞれアウトプットは違うけれど、目指すもの、根底に流れるものは、同じ。
世界中で待ち続けてくれている人たちに、満足してもらえる作品をつくること。
その気持ちは、誰にも負けたくない。
そんなわたしたちが出会ったことで、
新しい何かを創り出すことはできないだろうか。
そう考えて生まれたコラボレーションの第一章が、
アニメーションプロジェクト『放課後のプレアデス』です。
まずは、映像を。
日本から、世界に向けて。

2009年の、トヨタ自動車内に西ジブリ設立など自動車会社とアニメーション制作会社の協力には前例もあり、それぞれ共感する部分が多いのかもしれません。現在4話まで公開中です。