2012年09月 - ウェブDeBLOG｜トライデントコンピュータ専門学校 Webデザイン学科

ウェブDeBLOG｜トライデントコンピュータ専門学校 Webデザイン学科

トライデントコンピュータ専門学校 Webデザイン学科の最新情報を紹介しています。学生へのインタビュー記事から学生作品の解説、Webデザイン・マークアップ・プログラミングの授業風景、プロジェクト発表会、名古屋のWeb制作会社情報、イベント参加レポートやWeb制作の技術解説などWeb制作に関連する記事を掲載しています。トライデントコンピュータ専門学校は、いま話題の名古屋駅からユニモール地下街を歩いて3分です。

2012年09月

2012.09.24 [月] 学生ブログ公開2012

最終更新:2019.10.22学生作品ポートフォリオ・ブログ

2012年度1年生のブログテーマが完成しましたので、紹介します。今年は、ブログの制作を例年より数ヶ月遅らせ、最初からオリジナルテーマでの公開にしました。Wordpressを使用しています。

◆monochrome http://trident-com.net/~2012w001/blog/
◆LovoCodin' http://trident-com.net/~2012w002/blog/

◆なつきんぐ(・ω・) http://trident-com.net/~2012w003/blog/
◆ぶるさむ http://trident-com.net/~2012w004/blog/

◆Design studio http://trident-com.net/~2012w005/blog/
◆K2Room. http://trident-com.net/~2012w006/blog/

◆EENU：BROG http://trident-com.net/~2012w007/blog/
◆It's Me !!! http://trident-com.net/~2012w008/blog/

◆weblog http://trident-com.net/~2012w009/blog/
◆なかぶろ http://trident-com.net/~2012w010/blog/

◆俺、Webに染まる http://trident-com.net/~2012w011/blog/
◆WebCome http://trident-com.net/~2012w012/blog/

◆はぎのはな http://trident-com.net/~2012w013/blog/
◆TomoBlog http://trident-com.net/~2012w014/blog/

◆BAYASHIBLOG http://trident-com.net/~2012w015/blog/

今後、各ブログで学生たちの活動や制作、学校生活の記事が発信されると思いますので、よろしくお願いします。コメントなんかも是非！

Tag : 学生ブログポートフォリオ Wordpress

17:17 Trackback : 0 Comment : 0 Top

2012.09.24 [月] Facebook「Like Box」をカスタマイズした。

最終更新:-0001.11.30Webサイト制作Tips

【2013年4月8日追記】
外部からのCSSが効かない仕様になったようですので、fb.wallを使って対処しました。
「それでも、Facebook「Like Box」をカスタマイズしたかった。」書きました。

【2013年2月20日追記】
いつの間にか、CSSが効くようになっていましたが、新たに修正が必要だったりしましたので、Facebook側で何かが変わったのでしょう(T_T)

【2013年1月30日追記】
最近、likeboxで検索してこのページに来られる人が多かったので何事かと思っていましたが、どうやらカスタマイズしたCSSが効いていないようで、仕様の変更か何かあったみたいです。解決策がみつかったら追記します。

Facebookが話題になり始めた頃、トライデントコンピュータ専門学校Webデザイン学科のFacebookページを制作しました。このウェブDeブログや学生のブログ、学科の話題などをまとめて紹介しています。

そして、Facebookページの記事を、ブログやWebサイトにプラグインとして配置できる「Like Box」を設置しています。設置の仕方は簡単で、「Like Box」のページに行って、必要事項を記入してCodeを発行します。HTML5, XFBML, IFRAME, URLから好きな形式を選んで、パーツを設置したい場所に貼り付けます。

ところが、設置は簡単なのですが、縦長になってしまうため見栄えがあまり良くありません。Borderの色など設定できるのですが、レイアウト、文字のサイズ・色、写真の配置などの細かい設定はありません。CSSで調整しようと試みましたが、<iframe>のため外から調整が効きません。ということで、下の図のように変更すべく、調べました。

参考サイト
◆Facebookの「Likebox」を自由にカスタマイズ（ウルトラエル）
◆Facebookページをアピール出来るソーシャルプラグイン・Likebox（いいね！ボックス）をオリジナルデザインに変更する方法（かちびと.net）

1.まずは、FacebookページのIDを調べます。Webデザイン学科のFacebookページはURLが設定されているので、IDを調べる方法を探します。

◆FacebookページIDを簡単に確認する方法（HAPPY*TRAP）

http://graph.facebook.com/[ユーザーネーム(ユニークURL)]

ということなので、

http://graph.facebook.com/trident.webdesign

で確認できました。

2.APIキーを取得するため、Facebookアプリを新規で作成します。
https://developers.facebook.com/apps/

アプリの名前を決めて、

セキュリティチェックをすると、

App IDと書いてありますが、これがAPI Keyとなります。

3.表示したい場所にコードを埋め込み、ページID、（いいね！している人の）アイコンの表示数、記事の表示の有無（1で表示）、幅、高さを設定します。

<div id="fb-root"></div> <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <script type="text/javascript">FB.init("APIキー");</script> <fb:fan profile_id="ページID" stream="1" connections="アイコン表示数" width="幅" height="高さ" css="http://XXXXXX.com/XXXX/style.css?1"></fb:fan>

