2015

2015 – メディアデザイン実習J7742478_orig9398602_orig
http://www.designbypierre.com/concept-designs.html

07/24 第14回 Arduinoによるフィジカルコンピューティング

Table of contents

 

 

 

 

2015-07-15 17.55.57

07/17 第13回

前回は、サーバーサイドの概要、PHPの初歩、Cloud9の使用に加えて、WordPressのインストールが途中まで完了しました。

実践的なWordPressの話

選択式で各人分かれて授業、またはアンケートで授業内容を決定したい

A: jQueryによるWeb制作技術をもっと

B: jQueryによるゲーム制作(カードゲームをブラウザで再現)

C: WordPressのテーマカスタマイズ

D: Ruby/PHP/Pythonによるブログシステム制作(データベース入門として)

E: Arduino/IchigoJamによるフィジカルコンピューティング(Lチカ)

 

 
日本のハードウェアスタートアップ「no new folk studio」が展開する「Orphe」→参考

07/10 第12回 WordPress(とサーバーサイド)

余談1:やりたいことは何か?

 
余談2:スマホサイトの作り方の話(Retina対応・viewport)
「レスポンシブ」がベストだと言われるけれど…
(参考:スマホサイトに求められる3つのポイント

いずれの場合も、横幅640pxで制作。meta name=”viewport”に、width=640を設定。
このように、「横幅640pxのデザインで問題ない」という考え方もあります。
(参考:実機検証!スマホサイトで最適な画像サイズとは
 
講師のような35のおっさんはともかく、これからのウェブ制作を担うことになる学生諸氏は、レスポンシブなウェブサイトを作っていただくのが本筋だと思います。
ですが、例えば今、学生のうちになにか作りたい・作らなければならないという時に、このことで悩んだり多大な時間を費やしてしまうよりも、シンプルに「横幅640pxで作ってしまう」という判断も肝要です。
大切なことは「目的は何か?」です。手段にとらわれ過ぎたり、自分一人で何もかもやらなければならないと考える必要はありません。
 
余談3:「マテリアルデザイン」について

 

では、いよいよWordPressです!

その前に、前提となる知識を抑えておきます。

 

実践的なWordPressの話

つづく…

 

 

CIUqjJ8VEAAe_-Sおやつやで〜(ハムスターの銀次

 

07/03 第11回 Web API 後編

時事ネタ(先週の、ですが)

 

前回は、郵便番号APIを利用するなどを通して、APIというものがどういうものか、みなさんに考えていただきました。
本日は、WebAPI「後編」と題して、iTunes APIの続き、そしてHTML5 GeoLocation APIを実践的に使用します。

iTunes API

GeoLocation API
ここからは、ひとつのアプリを作成していきます。 (1)地図を表示 (2)現在地を取得して地図表示 (3)リアルタイム表示 (4)スマホからアクセス (5)仕上げ

まとめ

この次は「WordPress」やります!

 

 

スクリーンショット 2015-06-19 20.51.11

06/26 第10回 Web API 前編

それでは、ウェブプログラミングの醍醐味の一つ「Web API」について学習しましょう。

さらに学習したい人は…

iTunes API

GeoLocation API
ここからは、ひとつのアプリを作成していきます。 (1)地図を表示 (2)現在地を取得して地図表示 (3)リアルタイム表示 (4)スマホからアクセス (5)仕上げ

 

 

oremono3-600x334

06/19 第9回 WebAPI

この1週間、講師の入江は、こんなWebサービスを作っていました。あとデートしたり
このツールは、今日説明する「WebAPI」という技術を利用して、jQueryでコーディングしました。

時事ネタ

では、先週の続きから始めます。
TVアニメ「ルパン三世」のタイトルコールです。

 

Javascriptの基本について、改めて理解しなおしましょう。

さらに学習したい人は…

 

それでは、ウェブプログラミングの醍醐味の一つ「Web API」について学習しましょう。

つづく…

 

 

b2a533ed-s

06/12 第8回 UI実装のまとめ

Javascriptの基本について、改めて理解しなおしましょう。

さらに学習したい人は…

 

では、さらに実践的なUIを実装したり、高度な処理を考えてみたりしましょう。

次に、処理のタイミングとフローについて考えます。
モチーフとして、有名なTVアニメ「ルパン三世」のオープニングタイトルを、モーショングラフィックとしてJS/jQueryで再現します。
 

 

 

06/05 第7回 UI実装とアルゴリズム(ロジック)

時事ネタ

 

今日のテーマは、前回から引き続き「自分で考えてコードを書けるようになる」ことです。
これは還元すれば「アルゴリズム」「ロジック」を理解し、設計するということです。

コーディングに入る前に、まず
用語・概念について紹介しておきます。

もっと詳しく

 

それではさらに、ゼロからjQueryでの実装にトライしていきましょう。

 

 

05/29 第6回 UI実装のつづき

前回までは、みなさんの様子を見ながら、ゆっくりとしたスピードで授業を進めてきました。基本的な感覚はつかめてきたかと思いますので、これからは少しスピードアップしていきたいと思います。学生さんそれぞれのフォローに重点を置きつつ進めていきたいと思いますので、心配な方はそれだけ多く質問をしたり、フォローを求めてもらえればと思います。

さて前回は、下記の1〜2まで完了しました。
3は、2回目の授業でさらっと見たアレですが、コーディングの途中で時間がきました。

  • http://tokyozokei.sakura.ne.jp/zokei.koekatamarin.com/archives/579
    1:ボタンがクリックされたらダイアログ表示
    2:ボタンがクリックされたらオブジェクトが右に移動する
    3:ボタンがクリックされたら背景が変わる
    4:「翠星のガルガンティア」を再現する

できている人もできていない人も居るかと思いますが、3のコードをみんなで確認して、さっさと次に進みましょう。

4のような商用サイト同等の実装ができるようになったことを、みなさんにとってひとつの到達点と感じてもらえればと思います。
これが書けるということは充分に素晴らしいことですので、胸を張って下さい!

 

 

05/22 第5回 基本〜ステップアップ

前回まで

前回の授業では「JavaScript」と「jQuery」それぞれについてひと通りおさらいしました。
改めて時間をかけて取り組んでいただいた分、昨年度までよりも皆さんの理解が深まっていれば良いなと思います。

また、ブラウザの「JavaScriptコンソール」を用いたデバッグを行いながら、フォームアプリや「かんたん電卓」を写経して動かしてみました。

昨年度までの授業構成では、このあとWebAPIに進んでいました。
が、今年度からは、まず商用サイトのUI実装を目指したいと思います。

 

実際にプログラミングする流れ
今回からは、脱「写経」ということで、自分で考えながら、自分でコーディングしてみましょう。
制作するものも、ぐっと実用的なものになっていきます。
ポイントは、animate() addClass() attr() の3つのメソッド。

  • http://tokyozokei.sakura.ne.jp/zokei.koekatamarin.com/archives/579
    1:ボタンがクリックされたらダイアログ表示
    2:ボタンがクリックされたらオブジェクトが右に移動する
    3:ボタンがクリックされたら背景が変わる
    4:「翠星のガルガンティア」を再現する

 

 

05/15 第4回 基本〜ステップアップ

前回は講師の体調不良などが原因で、スムーズに授業が進まず大変申し訳ありませんでした。深く深く反省しております m(_ _)m
今回の授業では、基本からきっちりステップアップしていく流れを実感していただきます。
※もしかしたらテンポが早く感じるかもしれませんが、実際には、遡って考えながら進むようにゆったりとしたテンポで授業内容を設計していますので安心して下さい。

 

それではまず、簡単に前回のおさらいです。
JavaScriptの文字列・配列・オブジェクトについて、学習しましたよね?

このなかで、「オブジェクト」というのが少しわかりにくいと思います。
オブジェクトを理解するためにも、前回の授業の終盤では、みなさんにサンプルコードの「写経」をしていただきました。
※「写経 syakyo」・・・すでに存在するコードをそのまま書き写すこと。プログラマーの間でしばしば用いられるスラングのようなもの。

この「写経」の目的は、いくつかあります。
まずはJavaScriptのプログラミング(コーディング)に、形から入って、慣れてもらうこと。
そして、バグ(書き間違い・考え違い)とデバッグ(修正)を経験してもらうこと。
まだコードの意味はわからなくても構いません。
 
ポイントは「JavaScriptコンソール」(Chrome)※の使用です。
Chrome Windows:[ツール] – [JavaScript コンソール] を選択する (参考サイト
Chrome MacOSX:[その他のツール] – [JavaScript コンソール] を選択する
 もしくは、共通:ページのどこかで[右クリック] – [要素を検証] – [Console]
 
※この「コンソール」は、どのモダンブラウザにも同じようなものが用意されています。
Safariの場合 ・IEの場合 ・Firefoxの場合
もともともは2009年ごろに誕生したFirefoxの「FireBug」というプラグインだったのですが、あまりにも便利なため、あっという間に全ブラウザで標準搭載されるようになりました。

 

さて、みなさんのなかには、「JavaScriptとjQueryってどう違うの?」といった疑問がいまいち払拭できていない方もおられるかもしれません。
ここまででJavaScriptの基本には触れましたが、さきほどのサンプルはjQueryで書かれていました。昨年度の授業でjQueryについても学習されているはずですが、簡単におさらいしましょう。

 

写経 その2
ポイントは「クリックしたら…」と「val()」「html()」

 

 

05/08 第3回 JavaScriptの基本

これから、JavaScriptを使って、こんなものを作っていきます。
どうやって作っていくか?その前に、どう考えるか?
まずはデモを見ながら、一度考えてみましょう。

いきなり、上記デモのようなものを自分でゼロから作るのは、どうも少し難しいみたいです。
制作にあたって、まずはJavaScriptの基礎について学習しましょう。

基礎を踏まえた上で、実際のコードを「写経」してみましょう。
サンプルコードを、自分でそのまま入力して、同じように動かせればよいだけです。
とはいってもプログラミングにつきものなのが「バグ」です。
実際のコーディングを体験する中で、書き間違いとデバッグ(修正)の感覚を味わってみましょう。

04/24 第2回 ヒアリングなど

04/09 第1回 ガイダンス


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です