2014.08.23 [土] トライデント・ECCコンピュータ専門学校Web制作合宿2014 おまけ

さて、終了後は「他のグループのメンバーとも話をしたり、集中して制作した二日間を癒しましょう」ということで、前回同様、最後は懇親会を行いました。

名古屋らしくて、ワイワイできるものって何だろうと？と考えたのですが結局、たこ焼きパーティにしました。たこ焼きって季節を問わず、みんなでコロコロ回せるので盛り上がりますね。慣れた大阪の学生に教えてもらいながら焼いていきます。







もちろん、名古屋の名物「手羽先」「味噌串カツ」も忘れていません。





今後、同じ業界に進む学生同士、実りのある交流ができたのではないでしょうか。将来、この出会いがきっかけで一緒に仕事ができたりすると良いですね。

2014.08.23 [土] トライデント・ECCコンピュータ専門学校Web制作合宿2014 二日目

いよいよ、二日目最終日です。今日の夕方にはプレゼンテーションとなりますので、みんな真剣に制作をしています。グループ内で上手く役割分担ができるかが鍵になってきます。







あっという間に、制作時間終了。お疲れさまでした。
続いて、プレゼンテーションを行っていきます。今回は、コメンテーターとして、株式会社プロトコーポレーションの富田さん、スタンドファーム株式会社の松本さんと多川さんにお越しいただき制作物に対して、講評をいただきました。



東山線チームから1チーム10分のプレゼンテーションを始めていきます。

【地下鉄東山線】スイッとひがしやま
【メンバー】福本光、藤岡美織（ECC）河地芳明、伊藤鮎美（トライデント）
市営地下鉄で最も乗り降りする人数が多い、東山線。見どころや観光スポットも多いのですが、その人気スポットをランキングにし、スムーズに案内をするサービスを制作しました。写真で目的地まで案内できるように工夫されています。






【地下鉄鶴舞線】和萌えの街大須
【メンバー】覚前雄大、三宅真央（ECC）、鈴木庸孝、栗山総一（トライデント）
大須は、一昔前には、秋葉原、日本橋と並んで全国の三大電気街のひとつでした。また、神社仏閣の多い地域でもあります。他の電気街と比較しながら、“和”テイストにこだわった作品になっています。もう少しカオス感が欲しいところです。






【地下鉄名城線】TRAIN COMMUNITY
【メンバー】山崎伊清（トライデント）、小川真季、阿部裕太（ECC)
名古屋の地下鉄唯一の環状線ということで、円に沿って動く電車のトップページが印象的なビジュアルになっています。名城線の魅力をInstagramAPIを使って伝えようというアプリになります。タグをつけて検索するのがちょっと面倒そうです。コメンテーターからは、位置情報などで取得できると便利とアドバイスを受けました。





最後は、

【地下鉄桜通線】ときめきSubway
【メンバー】伊吹賢也、池田大地（トライデント）、川端連、斉藤真亜子（ECC）
名古屋市営地下鉄の中でも、比較的新しい桜通線。魅力がまだまだ伝わっていないのではないか。実際に使ってもらうためには、桜通線を舞台にした「恋愛ゲーム」を企画しました。実際の場所で起こるさまざまな恋愛イベントで各駅を印象づけます。実際の場所に行くとAR的なものや位置情報で、イベントを発生させてはどうかなど、まだまだ発展させることができそうです。





コメンテーターの方々に、企画、UX、UI、技術的、マーケティングなど様々な面からコメントをいただきました。ありがとうございました。


最後は全員揃って「ハイチーズ！」



両校の学生の皆さん、お疲れさまでした。最後の感想の中にもありましたが、短い制作時間、尚且つ初めて会った人とのコラボレーションで、どのように円滑に制作を進めるのか。自分ができること、できないことの見極めなど様々なことを学べた二日間だったと思います。今回、自分で気付いた事を今後に活かしていって欲しいと思います。
二日間、お疲れさまでした！

追記：ECCコンピュータ専門学校のWebサイトでも今回の合宿の様子が紹介されています。

