「HTML5」カテゴリーアーカイブ

【自己紹介】G3A1の白石辰巳です

ーーーーーーー

し しろとくろが好き

ら ラーメンも好き

い いつも眠くて

し しょうがない

ーーーーーーーー

いつも睡魔に襲われている白石です。

普段はだらだらしてますが、やるときはやります。

あ、あと雨が降ってるか低気圧が近いと身体機能が50%低下の

デバフを受けてるのでそっとしておいてください(⌒∇⌒)

気軽に接してくれると嬉しいです。

よろしくお願いします。

2019年度 HTMLファイ部!サブテーマ一覧

1.Fujie Lab Webの構築(レベル:★★☆☆☆)
・卒業研究ふじえゼミの公式Webサイトを作成する
・これに加えて、ブログのカスタマイズやメンバ向けページの作成も行う

2.PHPを用いた動的なWebサイトの構築(レベル:★★★☆☆)
・PHPを用いて、データベースと連携したサイトを作成する
・参考:http://tanukikurage.fujielab.com/

3.フレームワークを用いたWebゲーム作成(レベル:★★★☆☆)
・enchant.js等のフレームワークを用いて、ブラウザ上で動作するゲームを作成する
・参考:http://bambi.fujielab.com/
・参考:http://marshmallow.fujielab.com/

4.WebAPIを利用したマッシュアップサービスの開発(レベル:★★★☆☆)
・Twitter API、Google API等を組み合わせた、新たなサービスを実現する

5.CSS3でアニメーション作成(レベル:★★★★☆)
・CSSを用いて、アニメーションコンテンツを作成する

6.HTML5 + JavaScriptでスマホアプリ作成(レベル:★★★★☆)
・Monaca等を用いて、iPhoneやAndroidで動作するアプリを作成する

7.地域社会に貢献するコンテンツの作成(レベル:★★★★☆)
・Webの技術を用いた、地域社会に貢献できるコンテンツを作成する
・区役所や警察署からの依頼を受けたり、売り込みをかけたりする
・参考:http://www.city.sapporo.jp/ncms/shiroishi/shiro-kids/enjoy/index.html
・参考:http://www.city.sapporo.jp/ncms/shiroishi/chonaikai/
・参考:http://maruyamap.com/

8.Webに関する最新技術の研究(レベル:★★★★★)
・Webに関する最新技術を研究し、技術を応用した作品をつくる
・WebGL、WebVR、Progressive Web Apps、WebRTC等
・参考:http://hats1999.fujielab.com/
・参考:http://jsdo.it/controller/
・参考:http://fujielab.com/saika/

9.その他、おもしろいもの(レベル:?????)
・おもしろければ、基本的に何でもOK!

10.【隠しテーマ】Spheroプログラミング(レベル:?????)
・参考:https://www.sphero.com/

HTMLファイ部!元部員 2019卒の人から後輩に向けて

こんにちは。2019にRを卒業した5千円札の人です。

ここに記事投稿するのも久しぶりです。卒検は怒涛の日々で、いろんな意味で辛かったなーと思い返せるものがあります。

後輩に向けて、私のいたチームの作品をさらに良くして頂きたい、そう思いここにメモを残しておきます。

後輩に何をしてほしいか?

私のチームが作った作品を改良、そして問題点がポロポロとあるので、それを解消してほしいです。

まず、どんな作品を作り上げたか?

私のチームは、Web最新技術の研究というテーマを選び、その中でWebVR技術に着目し、一つの作品を作ることにしました。

どんなものなのかは、見てもらうのが一番かとは思います。

http://hats1999.fujielab.com/(fujie lab blogの2018年度にもURLがある)

このURLを叩き、各校舎をクリックしてみてください。

すると、画像が表示され、なにやらグリグリ動かせるようになっています。そして、紫色の四角の中にカーソル(中心にある円)を数秒合わせると、画像が変わります。前の画像から後の画像に切替えることで、擬似的に移動した、という事を簡単にですが実現させました。

ちなみに、スマートフォンにも対応しています。スマホ版はジャイロセンサーが作動するようになっているので、スマホでURL叩いたほうが感動ものですよ。

なぜこのテーマを選んだ?なぜWebVRになった?

