2014.02.27 [木] 教室のPCの配置を変えました。

新年度を迎えるにあたり、Webデザイン学科実習室のPCの配置を変更しました。ついでに、長い間使い道のなかった机や椅子の廃棄などを行うなど、大掃除を決行して見違えるような教室になりました。



PCの向きも全台前向きからディスカッションがしやすい島形に移動し、さらにグループ制作のブレーンストーミングやワークショップ形式の授業のために、ホワイトボードを4台配置しました。後方には、普段授業で利用する前方のプロジェクターとは別に、プロジェクターを配置してグループでの画面検討やプレゼンの練習などに利用できればと考えています。制作中心の授業であれば、中央をホワイトボードで区切って前後で違う授業なってのも可能かもしれません。



また、教室の中央と後方には、グラフィック制作物やポートフォリオの仕上げに利用できるように、カッターマットを敷いた作業台があります。



古い雑誌や、もう数年使っていなかった備品なども処分して、ロッカーの中に収納しました。授業の内容や制作手法がだんだんと変化してきていますので、臨機応変に対応できるような環境づくりが重要です。↓以前の教室と比べて、うん、綺麗です。



やっと、これからPCのアップデートやデータの整理などを行っていけます。春から、新入生や新2年生達がこの教室で、どんな使い方をしてくれるのか、どんな良いものを制作をしてくれるのかと、とても楽しみです。

2014.02.20 [木] トライデント合同企業説明会2014

2月20日（木）に名古屋国際会議場で「2014年度トライデント合同企業説明会」が行われました。専門学校トライデント（外国語・ホテル専門学校、ビューティ・ブライダル専門学校、スポーツ医療看護専門学校、コンピュータ専門学校、デザイン専門学校）の各校対象企業が合同での企業説明のブースを設置しています。



毎年この時期に開催され、おかげさまで110社以上の企業に参加していただきました。学生にとっては、志望業界企業の方の話が一度に聞けるということ、就職活動のスタートとしてなど真剣に話を聞いたりメモをとったりしていました。また企業にとっても、Webデザイン学科ばかりでなく、IT系、ゲーム系の学生や、デザイン専門学校など系列校の学生とも話ができるので、メリットは双方にあると思います。

今回、Webデザイン学科の対象企業（Web制作会社など）の参加が学科創設以来はじめて増えました。来年度も11月に参加企業を募集しますので、ご興味のある採用担当者の方は、ぜひご連絡ください。



すでに就職活動は始まっていますが、本格的に頑張っていきましょう。

2014.02.20 [木] サーバーを構築してa-blog cmsをインストールした ④（最終）

表題のネタで、なが〜く引っ張ってきましたが、いよいよa-blog cmsのインストールです。acmsフォルダ内のindex.phpにブラウザでアクセスすれば、setup画面が出てくる。。。はず。。。ん!?真っ白です。

ここで、かなりハマりました。ionCubeを疑ってみたり、php.iniを書き直したり、httpd.confを編集し直したり、iptablesを初期化したり、まさかMySQLなのか？と。

ここまで、すんなり進めたように書いていますが、ポートを閉じてしまってサーバーに入れなくなったり、削除してはいけないファイルを消して設定が全部消えたり、MySQLコマンドから抜けれなくなったり、OSの初期化は何度やったかわかりません。
そんなこんなで週末の丸二日作業し続けた訳ですが、もう、いろいろ頑張ってダメでしたので、ベースキャンプ名古屋に聞きに行くことにしました。

「サーバーを構築してa-blog cmsをインストールした ④（最終）」の続きを読む≫

2014.02.19 [水] サーバーを構築してa-blog cmsをインストールした ③

はい、3回目の記事です。
前回までの設定でFTPクライアントでファイルをアップロードできるようになりましたので、いよいよa-blog cmsをインストールしたいと思います。でも、まだまだ“黒い画面”ターミナルはガツガツ使っていきます（黒くないけど）。