2014.08.23 [土] スパルタキャンプ【PHP編】2014名古屋開催されました。

実は、ECCコンピュータ専門学校との合同制作合宿の1日前から「スパルタキャンプ【PHP編】2014名古屋」がトライデントコンピュータ専門学校で始まっていました。スパルタキャンプとは一昨年、業界研究授業にもお越し頂いた家入一真さん肝いりの初心者向けプログラミング講座です。今回は参加希望多数のため抽選となりました。また会場は混乱を避けるため、参加者限定公開でキャンプ終了まで明かされないということでしたので、終了後の記事掲載になりました。



詳しくは、家入一真が仕掛けた“スパルタキャンプ・ＰＨＰ編”｜【Tech総研】で紹介されています。



皆さんと一緒に私もPHPを学びたかったのですが、残念ながら出たり入ったりで、ハンズオンには参加できなかったのですが、合間をみて覗かせて頂きました。この方が、講師の柏木さんです。参加者の方々もそうなのですが、皆さんとても若いです。
また、個人的に声や口調が、サイバーエージェントの佐藤くんにそっくりで、落ち着いた語り口や、解りやすく頭にすーっと入ってくる感じは、説得力があるなーと思っていました。

初心者向け、若い方対象ということで、それでも参加者は、全国各地から来られていて、留学経験者、フリーター、大学生、起業を目指している方、作りたいWebサービスがある方、Webデザイナーなど幅広い経験の方々ばかりでした。驚くのはそのモチベーションの高さです。「あぁ、これが本気で知識・技術を学ぼうとする姿勢」なんだと、とても感服していました。学生にもぜひ体感して欲しかったです。
また、最初の自己紹介でヒッチハイクで来ましたという方が、複数おられてびっくり。もしかして今の若い人には、交通手段のひとつとして定着しているのでしょうか。

さて、スパルタキャンプの冠どおりの非常にタイトなスケジュールです。
1日目 9：00〜19：00（昼休み1.5時間）
2日目 9：00〜19：00（昼休み1.5時間）
3日目 9：00〜19：00（昼休み1.5時間）

最初は「エディター」のダウンロードからということで、本当に初歩の初歩から始まります。ここから始めて3日間でどこまで吸収することができるのかが楽しみです。



XAMPPをダウンロードし、ApacheとMySQLを起動しlocalhostにファイルを置いていきます。どんどん進んでいくのですが、つまずきながらも、真剣にPCに向き合っています。
初日は演算子や、for文、if文などのプログラムの基礎、2日目にはクラスの継承など、そして最終日には、お問い合わせフォームまで作っちゃいました。
この人たち講座終了後、毎晩名古屋リバ邸で懇親会してるのに、恐るべし。



最終日講座終盤まで、熱くソースの解説をする柏木先生、凄すぎです。
主に懇親会の様子などは、Twitteのハッシュタグ#青空学区で紹介されていますので、興味のある方は、ぜひご覧ください。楽しそうですよ。

主催したお二人もお疲れさまでした！とても良い刺激になりました。無料でプログラムの講座を提供する事で、この講座から次々と講師を輩出していくも目的の一つという事で、学校に通わない勉強の方法としても面白い試みだと思います。


追記：今回、柏木さんのアシスタントとして来ていただいた村井さんがやってるサービス「プロゲート」。PHPの前にやはりHTMLの学習は必要だと思います。そんな時、効率よく独学ができて効果的だと思います。近々PHP版も公開されるそうです。

2014.08.21 [木] トライデント・ECCコンピュータ専門学校Web制作合宿2014 一日目

8月21日（木）から一泊二日でトライデントコンピュータ専門学校とECCコンピュータ専門学校の合同制作合宿が始まりました。

まず最初は「初めまして」ということで自己紹介です。緊張しています。



終了後、さっそくグループに分かれてフィールドワークに出かけます。
今年の課題は「名古屋市営地下鉄路線」をテーマにそれぞれの路線をテーマに制作していきます。大きなテーマですので、どこを抽出するかも各グループで話し合って決めていきます。











