序盤はゆるゆると関係ない話をしますので、
ノートPCのない人は、この間に借りてきてください。

今週の映像

今週の映像は「佐藤雅彦とノーマン・マクラレン」です。
佐藤雅彦 – Wikipedia
ノーマン・マクラレン – Wikippedia

佐藤雅彦の作品
・ピタゴラスイッチ(アルゴリズム体操、ピタゴラ装置など)
・湖池屋 ポリンキー
・湖池屋 スコーン
・湖池屋 ドンタコス
・サントリー モルツ
・NEC バザールでござーる

ノーマン・マクラレンの作品
・「canon」 ノーマン・マクラレン 1964年(9分)

 

時事ネタ

Wizard Bible
– 4/22に閉鎖すると告知(4/16)
– Chromeの有害サイト指定

 

本日の内容

さてはじめます。

先週のおさらいです。

コーディング環境

ではここで、テキストエディタをインストールしましょう!
– Atom ←無難
– Visual Studio Code ←最近人気らしい
– Brackets ←Adobe

 

Boilerplateについて

とりあえず、今の時点ではBoilerplateはまだいいです。
使うタイミングになったら言います。

 

昨年度の授業でjQueryについても学習されているはずですが、簡単におさらいしましょう。

ここまでは問題ありませんか?
もし分かりにくいようであれば、一歩手前の話に戻ってみましょう。
JavaScriptの文法の話です。

 

では、テキストエディタ上で実際に自分で打っていってみましょう!

 

できるかな??

足し算のみが出来る「かんたん電卓」のようなものをつくりましょう。

動作サンプル

まずどのような順番で取り掛かっていけばよいでしょうか?

(今回は設計書や仕様書、デザインラフなどは脳内で処理してしまうこととします)

1) UIモックアップ
まず、簡単な見た目を作ってしまいます。
具体的には、HTMLタグを書いていきます。
CSSを書くとしても、最低限に留めます。

 

2) プログラム
次に、画面上の要素を、適切に動作させていきます。
具体的には、JavaScriptコードを書いていきます。
HTMLコードから、ユーザーの入力した値やイベントを取ってきて、プログラムで解散した結果を返す(出力する)ための、jQueryコードを書きます。

 

3) 仕上げ(デザインの適用)
動作するモックアップが完成したら、最後に見た目を整えます。
具体的には、CSSを書いていきます。

 

4) テスト
見た目まで本当に完成したら、テストを行います。
テストは大きく、動作テスト(正しく動くか)と、ユーザビリティのテスト(使いやすく出来ているか)に分かれます。

 

ゲーム制作の場合は、テストを行ったあと、完成したものをまたゼロから作り直すことはよくあります。実際にプレイしてみて「面白くない」「気持ち悪い」といったことがはじめてわかるものであり、正解がない世界だからです。

ウェブの場合は、仕様書や設計書やデザインカンプの段階でユーザビリティが考慮されることが多いですし、またウェブというものはゲームに比べると正解らしきものがだいたい存在し、そもそもそんなに可能な表現の幅が広くないので、作り直すとしてもそんなに大きな範囲を直したりはしません。

 

では、少しお時間を設けますので、各自考えながら「かんたん電卓」のコーディングに取り掛かってみてください。
まだできなくても全然問題ありません。
まず「自分で考える」クセをつけてもらうために、トライしてみて欲しいというのがこのセクションのねらいです。
あとできちんと一緒に適切なコードを説明していきます。

写経

「写経 syakyo」・・・すでに存在するコードをそのまま書き写すこと。プログラマーの間でしばしば用いられるスラングのようなもの。

※このプラグラムのポイントは、「クリックしたら…」と「val()」「html()」です。

 

デバッグ

完成までに、うまく動かない場合があったでしょうか。

そのようなプログラムの誤動作・コーディングの誤りのことを「バグ」と呼びます。
虫のことです。

バグを取りのぞきプログラムを改善する作業のことを「デバッグ」といいます。

テキストエディターなどの制作環境には、デバッグを助ける「デバッガー」などのツールがあったりします。(デバッグ作業を行う人のこともデバッガーと呼ばれます)

Webのフロントエンド制作においては、「JavaScriptコンソール」(Chrome)※が強力で、よく使用されます。
ためしてみましょう。