a-blog cmsは昨年末に2.0がリリースされましたので、早速ダウンロードしてインストールしたいと思います。ライトライセンスは無料で利用できます。
ダウンロードページから2.0.1.1（2/19現在）をダウンロードします。
acms2011install.zipを解凍し、フォルダ内のablogcmsをFTPでサーバーにアップロードします。ドキュメントルートは前回vsftpd.confで/var/www/htmlに設定してありますので、接続して表示されたディレクトリでOKです。フォルダ名はacmsに変更しました。

この後は、新規インストールの手順を見ながら進めて行くことになります。
リンクページは1.x系のものですが、基本は一緒です。2.x系はinstallパッケージがなくなりました。

動作環境を確認します。

PHP	5.1.6〜5.4.x マルチバイト文字列関数が使用可能な事（mbstring）、Zlib関数が使用可能な事、PCRE関数が使用可能な事、その他標準的関数
MySQL	5.0以降
Webサーバー	Apache (IISでは動作しません)
必要なライブラリ・その他	ionCubeローダー GD（グラフィックライブラリ） .htaccessの利用許可（AllowOverride） URLの書き換え（RewriteEngine）

上から順に確認していきましょう。ターミナルにphp -vを打ち込みEnterを押します。

# php -v
PHP 5.1.6 (cli) (built: Dec 10 2013 22:08:48) 
Copyright (c) 1997-2006 The PHP Group
Zend Engine v2.1.0, Copyright (c) 1998-2006 Zend Technologies

5.1.6ですので大丈夫です。次はMySQLです。

# mysql --version
mysql  Ver 14.12 Distrib 5.0.95, for redhat-linux-gnu (x86_64) using readline 5.1

5.0.95ですのでMySQLもOKです。Webサーバーは、

# httpd -v
Server version: Apache/2.2.3
Server built:   Oct 16 2013 12:18:29

Apacheが入っています。
さて、暗号化PHP読み込みファイルionCubeローダーをインストールします。日本代理店 アシアル社のサイトに掲載されているインストール方法を参考にしてphp.iniファイルにインストールしていきます。
phpinfo.phpに

<?php
phpinfo();
?>

を書いてサーバーにアップしてブラウザで表示します。
これで、php.iniの場所が/etc/php.iniだとわかりましたので、ionCubeをダウンロードします。アシアル社からダウンロードしたものでは上手く動かなかったので、本場のionCubuからターミナルを操作してダウンロードします。

cd /usr/local/src
wget http://downloads2.ioncube.com/loader_downloads/ioncube_loaders_lin_x86-64.tar.gz
tar zxvf ioncube_loaders_lin_x86-64.tar.gz
cd  ioncube
mkdir /usr/local/ioncube
cp ioncube_loader_lin_5.1.so /usr/local/ioncube
cp loader-wizard.php /var/www/html/acms
※削除しておきます。rm /usr/local/src/ioncube_loaders_lin_x86-64.tar.gz

これで、サーバーの中にionCubeが入り、ionCubeのインストールサポートファイルloader-wizard.phpもacmsフォルダに入りました。
php.iniを編集していきます。

vi /etc/php.ini

で開き、

zend_extension = /usr/local/ioncube/ioncube_loader_lin_5.1.so

を追加して

# service httpd restart

httpdを再起動します。ブラウザでloader-wizard.phpにアクセスして、

という画面が表示されれば、無事インストールされています。続けて.htaccessを利用できるようにhttpd.confを編集します。

# vi /etc/httpd/conf/httpd.conf
#
# AllowOverride controls what directives may be placed in .htaccess files.
# It can be "All", "None", or any combination of the keywords:
#   Options FileInfo AuthConfig Limit
#
AllowOverride None

を

AllowOverride All 

に変更。
さらに調べるとphpのライブラリがいろいと入っていないようだったのでグラフィックライブラリphp-gdと共にインストールする。

yum install php-fpm php-devel php-cli php-xml  php-mbstring php-gd

RewriteEngineはすでに有効化されていました。