それぞれ各路線を（楽しんで？）調査・資料収集していきます。制作時間も少ないので学校に戻って、更に話し合って具体的な形に落とし込んでいきます。




いよいよ、明日は朝から制作してプレゼンテーションです。頑張ってください！

2014.08.20 [水] 今年は、名古屋でやります。

昨年3月に、大阪のECCコンピュータ専門学校で行った合同Web制作合宿を、今年は名古屋（トライデントコンピュータ専門学校）で行います。





前回同様に各学校混合でグループを組み、2日間でWebアプリ（サービス）を制作します。作業の様子や制作物などは、また随時この「ウェブDeBlog」で紹介します。お楽しみに。

2013年
→トライデント・ECCコンピュータ専門学校Web制作合同合宿1日目
→トライデント・ECCコンピュータ専門学校Web制作合同合宿2日目
→トライデント・ECCコンピュータ専門学校Web制作合同合宿おまけ

2014.08.19 [火] 和歌山中華そば

せっかく、和歌山県まで来たので、一世を風靡した（※過去形ですみません）「和歌山ラーメン」を食してきました。

和歌山ラーメン（わかやまラーメン）は、主に和歌山県北部で、専門店や大衆食堂で出されるご当地ラーメンである。
店では「中華そば」、略して「中華」と呼ぶのが一般的だが、一般的にはラーメンでも通じる。店先の提灯には大抵「中華そば」の文字が見られる。味は一般に豚骨醤油味と呼ばれるが、大きく分けて2つの系統がある。また、他にも食べ方、店での応対など他の地方には見られない風習が多く、一つの地域文化を形成している。Wikipedia

滞在時間の許す限りで、2軒食べてきました。

アロチ本家 丸高

有名店ということもあり、醤油豚骨のスープとストレート麺がとても美味しいラーメンです。具もとろとろのチャーシューとメンマ、きざみネギと蒲鉾は、和歌山ラーメンの特徴ですね。
中華そば 600円。

丸田屋 岩出本店

帰路、和歌山市より国道24号線を東へ、岩出市にある「丸田屋 岩出本店」に行ってきました。ここは、和歌山を代表する『井出商店』で修行された店主がオープンされたお店ということで、こちらも人気店です。店内もお客さんでいっぱいです。
ラーメンは、和歌山中華そばの特徴である、醤油豚骨、ストレート麺、メンマ、チャーシュー、蒲鉾。スープは丸高中華そばに比べると豚骨の香りが強い印象を受けました。
中華そば 700円。

後に調べたところ、最初のアロチ本家 丸高中華そばは「醤油ベースの醤油豚骨（車庫前系）」、次の丸田屋 岩出本店中華そばは、井出商店からの系列「豚骨ベースの醤油豚骨」だったようで、偶然にも2つの系統を食べ比べたことになったのですが、最初から分かっていたら違いが明確にわかったのかもしれません。両方ともとても美味しかったです。

さて、その超有名な井出商店は、開店時間が合わず、偶然入ったコンビニで袋麺をみつけたので、これで我慢。


和歌山ラーメンは、名古屋の「まっち棒」で食べたぐらいでしたので、本場の和歌山中華そばを堪能できて良かったです。シンプルなスープと麺で、正直こんなに美味しいとは思いませんでした。ごちそうさまでした。

2014.08.19 [火] 熊野三山「那智の大滝」

和歌山県・新宮市に一泊して、熊野三山のひとつ「熊野速玉大社」に行きました。



写真を撮ってくるのを忘れたのですが、この神社には「熊野御幸」の碑があり、今から1000年ほど前に時の権力者である上皇や法皇が何回も詣でられたと記されています。ちなみに、上皇・法皇・女院の外出を「御幸」といい天皇の外出は「行幸」というそうです。熊野に天皇の「行幸」は一度もなかったそうで、当時は院政という体制をとり、上皇という権力と財力と自由をもった身でなければできなかったことなのでしょう。

熊野御幸回数ベスト３