最新技術、面白そうじゃないですか?的なノリで選びました。VRにしたのは単純で、google street viewを模したものを、学校内バージョンとして作りたかったのです。

学校を卒業すると、中々自分の学び舎に戻ってくることはできません。ましてや、いつか今の校舎が無くなる時も来るかもしれません。なので、今の校舎を画像に収めて保存するということで話がまとまりました。ここ大事です。
単純にスマホで写真を撮って終わりだと何か味気ない、そんな時にWebVRの話を聞き、上記の作品を作ろうと思い付きました。

使用した技術、機材等

・360度カメラ(今回はRICOH THETA Sを使用)

・A-frame(JavaScriptフレームワーク)

・基本的なHTML,CSS

だけです。カメラで写真(実は動画も撮れます)を取り、A-frameでサイトを作る。この2ステップだけで作品はある程度まで見栄え良くなります。

参考にしたサイト

・KCS北九州専門学校学校 HP パノラマビューhttp://www2.kcsk.ac.jp/KCSK/panorama.html

・A-frame公式ドキュメント
https://aframe.io/

正直なことをいうと、最初は北九州専門学校のパノラマビューと同じものを作ろうとしていました。しかし、このサイト、ガッツリ作り込まれていて、私達の卒検では、再現するのに時間が圧倒的に足りないという結論に至りました。

さて、本題です。

作品の問題点

・全教室の写真が揃っていない。

時間の都合上、一部の教室のみでVR化を進めました。しかし、本館、2号館、3号館、4号館…と全てを網羅しないと、作品としては未完成のままになります。

・次の行き先への挙動が完成していない。

例えば本校舎入り口から駐車場に移動するところを考えます。google street viewであれば、次の行き先のところへ実際に動いているような挙動があります。ページ切り替えの時にもっと滑らかに動いてほしい感じですね。これは私には策が何も思いつきませんでした。是非やってください!

・ジャイロセンサーが効きすぎて酔う。

これはスマホで作品を動かした時の話です。スマホのセンサーと連動しているので、スマホを動かせば作品も動くようになっています。a-frameが勝手に処理してくれているので最初は大助かりだったのですが、少しの動きでもセンサーに反応するので、手が震えていたりすると作品が震えます。酔います。

ここで、北九州専門学校のサイトをスマホで見てください。ジャイロ機能をオンにし、動かすと、細かい震えなどの動きはありません。

これに気づくのは卒検のかなり後だったので実装に至らず。これもやると細かなところまで作り込む事ができるはずです。

以上、私が認識している問題点です。もしかすると、A−frame自体が対応していなく、ドキュメントを超えて改良する事にもなり得るかもしれないです。そこまでいくならA-frameのOSSに参加してもっと良くしてほしい

長文になり失礼しました。難しい題材ではありますが、やる価値はあると思うものです。私は入社する会社にこの卒検で作った作品を見せたら、とても評価され、次年度以降の360度カメラ販促の営業に僕も行くことになりました。まだ入社してないのに…まだまだ企業側も360度カメラの上手な活用方法は見いだせていない…ような気がします。

ちなみに、今回作ったもの系のソースコード等、学校のフォルダに残しています。藤江先生に場所を聞くとわかるはずです。

では、これでメモを残しておきます。後で見返してこんな事もできたな等あったらここにメモを上げていきますので、そのときはよろしくお願いします。

藤江先生、今更なんですが、最後の言葉でみんなにコメントをされていたはずです。が、一部の人にコメントがついてないので良ければコメントを…暇なときでもいいんで…

最後の言葉

北九州からこんにちは
チーム11の阿部です

モノを作るだけ作って、全体発表で雲隠れした僕です
しょうがないね

1.取り組んだ内容
簡単に言えば「橙武堂」という名前の
セレクトショップのサイト制作
ホームページだけでなく商品購入や会員登録を行えるショップページも作成しました

基本的にはHTMLで作成しましたが、商品等の管理を行うためのデータベース、そのデータベースを設置するためのサーバーも自分たちで設置しました
また、ショップページの大半はPHPで作成しています
授業で学んだ言語だけでなんとかなりましたが、習熟度やらできることやらに差があり難航したところも多かったです

多分他のチームメンバーも言ってると思いますが、サーバーを自分たちで作るのがかなりきつかったので、次回以降もしもサーバーが必要になったチームがあればサーバー構築ゼミに委託した方が楽ではあるかもしれません
何なら僕らの使えたりってしないんですかね、どうなんでしょう

 