これで、a-blog cmsインストールの準備が整ったはず。
いよいよ次回インストールします。

2014.02.19 [水] サーバーを構築してa-blog cmsをインストールした ②

さてさて、前回ののつづきです。Webサイトを公開するためにはWebサーバーを構築しないといけませんので、Webサーバーパッケージhttpdを設定していきます。
その前に、iptablesでファイアー ウォールの構築をするのですが、ちょっと難しいので下記サイトを参考にしてください。
【参考】さくらのVPS を使いはじめる 3 – iptables を設定する

では、まずはhttpdがインストールされているか確認します。

# rpm -q httpd
httpd-2.2.3-83.el5.centos

入ってますね。
Appachの各種設定するために、httpd.confを編集していきましょう。

# vi /etc/httpd/conf/httpd.conf

Enterを押して、

#
# This is the main Apache server configuration file.  It contains the
# configuration directives that give the server its instructions.
# See <URL:http://httpd.apache.org/docs/2.2/> for detailed information.
# In particular, see
# <URL:http://httpd.apache.org/docs/2.2/mod/directives.html>
# for a discussion of each configuration directive.
#
# Do NOT simply read the instructions in here without understanding
# what they do.  They're here only as hints or reminders.  If you are unsure
# consult the online docs. You have been warned.
#
# The configuration directives are grouped into three basic sections:
#  1. Directives that control the operation of the Apache server process as a
#     whole (the 'global environment').
#  2. Directives that define the parameters of the 'main' or 'default' server,
#     which responds to requests that aren't handled by a virtual host.
#     These directives also provide default values for the settings
#     of all virtual hosts.
#  3. Settings for virtual hosts, which allow Web requests to be sent to
.....

だ〜と表示されますので、細かい文字の中からServerAdmin root@localhostを探して、サーバー管理者のメールアドレスに変更します。

# ServerAdmin: Your address, where problems with the server should be
# e-mailed. This address appears on some server-generated pages, such
# as error documents. e.g. [e-mail]
#
ServerAdmin root@localhost

続けて#ServerName www.example.com:80という項目を探して、#を外しwww.example.com:80の部分をWebサイトのURLに使用するホスト名に書き換えます。今回はIPアドレスになります。さらに続けて、

Options FollowSymLinks ExecCGI IncludesNoExec

を

Options -Includes FollowSymLinks

に変更します。これでescキーを押して編集モードから抜け、

:wq

Enterを押して保存します。
httpdを再起動します。

# /etc/rc.d/init.d/httpd restart
Stopping httpd:     [  OK  ]
Starting httpd:      [  OK  ]

ServerNameで設定したIPアドレスにブラウザでアクセスしてみて下記のような表示が出れば成功です。

「サーバーを構築してa-blog cmsをインストールした ②」の続きを読む≫

2014.02.17 [月] サーバーを構築してa-blog cmsをインストールした ①

現在あるプロジェクトのため、IIJさんのクラウドサーバーIIJ GIOにアップルップルさんのa-blog cmsを使用しようと考えています。さっそく検証したのですが、初めてサーバーを構築して、四苦八苦いろいろと苦労しました。
実際に利用する場合は、セキュリティの事もありますので、専門の人にお願いしようと思うのですが、再度構築する機会もあると思いますので、忘備録として書いておきます。
※Webデザイン学科では、サーバー構築の勉強はしません。

まずは、IIJ GIOサービスにログインし、仮想サーバーを起動させるために、SSH公開鍵を設定します。SSHとは、Secure Shell（セキュアシェル）を利用した公開鍵と秘密鍵を使って暗号化して通信をする技術です。この鍵の組み合わせを設定するわけです。SSH接続するためのSSHクライアントは、Windowsであれば「PuTTY」「Tera Term」や「RLogin」なんていうのもありますが、Macintoshでは、いわゆる“黒い画面”ターミナルを使います（黒くないけど）。
ターミナルを起動して.ssh（不可視フォルダです）ディレクトリへ移動して鍵を作ります。