1. 後白河上皇（33 or 34）
2. 後鳥羽上皇（28）
3. 鳥羽上皇（21）

いずれも日本史の教科書で出てくる名前ですが、武家と公家の権力争いの時代（鎌倉時代前）に、度々この地を訪れており、平清盛なども同行したということです。館内の宝物展には、江戸徳川第8代将軍・徳川吉宗（御三家・第5代紀州藩主）ゆかりの刀なども展示されており、古くから由緒ある地域だということが伺えます。以前「平泉」に行った時も思ったのですが「遠い昔、神秘的とはいえ、“なぜこんな山奥に”だったのでしょう」などと歴史に思いを馳せながら、次の目的地「那智の大滝」に向かいます。
速玉大社からは、車で1時間程度です。

今回は、下の大門坂から登って、熊野那智大社を抜け、那智の滝までの道程をたどる予定です。



観光客の皆さんは、意外と軽装で向かわれていますが、結構きついですよ。足場は相変わらずの石道で、苔で覆われて滑りやすくなっています。



なんとか、那智大社に到着しました。



目指すは遠くに見える那智の滝。



まだ、ここから登ったり下ったりするのですが、歩きたくないという人は、車で登って来れますので、車かバスを利用したら良いでしょう。
いよいよ、一段の滝としては落差日本1位を誇り、華厳滝、袋田の滝と共に日本三名瀑に数えられている「那智の大滝」に到着です。



雨の影響か、水量も多く、豪快な瀑音と水しぶき、美しい直線の水流は、なるほど一見の価値がありです。
マイナスイオンをたっぷり浴びて満足したところで、今来た道を戻ります。大門坂から往復で3時間弱ぐらいでしょうか。
この近辺は、温泉地でも有名であちらこちらに天然温泉の浴場があります。ゆっくり汗を流して帰ります。

ということで、あっという間の2日間でしたが、天候もそれほど崩れず、当初の目的地をまわることができました。今まであまり紀伊半島には縁がなかったのですが、海沿いということもあり、魚介類も美味しい地域ですので、機会があれば、また訪れたいと思います。那智大社から本宮までの中辺路にも魅かれますし。
ただ次は、10年ぶりに登山道開通した大杉谷渓谷に行ってみようと思います。

学生のブログもそうなんですが、全ての記事が勉強や学校生活に関わるものでなくてもいいんじゃないでしょうか、と思いつつ、時々Webデザイン学科とまったく関係ない記事なんかを書いています。

2014.08.18 [月] 熊野古道伊勢路「八鬼山峠越え」

トライデントも休館日ということでお盆休みでしたが、いかがお過ごしでしたでしょうか。天候の思わしくない日が続いていましたが、連休ということで、なんとか登録10周年となる世界遺産・熊野古道の「八鬼山峠」にいってきました。

昨年「馬越峠」に行ってから、次は伊勢路一の難所「八鬼山峠」を越えたいと思っていました。世界遺産・熊野古道という名前が通っているのですが、世界遺産になっているのは「紀伊山地の霊場と参詣道」で、その参詣道として熊野古道が登録されています。熊野古道も三重県・熊野市から三重県だけだと思っている人もいるかもしれませんが、三重県、和歌山県、奈良県と広範囲に拡がります。

• 伊勢路（伊勢神宮-熊野三山、約160km）
• 大辺路（田辺-串本-熊野三山、約120km）
• 中辺路（田辺-熊野三山）
• 小辺路（高野山-熊野三山、約70km）
• 紀伊路（渡辺津-田辺）

Wikipediaより

今年は、世界遺産登録10周年ということで、特別サイトも開設されていますが、最近世界遺産登録された富岡製糸場に話題をもっていかれている感じですね。

さて、JR大曽根浦駅から標識を目印にとことこ歩いていくのですが、なかなか登山道登り口が現れません。「あれ？過ぎちゃったかな」と思ったところでやっと到着。この八鬼山峠が整備されない理由は色々あるんですが、それでも登り口までの距離を表記してくれればいいのになんて思います。