Chrome Windows:[ツール] – [JavaScript コンソール] を選択する (参考サイト
Chrome MacOSX:[その他のツール] – [JavaScript コンソール] を選択する
 もしくは、共通:ページのどこかで[右クリック] – [要素を検証] – [Console]
 
※この「コンソール」は、どのモダンブラウザにも同じようなものが用意されています。
Safariの場合 ・IEの場合 ・Firefoxの場合
もともともは2009年ごろに誕生したFirefoxの「FireBug」というプラグインだったのですが、あまりにも便利なため、あっという間に全ブラウザで標準搭載されるようになりました。

 

打ち間違いを減らす

写経をしてみて、単純な打ち間違いで時間をとられた諸君もおられたのではないでしょうか。
箇所によってはconsoleにエラーメッセージも吐き出されず、非常にデバッグが困難になることがあります。
打った文字・打った行が正しいのか、確認しながらしっかりコーディングしていきましょう。

さらに補助として、エディタの設定を見直したいとおもいます。

  1. プログラミング用フォントの使用
  2. 文字を大きくする
  3. エディタの背景は黒く(暗く)する

1. 可読性に優れ、見間違いを起こしづらい、いわゆる「プログラミング用フォント」というのがいくつか存在します。

MacではOpenType、WindowsではTrueTypeをダウンロードします。
こいつをインストールしたら、Atomでは、設定画面から
RictyDiminished-Regular」を指定します。
※環境によっては、「RictyDiminished-Regular.ttf」とすべきかもしれません。

このフォントは、例えば英語の小文字のエル「l」や、大文字のアイ「I」、数字の「1」といった見間違いやすい文字が見分けやすくデザインされています。
また、全角スペースが□として表示されているので、全角スペースまじりのエラーを起こさずに済みます。

2. さらに、フォントサイズを思い切って「21」とか「18」ぐらいにしましょう。

3. テーマを「Atom Dark」か「One Dark」にしましょう。

 

さまざまなUIとアルゴリズム

では、このセクションからは徐々に、自分で考えながらコーディングしていけるようになっていただきたいと思います。

実際にプログラミングする感覚をつかもう
ここで取り組む内容は以下の4つです。

1:ボタンがクリックされたらダイアログ表示
2:ボタンがクリックされたらオブジェクトが右に移動する
3:ボタンがクリックされたら背景が変わる
4:「翠星のガルガンティア」を再現する

いかがだったでしょうか。

ポイントは、animate() addClass() attr() の3つのメソッド。
animate()の「イージング」は、こちらのプラグインをHTMLで読み込むことで多彩な表現が可能になります。

 

 

Web制作に関わる技術の概要

 

ハック/デザイナ/PG/html/js/文法
※古い資料なので適宜読み飛ばします

 

クライアントサイド vs サーバーサイド

 

人間のWeb利用 vs プログラムのweb利用(Web API)

 

コーディング環境

 

エディタについて
エディタは最近では、Atom、Bracket、SublimeTextなどがよく使われます。
Mac標準の「テキストエディット」や、Windows標準の「メモ帳」は使用すると痛い目にあいます。
またこの授業ではDreamWeaverはサポートしません。
DreamWeaverは本当の初心者にはいいのかもしれませんが、ソフトを使うことの意味が大きすぎて、ソフトに使われるような融通の効かない制作スタイルになってしまいます。誰でも使えるように作られた高額なソフトの使い方を勉強することは、スキルとは言えません。

 

Boilerplateについて

 

ブラウザについて
ウェブには標準の技術仕様というのがいろいろあります。RFCとかW3Cとか。
ブラウザは、仕様に合わせながら、それぞれ異なる企業が実装したソフトに過ぎないので大小さまざまな違いがあります。
CSSやJavaScriptのコードの解釈そのものが違ったりもします。つまり、このブラウザでは動くのに、こっちでは動かない!ということがあります。かつてほどではありませんが、ブラウザの互換性の問題を甘く見てはいけません。
「Google Chrome」は、もっとも標準的で、処理速度も速く、最新の仕様に対するアップデートも早いブラウザです。
まずは、Chromeを標準のブラウザとみなしてChromeで確認しながら制作し、そのあとでSafariやFirefoxで動作確認して修正する、という手順が最も効率的です。

 

さて、みなさんそれぞれウェブ制作のスキルにばらつきがあると思います。
まずは、HTML/CSS/Javascriptによる比較的簡単なサンプルを確認しましょう。
それぞれ、自分一人で作ることが出来るかどうか、考えてみてください。

  1. ボタンがクリックされたらオブジェクトが右に移動する
  2. ボタンがクリックされたら背景が変わる
  3. ページ切り替えの際にカーテンのようなアニメーション
  4. JSとHTML5による ルパン三世タイトルコール
  5. iTunesからジャケット画像を取得して表示

みなさんの多くにとって、いきなり上記デモのようなものを自分でゼロから作るのは、少し難しいかもしれません。
制作にあたって、まずはJavaScriptの基礎について抑えておく必要があります。

このなかで、「オブジェクト」というのが少しわかりにくかったのではと思います。
オブジェクトを理解するためにも、コードの「写経」をしてみましょう。

HML/CSS/jQueryのおさらい

「写経 syakyo」・・・すでに存在するコードをそのまま書き写すこと。プログラマーの間でしばしば用いられるスラングのようなもの。

おさらいも兼ねて、以下のサンプルコードを、自力で打っていってみてください。

コピペしても何の意味ないですからねー。
プログラマーやコーダーは、一時間あたり何行書けるか(生産性)を求められる、アスリートのような職業でもあります。
早く書ければ、それだけ多く間違ってもいい時間の余裕ができます。
早く書ければ、それだけ面白いものを次々作っていけます。

 

この「写経」の目的は、いくつかあります。
まずはJavaScriptのプログラミング(コーディング)に、形から入って、慣れてもらうこと。
そして、バグ(書き間違い・考え違い)とデバッグ(修正)を経験してもらうこと。
まだコードの意味はわからなくても構いません。

 

もうひとつのポイントは「JavaScriptコンソール」(Chrome)※の使用です。
Chrome Windows:[ツール] – [JavaScript コンソール] を選択する (参考サイト
Chrome MacOSX:[その他のツール] – [JavaScript コンソール] を選択する
 もしくは、共通:ページのどこかで[右クリック] – [要素を検証] – [Console]
 
※この「コンソール」は、どのモダンブラウザにも同じようなものが用意されています。
Safariの場合 ・IEの場合 ・Firefoxの場合
もともともは2009年ごろに誕生したFirefoxの「FireBug」というプラグインだったのですが、あまりにも便利なため、あっという間に全ブラウザで標準搭載されるようになりました。

 

本日2018年4月12日に、2018年度「メディアデザイン実習J」のシラバスとして、2017年度同実習のシラバスがCampusNetに掲載されてしまっていることが判明しました。

今年度予定していた新しいシラバスの内容(PDF)
(※本文最下部に、画像も掲載しています)

講師と学習支援センターとの手続きに齟齬があったことが原因です。
学生の皆さんにおきましては、履修予定・学習計画などに良くない影響を与えた可能性があることをここでお詫びいたします。

詳細な事情についてはこの場でのご説明は差し控えたいと思いますので、授業内で改めてご説明します。
履修者以外の方は、講師・入江まで問い合わせいただければ分かる範囲でお答えします。

(学生さんの権利として、学習支援センター側に説明や改善を求めることも当然可能だと思いますが、学科レベル・カリキュラムレベルでの対応や説明に関するご案内は講師・入江の権限を超えており適切に行えないという点をご了承ください。)

当該実習のレベルでの対応としましては、誤って掲載された古いシラバスの内容と本来あるべき今年度のシラバスを適切に折衷していくような着地点を前向きに検討してまいります。

昨年度のシラバスの内容を今年度実習として受けられると期待されて履修された学生さんもいらっしゃるでしょうし、現状のウェブ業界に即して更新された新しいシラバスの内容のほうが良いと考える学生さんもいらっしゃるかと思います。

そのため、履修登録された学生さんと積極的に相談しながら、今年度の具体的な授業計画を定めてまいります。

ご意見などあれば講師に伝えてください。
可能な限り対応します。

プログラミングの初歩の初歩という意味で、表計算ソフト「エクセル」の関数について理解してみましょう。

オフィススイートについて

まず、「Excel(エクセル)」は、マイクロソフトのオフィススイート「Microsoft Office」のなかの1製品です。

  • Microsoft Office (1989-)

    • Word
    • Excel
    • Access
    • PowerPoint
    • Publisher (Windowsのみ)
    • Outlook (「Outlook Express」の上位ソフト)

Windowsパソコンにはプリインストールされていることもしばしばあります。

オフィススイートとしては、無料の「OpenOffice」「Kingsoft Office」なども存在します。
Microsoft Officeとの互換性はかなり高いです。

また、近年よく使われるのが「Google Drive(旧:Google Docs)」です。
クラウドストレージである「マイドライブ」上に、オフィススイートが提供されています。

同様のクラウド展開はMicrosoftも行っており、無料の「Office Online」と法人向けの「Office 365」が存在します。
Office Onlineは、クラウドサービス「One Drive」と、Evernote対抗ソフトである「One Note」などと密接に関係しています。

ちなみにMac上では、Microsoftからは「Microsoft Office for Mac」が提供されています。Apple純正のオフィススイートとしては「iWork」が存在します。

表計算ソフトの選定

「Office」や「iWork」、「Google Drive」といったオフィススイートのなかの表計算ソフトが、「Excel」や「Numbers」、「Googleスプレッドシート」です。

今回の授業では、Googleアカウントとブラウザさえあればすぐに利用可能な「Googleスプレッドシート」を使用してみたいと思います。

Google Driveにアクセスして、ログインしておいてください。

表計算ソフトの使われ方

◆計算の必要な表の作成

◆「エクセル方眼紙」

スキ

サッカー
レトロゲーム
ざるそば
ラジオ
アドベンチャー・タイム
Amazon
昔のTwitter
すイエんサー
風景を見ること(海外ドラマ、ストリートビュー、シューティングゲーム、車窓)
攻殻機動隊/夏目友人帳/西尾維新
中川家/古坂大魔王/ダウンタウン/なかやまきんにくん
マツコ・デラックスの出てるテレビ番組
ウィル・フェレル
ストレートに発言すること、言い切ること
ボブカット・ショートカット
おっぱい

キライ

虫全般
冷えたコロッケ
Facebookグループ
Windows
名探偵コナン/バクマン
話が進まないこと(銀行、区役所、病院、コールセンター)
YSEかNOかで答えられる質問にYESかNOかで答えないヤツ
デブをデブといじっても平気だと思ってるヤツ
スマホ見ながらだと歩く速度が1/2になるヤツ
黙ってる方が得だと思ってるヤツ
金貸してくれと言ってくるヤツ
急に返信してこなくなる女子

2017

ハースストーン [battel.net]
アスタブリード [PS4]
TITANFALL2 [PS4]
ミラーズエッジカタリスト [PS4]
モンスターハンターフロンティアZ [PS4]
ALENATION [PS4]
2/5 LET IT DIE [PS4]
Everybody’s gone to the rapture [PS4]
ベースピンボール []
Dead Ops Arcade [PS3]
Dungeon Siege3 [X360]
Mold on Pizza [Steam]
Republique [PS4]
戦国修羅SOUL []
解離性ミリオンアーサー [iOS]
1/5 OneMoreLine [Steam]
1/5 Super Hexagon [Steam]
1/4 ポケモンブラック [DS]
1/4 STAR WARS BATTLE FRONT [PS4]
とってもE麻雀ぷらす [PS4]
@SIMPLE DLシリーズG4U vol.1 THE麻雀 [PS4]
大戦略WEB [PS4]
古き良き時代の冒険譚 [PS4]
パックマンチャンピオンシップエディション2 [PS4]
Grim Fandango Remastered [PS4]
1/2 LIMBO [360]
1/2 HEXIC2 [360]
1/2 Hexic for iOS free [iOS]
1/1 Street Fighter X 鉄拳 [360]
1/1 SHOOT MANY ROBOTS [360]
1/1 女とドラゴン 幻獣契約クリプトラクト [PS4]

 

2016

12/31 Jetpac Refused [360]
12/30 LYNE [Steam]
12/24 タイムアベンジャー [PS4]
12/26 MAW [360]
12/23 Rock of ages [360]
12/18 スプロージョンマン [360]
12/18 Make7 [iOS]
12/17 Perchang [iOS]
12/17 Way Out [Steam]
ガンダムオペレーションNEXT [PS4]
Zenge [Steam]
Joy Ride Turbo [360]
Race Driver : GRID2 [360]
Outbound [360]
CastleStorm [360]
Super Time Force [360]
Spelunky [PS3]
Endless Frontier [iOS]
Adventure Capitalist [iOS]
Tap To Riches [iOS]
Make More! [iOS]
AbyssRium [iOS]
ファイナルタップタジー [iOS]
リトルビッグプラネット3 [PS3]
12/6 Hook [Steam]
スタンドマイヒーローズ [iOS]
Shadow Bug [iOS]
Beyond: Two souls [PS3]
10/1 BattleTime [Steam]
10/1 Mahjong Solitaire Epic [Mac]
10/1 Tracky Train [iOS]
9/13 Magic Mansion [iOS]
9/9 ディバインゲート [iOS]
みどりのほしぼし [iOS]
9/3 Mighty No.9 [PS4]
9/3 解離性ミリオンアーサー [PS4]
無双 [PS3]
セブンスドラゴン2020 [PSP]
TOKYO JUNGLE [PS3]
よるのないくに [PS3]
8/23 Blossam Blast [iOS]
8/20 DEAD STAR [PS4]
Furi [PS4]
8/14 Klocki [Steam]
8/14 100億人の俺の嫁 [Android]
8/14 武器投げRPG 空島クエスト [Android]
8/13 ワギャンのパネルしりとり [Android]
8/13 Unholy Heights [Steam]
8/13 Century City [Android]
8/7 カラドリウス ブレイズ [PS3]
8/7 hocus [iOS]
8/5 ルミネス エレクトロニックシンフォニー [Vita]
8/4 Power Hover [iOS]
8/2 Dragons World [iOS]
BARRIER X [iOS]
7/31 Drop Flip [iOS]
7/29 その勇者、ひきこもりにつき [iOS]
7/27 真・三国無双7 Empires [PS4]
暴走ブリック [iOS]
7/22 Pokemon GO [iOS]
7/21 超ダメージ勇者 [iOS]
7/8 聖闘士星矢 Zodiac Brave [iOS]
7/6 ニンゲン繁殖
7/5 ぼくの惑星 [iOS]
7/4 モンスターを集めてまいれ2 [iOS]
7/4 モンスターを集めてまいれ3 [iOS]
7/4 キンを集めてまいれ [iOS]
7/4 豆しば探検隊 [iOS]
7/4 パンツハンター [iOS]
7/3 Smash Fu [iOS]
7/3 フィッシングブレイク [iOS]
7/2 モンスターを集めてまいれ [iOS]
6/30 Horizon Chase [iOS]
6/29 Barrier X [iOS]
6/29 Board 2 Death
6/28 Splash Cars [iOS]
SkyWalk [iOS]
6/25 Cell Connect [iOS]
6/25 Soccer Cup [iOS]
6/17 Crossy Road [iOS]
6/17 みどりのほし [iOS]
6/15 庭ゾンビ [iOS]
6/12 Rocket Cars [iOS]
6/12 Road Trip [iOS]
6/9 さよなら海腹川背ちらり [Vita]
6/7 しばらく勇者 RunBrave [iOS]
6/6 Fits [iOS]
6/5 Two Dots [iOS]
6/5 Mekorama [iOS]
6/3 VOEZ [iOS]
6/1 クラッシュフィーバー [iOS]
5/31 TRIALS FUSION [PS4]
5/30 ガンダムブレイカー [PS3]
5/30 ラビオレプス [AC]
5/30 Zumas Revenge [Origin]
5/29 Octagon [iOS]
5/29 Master Spy [Steam]
5/27 Battle Group 2 [Steam]
5/27 Cities in Motion 2 [Steam]
5/23 Shooting Stars! [Steam]
5/22 Neon Drive [PS4]
5/19 RIDE [PS4] ここまでで70
5/19 Bushido Bear [iOS]
5/19 Super Sanctum TD [Steam]
5/18 DEAD OR ALIVE xtreme 3 Fortune [PS4]
5/17 Phantasy star online 2 [PS4]
5/16 Rollers if the Realm [Vita]
5/15 Kick & Fennick [Vita]
5/15 Jumping Balls [iOS]
5/14 Lane Lacer[ [iOS]
5/14 Looty Dungeon [iOS]
5/13 ジャッジ! [iOS] ここまでで60
5/11 Infinite Travel [iOS]
5/11 Dot and circle [iOS]
5/11 Dot Puzzle [iOS]
5/11 Animal Feeder [iOS]
5/11 放置キングダム [iOS]
5/9 Galaxy Admirals [Steam]
5/8 Osu! [PC]
5/8 Overture – Steam
5/7 真・三国無双7 Empires 共闘版 – PS3
5/7 戦国BASARA2 英雄外伝(HEROES) – PS2 – ここまでで50
5/7 Football Manager 2013 – PC
5/1 実況パワプロ野球サクセススペシャル – Vita
4/29 Triple Town – Steam
4/29 Audio Surf 2 – Steam
4/28 Solitaire(Wells Fargo) – iOS
Royal Revolt
4/27 Boximals Soccer – WindowsApp
4/26 City Bus Tycoon Free – WindowsApp
4/26 Airport City – WindowsApp
4/23 Destination – WP8 – ここまでで40
4/18 戦国無双クロニクル3
4/14 Counter Spy – ios
4/13 Ping Pong -ios
4/12 Cut the rope – ios
4/10 Urban Trial Freestyle – Vita
3/27 BROFORCE – PS4
3/22 ファンタシースターノヴァ – Vita
3/20 モノカゲクエスト – 3DS
3/20 BalanCity (β) – Mac
3/19 Halo5 – XboxOne – ここまでで30
3/19 BattleField Hardline – XboxOne
3/18 電撃文庫Fighting Climax – Vita
3/17 Goat Simulator – Xbox One
3/6 メルルのアトリエplus – Vita
3/6 ヴィーナスイレブン – iOS
3/6 みんなのGOLF ポータブル2 – Vita(PSP)
3/5 朧村正 – Vita
Piloteer – iOS
2/18 Tomb of the mask
2/18 討鬼伝 極 – ここまでで20
2/15 MouseCraft
2/8 Nom Nom Galaxy
1/25 ZHEROS – XBOXONE
1/19 勇者ヤマダ
1/19 崩壊学園
1/18 育成ヤンデレラ
1/17 グランブルーファンタジー
1/17 Back to Bed
1/17 ファントムオブキル
1/17 Lord of Knights
1/17 Hose It Down
1/ 魔王強すぎ
1/11 カプコンジェネレーション 第5集 格闘家たち PS3
1/9 ソリティ馬 3DS
1/6 ドラゴンズドグマオンライン PS4
1/6 ゲームざんまい 3DS
1/5 Jolly Jam
1/4 Pixel Flying Pig
1/2 Cubis
1/2 Flick Color

 

2015

12/22 麻雀鳳凰 – Wii U
12/21 Attack the light – Steven Universe – iOS
12/20 おっぱい大戦(DMM)- ブラウザ
12/17 中年騎士ヤスヒロ – iOS
12/17 Impossible Run – iOS
12/16 モンスターハンタークロス – 3DS
12/16 メタルスレイダーグローリー ディレクターズカット – WiiU VC
12/14 ジャンカラ少年
12/13 LOST REAVERS – WiiU
12/13 Teslagrad – PS4
Final Fantasy 4 – PS1
パイプドリーム – GB
12/10 シバ・カーリーの伝説 3DS
12/10 Woah Dave! Vita
12/7 Combo Quest
12/7 タイムサーファー iOS
12/7 The Swapper Vita
12/7 Super Exploding Zoo Vita
12/6 ネコつつき
12/6 Memento
12/6 モンスターバッグ
12/6 KILLZONE MERCENARIES
12/5 Dragon Fin Soup
12/4 ねこ大乱闘
12/4 Tower Rising(LINEタワー)
12/3 Blendoku 2
11/30 To-Fu Fury
ワンダースタジアム – WS
Drive Ahead
11/14 rop iOS
11/7 光追う者 iOS
11/6 Dungeons & Dragons ミスタラ英雄戦記 PS3
11/5 Plants vs. Zombies X360
11/2 LocoCycle One
10/29 SpireFall iOS
10/29 マドリス iOS
10/28 アサシンクリード クロニクル チャイナ One
10/27 バビルサ iOS
10/24 F-1 GRAND PRIX アーケード
10/24 ドラゴンスレイヤー1 GB
10/24 星のカービィ GB
10/22 Slow Down iOS
10/22 Impossible Geometry iOS
10/19 SHOPPING CART HIGHWAY R – iOS
10/17 シルエットミラージュ
10/13 メタルスラッグXX
10/11 TAPES – iOS
9/28 shadowmatic 
9/26 House of Fun 
9/23 片道勇者 Steam
9/22 ぼっちを探せ 
9/22 NFS Rivals One
9/19 ぷよぷよSUN決定盤 PS3
ぎゃるGUNVOLT Vita
9/16 Acient Surfer2 iOS
9/15 Run Bird iOS
Grow Home PS4
Flick Kick Football 
Traffic Racer Android
9/5 振リカエリマセン勝ツマデハ PS4
9/5 戦国エース アーケード
1943改 アーケード
Cisco Heat アーケード
ピット&ラン アーケード
9/5 Aaru’s Awakening PS4
9/3 アリス Android
8/26 King of Thieves iOS
8/16 ねこあつめ iOS
8/16 Panda Pop iOS
ヘイデイ
99bricks
8/8 マリオカート8 WiiU
8/8 アルカナハート3 Love Max!!!!!
8/7 スプラトゥーン
8/3 Jewel Beach

7/14 ディスガイア3 Vita
7/12 Titan Fall Deluxe One
7/7 テイルズオブシンフォニア ラタトスクの騎士 PS3
7/7 レイマンレジェンド Vita
AIR MECH ARINA
ハイスクールDxD NEW FIGHT Vita
Dungeon 999F
ローグレガシー
ソウルサクリファイスデルタ
5/30 SubaraCity iOS
Crypt of the Necro Dancer Steam
ディスガイア2
跳ねる忍者
2/18 ごちぽん
グミドロップ
Run bird
2/17 Radical [iOS]
2/17 Tap Titans [iOS]
Akiba’s trip2 [PS4]
鬼斬 [PS4]
2/8 Seabeard [iOS]
2/8 Puppet Punch [iOS]
2/8 Real Racing 3 [iOS]
2/8 ねこつつき [iOS]
2/? 99 Bricks [iOS]
1/25 PowerSmash Golf [One]
1/25 Killer Instinct [One]
1/21 ピコピコ達人 [iOS]
1/18 Strike Night [iOS]
1/18 Max: The Curse of Brotherhood [One]
1/18 Titan Attacks! [PS4]
1/17 Dash Man [iOS]
1/17 Duel [iOS]
1/15 Natural Doctrine [PS4]
1/15 Pix The Cat [PS4]
1/12 SpireFall
1/11 MUJO [iOS]
1/11 アドベンチャータイムの宝さがし [iOS]
1/10

「ライセンス(契約)」という言葉は、「著作権」を含めた、権利に関する取り決め全般のことを指します。

著作権」は、著作物(作品) と 著作者(クリエイター) の権利を守るために存在する、国際的な取り決めです。
創作活動で飯を食う、私たちクリエイターの「価値の源泉」でもあります。

しかしながら、ディズニーの「ミッキーマウス」の権利を過度に保護するために著作権法が改定され続けているなど、公正さに欠く面もあります
特に昨今では、悪意を持った過度な商標登録の問題(ベストライセンス社が有名)や「サブマリン特許」問題、CCCD(コピーコントロールCD)問題、DRM問題などとも相まって、自由なビジネス・創作活動を阻害するものとしても認識されています。

こういった従来の独占的な「著作権」に対して、1970年代のハッカーらによって「フリー」「オープン」という考えが生まれました。
以降、コンピュータ分野ではより自由で柔軟なライセンスが生まれ、現代のテクノロジーを支えています。

私たちクリエイターは、どのような形であれ「ライセンス」とは無縁でいられません。ややこしいけれど、大切なことです。

以下に、代表的なライセンスについて解説します。

 

目次

  1. 従来の「著作権」 (Copyright)
    • フェアユース
    • パロディ
    • 著作権延長法(ミッキーマウス保護法)
    • デジタルミレニアム著作権法
    • 二次創作活動(同人活動)
  2. パブリックドメイン
  3. GPL
  4. 修正BSDライセンス
  5. Creative Commons

 

1. 従来の「著作権」 (Copyright)

著作物に対する、著作者の独占的・排他的な権利。
「特許権」や「商標権」にならぶ知的財産権の一つ。

実際の法の運用は各国によって異なるが、「ベルヌ条約」などによって国際的な最低要件が定められている。

多くの国において、著作権は著作物の創作と同時に発生し、著作者の死後50年で切れる。

以下の場合は、著作権の適用が制限される(対象外となる)。
・私的使用を目的とした複製
・図書館における複製
・引用
など

※ フェアユース

著作権者の許諾なく著作物を利用しても、以下の4つの判断基準のもとで公正な利用(フェアユース)に該当すると判断されたばあい、著作権の侵害にあたらないとする考え。

  1. 利用の目的と性格
  2. 著作物の性質
  3. 著作物全体と利用された部分のバランス(量・価値)
  4. 著作物利用の市場に及ぼす影響

ただしこれは曖昧な指針で、訴訟となった場合に最終的な判断は個々のケースによる。
Googleが全世界のウェブサイトの「キャッシュ」を保存しサービス利用していることについては、フェアユースの範囲内であるとされている。

※ パロディ

フランスでは「パロディ規定」が存在し、「フランス的な風刺の伝統」という文化的意義のもとに、風刺作品は著作権の対象外となる。
(このことは、日本のアニメ文化がフランスで受け入れられやすいことと関係があるのかもしれません)

※ 著作権延長法(ミッキーマウス保護法)

「ミッキーマウス」は1928年に発表された作品である。
この法案以前、アメリカでは著作権の保護期間は75年であったため、2003年で権利が切れるはずだった。

1998年、ミッキーマウスの著作権切れが迫っているなか、権利者であるウォルト・ディズニー・カンパニーのロビー活動によって、保護期間が延長された。「ミッキーマウス保護法」「ミッキーマウス延命法」とも言われる。
法人の権利が長くなるなど、複雑になった。

アメリカ政府の延長要求を拒否し、保護期間50年を維持している国や地域にはカナダ・ニュージーランド・中国などである。

※ デジタルミレニアム著作権法

デジタルコンテンツの不正コピー防止のための保護法。96年WIPOの条約を根拠とし、98年アメリカで制定され、2000年に改正された(「ミレニアム」と名がついている由来)。
EUでも2001年に同様の「EUCD」が成立した。

この保護法に関してもっとも重要な点は、オンラインでの著作権侵害についての取り決めである。

オンラインで著作権侵害行為が発生した場合、プロバイダー(ISP)は問題となっているコンテンツを削除したり、情報発信者に警告することによって免責を得ることが可能になった。

(それまでは、プロバイダーがすべての責任を負う可能性があった)

※ 二次創作活動(同人活動)

同人活動において、まず、誰にも公表しない私的利用は著作権の対象外であるから問題ない。
しかし、即売会やオンラインでの頒布を目的とする場合は、著作権を考慮する必要がある。

適法な二次創作作品の頒布

  • 著作権者(いわゆる「公式」)による許諾がある場合
  • コミケやワンフェスなど「当日版権」が存在するイベントでの頒布

著作権者(いわゆる「公式」)が黙認している場合も、権利の侵害とはならないが、TPPのような法案・協定によって非親告罪化された場合には、第三者による告発などで有罪となりうる。つまり限りなく黒に近いグレーなだけであって、進んで行うべきことではない。

また、著作権者が問題視するはずのケースでも、二次創作物について刑事告訴ないし民事訴訟を行うことは極めて少ないのが実態。これは単に費用対効果の問題から妥協しているだけの状態であって「訴えられなかったらOK」と考えるべきではない。
(特に昨今は消費者に問題視された結果の「炎上」が及ぼす影響を無視してはいけない)

 

2. パブリックドメイン

著作権が切れた状態にあること。
ただし、著作権が切れていても「所有権」や「人格権」を侵害する場合は、自由に利用することは出来ない。
著作物が商標登録されている場合や、意匠権が存在する場合も、自由に利用することは出来ない。

ある地域(国)において著作権が切れていても、別の法域ではそうではない、という場合もある。

つまり「パブリックドメイン」の作品だからといって、関連する様々な状況にも配慮せずに二次利用するのは危険である。

 

3. GPL (General Public License)

リチャード・ストールマン(ハッカー文化・フリーソフトウェア運動の代表的存在。Emacsの開発者)によって策定された。
フリーウェア、コピーレフトの代名詞的なライセンス。

GPLでライセンスされた著作物は、ユーザーに対して以下の行為を許可する。

  1. プログラムの実行
  2. ソースコードにアクセスし、プログラムの動作を調べ、改変すること
  3. 複製物の再頒布
  4. プログラムを改良し、公衆にリリースすること

GPLは、二次的著作物についても上記4点の権利を保護しようとする。
この仕組みは「コピーレフト」と呼ばれる。
GPLでライセンスされた著作物は、その二次的著作物に関してもGPLでライセンスされなければならない。

GPLでライセンスされた著作物を改良・改変して作った二次的著作物も、同様にGPLでライセンスされなければならず、他のライセンスで提供することは出来ない。

つまり、

  • GPLのフリーウェアを改良して商品として独占的に販売することはできない。
  • GPLのフリーウェアを改良したら、ソースコードへのアクセスを提供しないといけない(求めに応じてソースコードを開示する必要がある)

 

4. 修正BSDライセンス(New BSD License)

まず、旧「BSDライセンス」(Berkeley Software Distribution)が、カリフォルニア大学バークレー校によって開発されたソフトウェア群のためのライセンスとして策定された。

これをさらに利用しやすく修正したものが「修正BSDライセンス」である。

GPLに似ているが、GPLよりも厳格ではなく、フリーウェアのライセンスとしてはもっとも扱いやすい。
最大のポイントは、GPLとは違って、二次著作物のライセンスは自由に決定することが出来る点である。

 

5. Creative Commons

ローレンス・レッシグ(サイバー法学の第一人者。フリー・カルチャーを提唱)によって策定された、コンテンツ再利用のためのオープンなライセンス。
一般的な著作権表記の「All rights reserved」に対して、このライセンスでは「Some rights reserved」という表記が用いられる。

flickr」は、Creative Commonsの写真作品の巨大なアーカイブとして有名で、ブログの記事写真などにもよく利用される。

まず、Creative Commonsには以下の4つの「オリジナルライセンス」が定義されている。

上記4つの組み合わせによって、実際の著作物の再利用可能なライセンスは決定される。

4つのオリジナルライセンスのうち「BY(表示)」は必ず含まれる。
つまり、Creative Commonsにおいて原作者などの表示は必須である。

 
 

ちなみに、このサイトの内容については、著作権法第35条「学校における複製」の範囲内で文章や画像を使用・引用しています。
これは非常に特殊なことです。

 

みなさんはライセンスについて一度よく把握した上で、

  • 人様の権利を侵害しない
  • 自分の権利が侵害されたときは強い姿勢で臨む

ようにしましょう(^ω^)

 


でもそのへんにいる先生よりは、今どきの文化にもアンテナ張ってるつもりなんです。

 

おもしろかった

「みわくのあくま」もけお
「わくわくろっこモーション」大沖
「無慈悲な8bit」山本さほ
「ぶんぶくたぬきのティーパーティ」森長あやみ
「かふん昔ばなし」かふん
「TAIL STAR」okama

 

イマイチ

「不思議なソメラちゃん」ちょぼらうにょぽみ ←「あいまいみー」のほうが断然いい
 
「かおすキッチン」服部昇大 ←読みづらい
 
「おしえて!ギャル子ちゃん」鈴木健也 ←ギャグがスベってる。この人はこういう絵を書きたかっただけなんだろうな
 
「少女終末紀行」つくみず ←「キノの旅」と同じく、劣化版「星の王子さま」。ココロの弱い人向けの作品は雰囲気だけで中身が薄い

localhost

読み込んだ画像を元に、テキストをレンダリングして新しい画像ファイルを生成します。

 

読込画像
http://zokei.koekatamarin.com/wp-content/uploads/2016/06/splabg.png

フォント
https://drive.google.com/file/d/0B4EpEP9nVtnvWjRpYTIxVlNvcWc/view
http://zokei.koekatamarin.com/wp-content/uploads/2017/07/ikamodoki1.zip

以下のimg.phpとおなじ階層に .pngファイル と .ttfファイル を設置

 

さらに上記スクリプトを改良して、合成するテキストを、クエリストリングからパラメーターとして受け取ることが出来るようにします。

img.php?name=なまえ&text=ぶんしょう

のようなURLにアクセスします。

 

この img.php によって生成された画像データは、PNG形式の画像ですので、画像ファイルのように扱うことが出来ます。

 

index.html

スクレイピングとは?

APIを使ったデータ取得の場合
・JSONなどのプログラムで扱いやすいデータが返ってくる
・サービス提供者が、APIを公開してくれている必要がある

スクレイピングする場合
・WebページからHTMLデータをそのまま取ってくる
・APIが公開されていなくても、サイトさえあれば無理矢理データを取ってこれる
・ただしユーザー認証が必要なサイトは工夫が必要

 

単純なページ取得

file_get_contents関数でファイルやURLのデータを取得

 

スクレイピングライブラリ

ライブラリとは、言語標準の関数では実現できない機能を、様々な人が様々なプロジェクト・プログラムで利用しやすいように、ひとかたまりにして配布されているプログラムコードのことです。

スクレイピングするためのライブラリ
・PHP Simple HTML DOM Parser
・Goutte
・phpQuery
いくつかありますが、古くからあって更新もされている「PHP Simple HTML DOM Parser」を選択するのがベストプラクティスだと思います。

PHP Simple HTML DOM Parser
ダウンロード
概要
解説ページ(日本語)

 

PHP Simple HTML DOM Parser の利用

スクリーンショット 2016-06-16 14.14.15

上記は商用サイトのHTMLソースコードであるが、「PHP Simple HTML DOM Parser」によって、HTMLタグをjQuery的に抽出していくことができる。

 

file_get_contents() ではなく、このライブラリ独自の関数 file_get_html() を使用する

コードの実行結果↓

スクリーンショット 2016-06-16 16.29.01

 

find()というのも、PHP標準の関数ではなく、Simple HTML DOM Parser独自のオブジェクトメソッド。

変数$htmlは、オブジェクト。
(Simple HTML DOM Parserクラスのオブジェクトインスタンス)
オブジェクトは、その内部にメソッドを持つ(定義されている)。
なので、オブジェクトのメソッドを使用する際は、
「オブジェクト->メソッド()」と表記する。

PHPは、中途半端なオブジェクト指向プログラミング言語なので、主語=オブジェクトのあるコード・ないコードが混在します。

 

実用的に絞り込む

ニュース欄のニュースを複数取得する

 

スクリーンショット 2016-06-16 16.03.42

 

アイデア

・Amazonのランキングを保存しつづけて、推移がわかるようにする
・いろいろなサイトのニュースを取得して、スポーツ新聞のようなレイアウトのCSSで表示し直す
・Steamのサイトからセール情報をチェックし続けて、新しいセールが始まったらメールを送信する
などなど…

 

注意点

スクレイピング処理は、言うまでもなく、相手方のサーバーからデータを取得します。
アクセス頻度によっては、相手方のサーバーに負荷をかける事になります。

このため、上記のような単純な作りだと、ユーザーがこのページにアクセスするたびに、自分のサーバーから相手方のサーバーにアクセスしてしまうことになります。
1分間に100人がこのサイトを使用したら、自分のサーバーから相手方のサーバーに1分あたり100アクセスしたことになって、明らかに不審なアクセス数です。
もしこのようなことで相手方のサーバーを停止させるようなことがあれば、不正アクセスの罪に問われかねません(不正な攻撃プログラムを開発・公開・利用幇助した)。

 

実際に2010年、脆弱なシステム環境で運用されていた図書館のサイト(サーバー)から、書籍データを取得するプログラムを作った人が逮捕されるという事件が起こりました。
岡崎市立中央図書館事件 – Wikipedia
※この事件は捜査関係者にIT知識が乏しかったせいで起きた不当な逮捕・勾留であると一般に考えられています。

 

このような意図せざる迷惑行為や無用の誤解を避けるためには、キャッシュの仕組みを利用します。
スクレイピング処理を公開サイトのコードに書くのではなく、1時間に1回管理者のみによって動作させる専用のコードを用意しておき、自分のサーバー上にキャッシュデータを生成しておきます。
サイトにアクセスするユーザーには、そのキャッシュデータを表示するようにします。