$ cd ~/.ssh
$ ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 

パスフレーズを聞いてきますが、なにも打たずにEnterですすめます。

$ ls
id_rsa id_rsa.pub known_hosts

$ lsで.sshフォルダ内を表示します。id_rsaが秘密鍵でid_rsa.pubが公開鍵です。
id_rsa.pubをエディターで開いて理解不能な文字列をコピーし、SSH公開鍵設定にペーストして設定を保存します。
サーバーが停止中なのでサーバー設定で起動します。起動したらターミナルからサーバーに接続してみます。

$ ssh root@IPアドレス
[root@localhost ~]# 

繋がりました！意外に簡単ですね。
【参考】[Mac] ターミナルで ssh 接続（公開鍵認証）をする | rakuishi.com

とりあえず、rootのパスワードを設定します。

# passwd root
Changing password for user root.
New UNIX password: 
Retype new UNIX password: 
passwd: all authentication tokens updated successfully.

新しいパスワードを打ちます。表示はされません。再度打ち込みます。ちなみに最初の記号が$から#に変わっていますが、これはroot権限で命令していることを指しています。
では、新しいユーザーを作り、パスワードも設定しましょう。

# useradd webdesign
# passwd webdesign

追加したユーザーを確認します。

# cat /etc/passwd

最終行に追加されていればOKです。パスワードは暗号化されて表示されいます。

「サーバーを構築してa-blog cmsをインストールした ①」の続きを読む≫

2014.02.09 [日] 卒業制作発表会が終了しました。

2013年度の集大成「卒業研究制作展2013」が無事終了しました。Webデザイン学科2年生の作品は地下のラウンジの他、駐車場などで展示しました。この冬一番の寒い日でしたが、たくさんのご来場ありがとうございました。



平日の開催で、お越しいただけなかった方も多かったと思いますので、作品も紹介します。



ソーシャルゲームのガチャやカードの合体合成、進化、レベルアップなどをHTML5やPHPを利用して実装してあります。オリジナルキャラクターも50体ほどあります。



オリジナル仮面ライダーのプロモーションビデオを制作。ロゴなども制作して世界観を伝えています。



若い人にも、日本人の心、お茶に親しんでもらい楽しく飲んでもらいたいということで、パッケージなどをデザインしました。



Instagramに上げた写真をアルバムにできるAndroidアプリです。



Unityで作ったゲームをKinectをコントローラーとして動かしています。プロジェクターで投影してるのは、初音ミク祭りでも使われている透明スクリーンを真似た「ポリッドスクリーン（ごみ袋）」。



かわいいキャラクターが海や宇宙へと冒険？するFlashアニメーション作品。





アクションカメラのGoProを子供に装着して撮影することで、こどもの世界を垣間見ようという試み。一部、立体音響で録音できるバイノーラルマイクを利用しており、ヘッドホンで体験することができます。Webサイトでも動画が観られます。



水をテーマにした写真を展示。水滴や水たまりなどちょっと変わった視点で撮影しています。



勇敢なる者の席。一応、映像作品が上映されていました。。。逆か。



振動センサーを利用したライブマッピング?!作品。この日は今年の冬一番の寒さでした。



AR技術を利用した絵本です。読んでいくとマーカーがあるのでPCのカメラにかざすと画像・映像が浮かび上がります。



Bluetoothで接続したマウスロボが、キーボードのテンキーで操作できます。



幾何学模様を利用して自然物をリデザインした作品。適当な数値を入力すると3Dモデリングされた作品も展示。

10月から制作してきた「卒業制作」でしたが、たくさんの方に見ていただき感想やご意見をいただきました。来年は、もっと高校生や企業の方にお越しいただけるような試みを考えています。
ご来場ありがとうございました。2年生の皆さん、お疲れ様でした！


※今年のWebデザイン学科卒業展のWebサイトは、1年生の伊吹君と松岡君が制作してくれました。