2.よくできたところ
僕は圧倒的にPHPです
というかPHPしかほとんどやってないのでこれくらいしかないです

授業で利用したコードを魔改造して今回のサイトを作りました
ほぼそのまま使えるところもありましたが基本的には加筆したり、一から作る必要のあるページもあったのでかなり心と身体を持っていかれました

ただですね、やってるうちに上手くページ間が繋がるとすごい気持ちよくなってくるんですよ

 

3.うまくいかなかったところ
これは振り返れば色々あったなーって思います
2番で挙げたPHPも、実は見せかけられているだけで中身の機能が無かったりとかは結構ありました
技術不足もありますが、何より時間配分を間違えたなぁと後悔しています

元々もっと早くから研修に行くものだと思っていたので、基本的にはメンバーに任せようと思っていたのですが、
気付けば僕が出張っていたり、僕の中で考えが完結したりしてるところもあったので反省しています

あとは作業量の配分ですかね
習熟度の差とかで仕方なくはあったんですが暇な班員、めっちゃ大変な班員が出てしまったりしました
上手くサポートに回るよう指示できなかったのも両方に申し訳なかったです

プレゼンに関しては発表自体にはノータッチでしたが、最終的には良い評価を貰えていたので研修先で安心してました

 

4.卒業研究の感想
半年くらいの期間でしたが、色々忙しくてあっという間でした
もう終わりなのかと

楽しいこともありましたが、作業的には苦しかったです
ずっとやってると「何で俺はこんなものを作っているのだろう…」という考えに陥ったりしてキーボードをぶん投げたくなることが何度かありました
投げてはないですけど

ゼミの本格的な作業に入る前に行っていた授業で「SYUN・SEN」チームにいましたが、ゼミの活動が始まってからはこっちの作業にかかりっきりだったので申し訳なかったなーと思ってます

あとゼミ時間割やってて思いましたが、水曜午後2コマなのは僕的に最高でした
どうせ休みがあるなら水曜にしてくれってくらい水曜休みなの最高です
火曜木曜の4コマ地獄でしたけどね代わりに

藤江先生には色々とご迷惑をかけてしまったり、お世話になることが多々ありました
本当にありがとうございました

 

我ながらめっちゃ書きましたねブログ

 

5.書いた人がなんとなーく特定できる情報
実はアレ伊達メガネなんすよ

お疲れ様でした!!!!!

Last

0.チーム8メンバー

R4A1:樋口 幸亮
M2A1:澤口 拓朗
M2A1:関水 悠大
M2A1:館農 大輝

1.取り組んだ内容

私たちチーム8は、
Webに関する最新技術の研究を取り組みました。
途中キャンプしてました。
最終的に取り組んだものは、WebVRになりました。

WebVRとは、ブラウザ上を疑似的に円形の空間を作り、
サイトを360°見渡せるようにする技術のことです。

特に、携帯端末(スマートフォンなど)を使うと、
ジャイロ機能も使えてより、臨場感溢れる体験ができます。

2.よくできたところ

一番は、VRページを作れたこと。

最初は、↓のような感じを作ろうと頑張ってました。

まず、縦を再現して…

奥行を再現して…

結果、使いませんでした☆

一応、ゲーム専攻でしたので三次元は多少知識があったため、
完成できたのではないでしょうか。
まぁ、3Dゲーム作ってないけど

3.うまくいかなかったところ

2点ありまして、
まず、↓の画像の赤線内を再現できなかったこと

そして、携帯端末でVRモードにしたまま
ページ遷移をするとVRモードが解除されること
(↓VRモード)

1つ目の赤線内に関しては、技術をそもそも勘違いしてました。
VRは基本ハンドフリーでの操作を想定しているため、
注視点カーソルしかありませんし、
イベントハンドラーも基本的に注視点カーソルでの発火しか
ありませんでした。

1つ目の件で、ストリートビューとVRの違いを体感し、
VRの操作性に関しては幅の狭さを感じました。

2つ目のVRモードに関しては、ページを遷移ではなく、
オブジェクトをスクリプトで削除・追加をする場合だと、
VRモードは解除されない(1つのページで完結させる)のですが、
あまりにも汚いコードになるのと、
処理速度の関係上断念しました。