そして、効かせたいCSSファイルのURLパスを記入します。拡張子.cssの後ろの?1は、キャッシュが強いのでうまくCSSの変更ができないということで、更新ごとに数字を変えていきます。?1...2...3.....9と。※2桁は効きませんでした。
CSSのプロパティは、Firebugや要素の検証を使用して探して書き換えていきます。!importantもそんなに使いませんでした。

4.最後にこのコードを、HTMLの<body>のすぐ後ろに入れAPP IDを入れて完成。

<script src="http://connect.facebook.net/ja_JP/all.js"></script>
<script type="text/javascript">
FB.init({
appId : 'APP ID入れる',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>

「いいね！」を「Like!」など英語にしたい場合は、ja_JPをen_USに変えます。
もっと簡単にサクサク〜っと変更できると思っていたんですが、かなり手間取ってしまいました。

Tag : Like Box Facebookページブログパーツ

15:15 Trackback : 0 Comment : 0 Top

2012.09.23 [日] ベースキャンプ名古屋に行ってきました。

最終更新:-0001.11.30その他

WCANの運営や、学生の業界就職でもお世話になっている（有）アップルップルさんのオフィスが名駅近くに引っ越しをして、さらにコワーキングスペース「ベースキャンプ名古屋」をオープンされました。名古屋では栄や伏見、大須など最近コワーキングスペースが続々とオープンしていますね。名古屋駅ということで、トライデントコンピュータ専門学校からも、近所なのでお邪魔しに行ってきました。

白で塗られたむき出しの壁と天井、店内は新しい机が並べられ、さらに窓からはいる自然光など、とても明るい雰囲気です。お邪魔した日は、ちょうどablog CMSのUst放送中でした。映された画面の外はこんな感じになっているんですね～。

本棚にはWebの技術書やビジネス書などが並べられ、場合によってはリブライズを使用して貸し出しも可能だそうです。また貸し出し用のPCや今なら、24インチの液晶タブレットがデモで置いてあり、無線LAN、電源など完備で、手ぶらで来ても作業ができる設備になっています。伺った日は、お客さんも少なく集中して作業をすることができ、ジュースなんかもいただきました。（※この記事もここで書きました。）ありがとうございます！

今後は、勉強会も頻繁に行われるそうなので、名駅のWeb系スポットになるといいですね。また、学生などの交流の場としても使えそうです。

Tag : 名古屋駅ベースキャンプ名古屋

13:13 Trackback : 0 Comment : 0 Top

2012.09.23 [日] TOKYO GAME SHOW 2012

最終更新:2016.05.14セミナー・イベント参加レポート

昨年につづき、9月20日に始まった「東京ゲームショウ2012」に行ってきました。

今年も大盛況で、ビジネスデーにも関わらず場内はとても活気にあふれ返っていました。もちろんトライデントコンピュータ専門学校もブースを出展しています。22日にはゲーム大賞アマチュア部門の発表があり、ゲームサイエンス学科の水野くんが制作した「Sweep Order」が優秀賞を受賞しました。おめでとうございます！

まだ発売前のWii Uやスマートフォンやタブレットをデバイスにしたゲームや、人気ゲームの続編など各メーカー華やかにな演出で紹介しています。

法廷の中でゲームをしたり、ブースの中でプロレスが行われたり。

そして、綺麗なお姉さん達。

夜には、東京に就職したWebデザイン学科卒業生と久しぶりに食事をするため、新宿へ。話題の「ビックロ」の近くでした。近況や今後について、短い時間でした楽しかったです。また、よろしく！

Tag : 東京ゲームショウ2012 TOKYO GAME SHOW 2012

13:07 Trackback : 0 Comment : 0 Top

2012.09.20 [木] WCAN 2012 Autumn

最終更新:-0001.11.30学生作品発表・プレゼン

9月15日（土）に名古屋国際会議場で行われた「WCAN 2012 Autumn』に参加してきました。今回は、Autumn恒例の3部屋×4セッション選択制で、参加者が事前に聞くセッションを決める方式です。スピーカーの方は、名古屋で活躍しているクリエイターの方が中心で新鮮な話が盛りだくさんでした。

本セッションが始まる前に、学生セッションがあり、トライデントコンピュータ専門学校の学生も発表をさせていただきました。Webデザイン学科1年生の塚本さんが、ライブアートやクラブイベントのデコレーションなどの活動の紹介と、アーティスト「塚本みどり」をインターネットやFacebookページを使って、アクセス数を解析し、モチベーションを上げてセルフプロモーションに勤しんでいること、将来の夢など、10分間の発表時間内でしっかりアピールしました。

当日使用したプレゼンのスライドは、Slideshareで共有されていますのでぜひご覧ください。

塚本みどり(18) 主に絵を描いてます！【WCAN 2012 Autumn】
from Midori Tsukamoto

別の部屋では、トライデントコンピュータ専門学校の学生も参加して、学生コミュニティ「Miim」の活動を告知させていただきました。名古屋でWebに関心のある学生が集まって、”あれや””これや”したいという事で、早速、今月「jQuery勉強会」を行うそうです。今後はWeb系だけでなく、アプリ、プログラム、ゲーム、CG、デザイン、アート系などの学生が参加して、面白いことができると良いですね。

Tag : WCAN 2012 Autumn トライデントコンピュータ専門学校塚本碧

16:16 Trackback : 0 Comment : 0 Top

Home