登山口すぐは、普通の山道ですが、直に石を敷き詰めた石道になっていきます。こうして写真で一見すると歩きやすそうですが、先日の台風11号やこの日の朝まで降っていた雨の影響で、長い年月をかけて根を生やした苔がよく滑ります。

「石の上を歩く西国一の難所」と恐れられた八鬼山の中でも、過酷な「七曲がり」を越えると頂上までもう少しです。ここまで登り始めて1時間程でしょうか。そんな八鬼山も標高624mなので2000m級の山を登るのに比べれば、それほど時間はかかりません。

2時間程度で頂上に到着しました。晴れていれば、眼下には熊野灘が広がり、芝生の上で寝転がり、その雄大な海を眺めながらご飯など食べるのですが、今日は霧が濃く何も見えません。雨も降ってきそうですので、軽い休憩と栄養補給をすませて、即下山です。こんな日は、登山客も少なく、見かけたのはやたらと速く歩く小学生を連れた親子が1組でした。

八鬼山峠終盤になると、噂に聞いていたペンキで書かれた「熊野古道反対」の文字が続く道になります。

調べてみると熊野古道の文化遺産登録時の問題や、生活に関わることも色々とあるようですが、見た目ちょっと興ざめしてしまいます。これが、八鬼山峠周辺の整備がされない（観光客が集まらない）原因の一つでもあるようです。

無事下山後、時間があったので本州最南端の串本・潮岬に行ってきました。

さて、伊勢路から大辺路に入り、翌日、熊野三山に寄って、もう一つの目的地「那智の大滝」に向かいます。

2014.08.09 [土] table要素のおさらい

※thead要素、tbody要素、tfoot要素の部分を追記、修正しました。（2014年8月10日）

そういえば、2007年ごろまでは、トライデントコンピュータ専門学校でもテーブルレイアウトでWebデザインを教えていましたが、最近はCSSレイアウトになり表制作以外ではtable要素も使う機会がなくなりました。
いまでは表制作は、もっぱらCMS備え付けのビジュアルエディタやオーサリングツールを使ってしまって、逆に苦手意識すらあります。さらにHTML5では廃止される予定の属性もあるということで、サクッと調べてみました。
ちなみに今日は台風11号が来ています。

W3Cの仕様書には、

table要素はテーブル形式で、複数の寸法を持つデータを表す。
テーブルは、行、列、およびその子孫によって与えられるセルを持つ。
行と列はグリッドを形成する。テーブルのセルは完全に重複することなく、グリッドをカバーしなければならない。

The table element takes part in the table model. Tables have rows, columns, and cells given by their descendants. The rows and columns form a grid; a table's cells must completely cover that grid without overlap.

と書いてあります。セルの集合体ということでしょうか。

早速、マークアップしていきましょう。 table要素の中に、テーブルの見出しとなる行を表す部分にtheadを入れます。さらにthead要素の中には行を表すためtr要素（Table Row）を入れ、その中にth要素（table herder cell）でヘッダー・セル（※は表の中でデータセルの見出しとなるセル）を入れます。 thead要素の次にテーブルのデータを表す部分にtbody要素を入れます。tbodyの中では、行にtr要素（Table Row）さらにその中のデータ・セルにtd要素（Table Data）を入れます。tr要素をtable要素の直下に入れることはHTML5ではいけないとされていますが、tr要素を直下にいれたとしてもtbody要素があるものとしてDOMが構成されます。また、表計算の合計などを入れたりする場合など、tfoot要素を追加することもできます。 tbody要素、thead要素、tfoot要素ともに必須ではありません。ただし気をつけるのは、tbody要素は、table要素の子要素として複数配置することができますが、thead要素とtfoot要素はそれぞれ１つだけ配置することしかできません。 さらに、HTML5では、tbody要素とtfoot要素の配置位置はどちらでも良いことになっています。 つまりtfoot要素をtbody要素の前に配置しても、ブラウザ上ではフッタ部分はテーブルの最後に表示されます。 table要素の中にcaption要素を入れ、そこにテーブルのタイトルや説明をいれることもできます。では、8/8現在のプロ野球セリーグの順位を入れてみましょう。