4.卒業研究の感想

思ったよりも簡単だったこと。
卒業研究開始から1週間程で最終成果物がほぼできてたので…。
苦労した点は、ドキュメントが英語だったのと、
参考サイトが皆無だったくらいで、
A-Frameには本当に助けられました。

後、チームメンバーにも助けられました。
関水が画像の加工をしてくれました。
澤口がサイトを作ってくれました。
樋口さんがまとめてくれたり、
プレゼンテーションをしてくれたり、
ポンデリング食べてくれました。

役割分担がしっかりできた点も良かったと思います。

余った時間は、Javaでサーバ作ってたり、
Progateしてたり、CodeSprintでSランク取ったり、
スキルアップしてました。

5.書いた人がなんとなーく特定できる情報

投稿者名を見てね♡

6.成果物

本体:HCS校案内/VR
おまけ:VR迷路(携帯端末推奨)

最後のお言葉👍

チーム❼ M2A1の本間です🎉

♦取り組んだ内容

主にサイトのhtmlやcss等の編集をしていました。
卒業研究の授業が始まる前から、他のプロジェクトメンバーがコードを少し書いてくれていたので、それを菅野さんのデザイン通りに直したり色々付け加えたりしました。

♦よくできたところ

授業で自分のサイトを作っていたころはレスポンシブ化を全くしていなかったので、自分に出来るか不安だったのですが、いい感じにレスポンシブ対応させられたので良かったです。
また、菅野さんが「ここをこういう風に直して」と言ってきた部分をすぐに修正出来たところもいい感じだったと思います。

♦うまくいかなかったところ

特に思い当たりませんが、しいていうならば先方が忙しくてメッセージの返事が来なかったため、全てを要望通りに出来なかった部分です。

♦卒業研究の感想

今まで4人でやっていたプロジェクトを2人でやることになるため、間に合うだろうか、いい作品が作れるだろうかと不安になりましたが、満足のいくサイトが作れたので良かったです。
全体発表の順位も4位と思っていたよりも高い順位だったので、見てくれた方々に作品の良さが伝わったのかな、と思っています。

 

卒業研究お疲れさまでした🎆
結構大変だったけど、楽しいことも沢山ありました!

チームたちかまの本間でした:-)

最後の言葉

M2A1の澤口です。

藤江ゼミの皆様お疲れさまでした!

1.取り組んだ内容

成果物であるウェブサイト(シングルぺージ)の制作を担当しました。

2.よくできたところ

自分たちが目指したサイトを作れたところです。

  • VRページを注目させたかった
  • スマホで見る人が操作しやすいサイトにしたい

という2点の理由からシンプルなサイトを作れたので良かったと思います。

3.うまくいかなかったところ

当時実装予定だったハンバーガーメニューが原因不明のバグで表示されなかったというところです。

せっかくスマホを見ることを重視していたのに、表示されなかった為、実装することができませんでした。

4.卒業研究の感想

最初は「最新技術」「VRサイト」と難しそうなイメージがありましたが、館農がVR(A-flame)の解析を1週間程で終わらせたことによって一気に楽になったと思います。ありがとう館農。  あと物の管理・取り扱いには注意しようね!!

5.書いた人がなんとなく特定できる情報

ポンデリングを食べた人

谷口 最後の言葉

谷口です。

【取り組んだ内容】

橙武堂のサイトを作成するにあたって、商品画像の加工、ショップページの土台となるphpの一部分の作成、cssの追加、powerpointよりスライド一部作成、プレゼン原稿一部作成、プレゼン発表など、全体的に補佐的役割を担当しました。

【よくできたところ】

サイトにあった商品画像に加工できたところと、phpの部分が思った通りに実現できた。

【うまくいかなっかったところ】

テーマが自分にはあまりあいませんでした。人に左右されず自分がやりたいテーマをやるのが一番いいなと思いました。

【卒業研究の感想】

めちゃくちゃ大変でした。当初の予定とは大きく後付でいろいろやらされたし、まずサーバー構築がHTMLゼミなのに一からやったりするのがつらかったです。幸いメンバーには恵まれていたのでこのメンバーで一つの事に一緒に取り組めたのは良い経験になりました。