8/8現在のプロ野球セリーグ順位

順位	チーム名
1位	巨人
2位	阪神
3位	広島
4位	中日
5位	ＤｅＮＡ
6位	ヤクルト

わかやすく図で説明するとこんな感じです。 また、テーブルの構造や意味を説明するために、summary属性がいままで使われてきたのですが、HTML5からは、廃止されました。その他廃止された（もしくは廃止予定）の属性は以下の通りです。 summaryの代替案も複数ありますが、p要素もしくはcaption要素にclass属性でsummaryを設定する方法のようです。

table	align bgcolor border cellpadding cellspacing frame rules width
tbody	align char charoff valign
tfoot	align char charoff valign
td	axis abbr scope align bgcolor border cellpadding cellspacing char charoff height nowrap valign width
th	axis abbr align bgcolor border cellpadding cellspacing char charoff height nowrap valign width
thead	align char charoff valign
tr	align bgcolor border cellpadding cellspacing char charoff valign

つぎに複雑な表を作成するため縦をつなげる場合は、行「row」を複数利用するということでrowspan属性に数値を入れます。横をつなげる場合は、複数の列「col」を利用するということでcolspan属性で数値を入れます。

8/8現在のプロ野球セリーグ順位

リーグ	順位	チーム名（colspanに2）
セリーグ（rowspanに6）	1位	巨人	95試合
	2位	阪神	98試合
	3位	広島	97試合
	4位	中日	100試合
	5位	ＤｅＮＡ	93試合
	6位	ヤクルト	97試合

さらに、テーブル内の1つ以上の列をグループにすることができるcolgroup要素ついて。colgroup要素の中にはcol要素のみ入れることが可能で、span属性でも指定することができます。CSSで設定すると

colgroup[span="1"]{
border-left: 3px solid red; //span="1"の列の左に赤い線をいれる
}
col.team{
background-color: #ccccff;  // class="team"の列の背景色を#ccccff;
}
col.gamelength{
background-color: #ffcccc;　// class="team"の列の背景色を#ffcccc
}

8/8現在のプロ野球セリーグ順位

リーグ	順位	チーム名
セリーグ	1位	巨人	95試合
	2位	阪神	98試合
	3位	広島	97試合
	4位	中日	100試合
	5位	ＤｅＮＡ	93試合
	6位	ヤクルト	97試合

のようになります。 また、table要素のデフォルトCSSの設定（http://www.w3.org/TR/html-markup/table.html）は、

table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray; 
}

のため、borderで線を設定すると各セルの間にスペースができてしまいます。reset.cssやnormalize.cssで、

table{
    border-collapse: collapse; 
    border-spacing:0;
}

のように上書きして使用します。 ということで、table要素についてサクッと調べてみました。tableをレスポンシブ対応させるなんて記事（レスポンシブウェブデザイン案件でtableの見た目を大きく変える｜clear sky source）もありますので、まだまだ奥は深そうです。 今日は「名古屋マークアップ勉強会 8/9」に参加してブログを書いていました。他の参加者の方も自分たちでテーマを決めて作業をされていて、最後に成果を発表して意見交換ができて、とても勉強になりました。次回は9月の半ばに開催されるそうなので「ここのマークアップはどう書くのだろう？CSS3のアニメーションってどう？」なんて思っている人は参加してみるといいと思います。 では、台風11号はも迫ってきましたので、皆さんお気をつけください。

2014.08.08 [金] 夏季閉館日について

■トライデントコンピュータ専門学校の夏季閉館日について
8月10日（日）は、オープンキャンパスを開催しますが、8月11日（月）から17日（日）まで、校舎を閉館いたします。ご迷惑をおかけいたしますが、何卒よろしくお願いいたします。
8月18日（月）より、通常業務となります。電話、メールの返信など滞りますが、ご了承下さい。



ブログの更新はするかも。