●これまで同様、この実習も、「自分のなかの見えないデータベースを使う」練習。
●なるべく突拍子もない発想をしようと意識すること。物語としての出来のよさはいっさい求めていない。
●どんなお話、どんなイメージにするべきか分からなくて、自分のなかで途方にくれている時間に、実は発想が鍛えられている。
●ネットを積極的に利用してみること。自分の中にアイデアがないならネットで探せ。
１)提出ファイルをリネームする。
まず、用意されたHTMLのひな形ファイル「movie_pamph_template_2023.html」を、デスクトップ上でリネームする。
ファイル名のところをダブルクリック、もしくは右クリックして「名前を変更」を選ぶとリネームできるモードになるので、名前を書き換えよう。
わからないなら「ファイル リネーム」でネット検索するといい。
↓
このとき、ファイル名を「movie_pamph_学籍番号_みなさんの名前(ローマ字でも漢字でも）」という形でつける。
例:movie_pamph_111111_nomaguchisyuji.html
↓
これで提出用のファイルの雛形ができた。ファイル形式が変わっていないこと(htmlであること、つまりファイルアイコンがブラウザのアイコンであること）を確認しておこう。
２)ファイルを開き、中のデータを書き換えてゆく。
・名前を変えた提出用ファイルを開き、中身を書き換える必要がある。
このとき、単純にダブルクリックして開くと、htmlなのでブラウザが立ち上がり、中身を書き換えることはできない（結果として出来上がるページだけが表示される。）
・「メモ帳」「テキストエディタ」「テキストエディット」など、あなたのコンピュータにある、一番シンプルなテキストエディタを立ち上げる。
下手にMSワードなどで開いて保存してしまうと、ワードファイルになってしまいhtmlとして使えなくなるので注意すること。
それから「ファイルを開く」コマンドで、提出用ファイルを選び開く。
すると、htmlの「中身」を見て、書き換えることができる。
-------------------------------
[Macの人への注意]
Macの標準テキストエディタ「テキストエディット」には、「リッチテキスト」という、htmlファイルをブラウザと同じように表示する機能がある。
このせいで、何も考えずにhtmlファイルを開くとhtmlのコードを編集することができない状態になる。
テキストエディットをまず起動し、「ファイルを開く」で提出用ファイルを選ぶ。これは他のエディタと同様だが、このときに、ウインドウの下にある「リッチテキストのコマンドを無視する」というボタンにチェックを入れる。
これで、htmlのコマンドがエディタ上で編集できるようになる。
この件に関する参照リンク
-------------------------------
・htmlの中身自体は、プログラム、すなわち文字列のかたまりである。だからシンプルなテキストエディタでも編集できる。
が、それだとhtmlコマンドとテキストが見分けにくく間違えやすいので、もしオフラインで作業したいなら、htmlエディタを使うとよい。
無料のhtmlエディタは多数存在する。
「へてむるクリエイタ～」「ez-html」あたりを、ネットで検索すればダウンロードサイトが見つかるはず。
・強くおすすめしたいのは「オンラインhtmlエディタ」での作業。
色分けしてあるのでどこを書き換えればいいのかわかりやすい。
windowsでもMacOsでも使え、パソコン以外でも作業できるのが利点。
オンラインエディタ liveweave.
◎liveweaveの使い方
① まずはリンクからliveweaveに行く。画面が四分割されているが、左上がhtmlエディタ。
編集結果はすぐ右下部分でレビューされる。
② 1)で開いた自分用のhtmlの中身を「全て選択」してコピー、liveweave左上のhtmlエディタ部分にペーストする。
liveweaveに最初書いてあるhtmlは消すか「全て選択」をして上書きすること。
③ liveweaveで文面を編集。
④ 編集が完了したら、「全て選択」してliveweaveのhtmlテキストをコピー。
あなたが作った提出用ファイルファイルにペースト。「上書きで保存」で保存する。
保存したら、htmlとして保存されているかを必ず確認すること。ファイルをダブルクリックで開いたとき、ブラウザが立ち上がればOK。
・中身の編集については、htmlの内部に基本的なことを書いたコメントがたくさん記されているので、それを読んで指示に従うこと。
・書いたり画像を貼ったりする場所は以下の通り。
＜画像＞ ６枚
・人物orその他の画像 ６枚
＜テキスト＞ １２箇所
・タブの名前 １箇所
・映画タイトル １箇所
・キャッチコピー １箇所
・序盤ストーリー １箇所
・中盤ストーリー １箇所
・画像キャプション（解説） ６箇所
・文責名 １箇所
画像の貼り方については後述する。
・cssについて。
資料サイトでバックが黒になったりしているのは、雰囲気を出すため簡単なcss（スタイルシート）を使っているから。
htmlファイルと同じ階層に「css」フォルダがあると、そこに入っていてhtmlで指定されているcssファイルを反映するようになる。このレポートの場合はcommon_b.cssというファイル。
オンラインエディタではcssフォルダの中を読まないのでcssが反映されないが、基本的に気にする必要はない。
もしどうしても編集中に黒バックでの見た目を確認したいなら、課題用zipに入っているcssフォルダの中にある「common_b.css」ファイルをメモ帳などで開き、中身をコピーしてliveweaveの左下の部分に貼り付けよう。するとcssが適用されるようになる。
また、作った自分のhtmlを課題用cssフォルダの横に置くことでも黒バックでの見た目が確認できる。
３)ファイルが完成したら、UR-Noteのメールに添付して提出する。提出ファイルは作ったhtmlだけでよい。
・不明点などあったらフォーラムで質問するか、授業のあと聞いてくること。
１）今回のファイル制作では、画像はネット上にあるものを、リンクを貼ることで表示する仕組み。
※他に、画像自体を取得して、ローカルファイルに置いてそれを表示する方法もあるが、今回はやらない。
２）デフォルトのtemplate.htmlは、画像を貼るところはこんなふうになっている。
<img src="http://nomawebstudy.web.fc2.com/webimage/movierpumph_charaimages/dummy.jpg"
alt="" width="450" height="300">
資料サイトの「架空映画の資料・画像イメージ」のページにある猫のダミー画像の「アドレス」を貼り、その画像へのリンクを作ることで、その画像の表示をしている。
""の中の「http」から始まり「.jpg」で終わる部分が、猫画像のウェブ上の住所、つまり「画像アドレス」である。
３）「http://nomawebstudy.web.fc2.com/webimage/movierpumph_charaimages/dummy.jpg」の部分を消す。""ふたつは消してはいけない。
４）使いたい画像があるページへゆく。
「架空映画の資料・画像イメージ」のページにたくさん画像が用意してあるのでそれを使ってもいいし、自分でインターネットで探し当てた画像でもいい。手順は同じである。
５）使いたい画像の「画像アドレス」をコピーする。
画像アドレスの取得方法はブラウザによって違う。chromeの場合は画像の上で右クリック→メニューから「画像アドレスをコピー」でコピーできる。
他のブラウザでの画像アドレス取得法はウェブで調べること。ググればすぐ出てくる。
共通して使えるやり方は、画像のみを新しいページで開く方法。開いたページの上に出ているhttpアドレスが「画像アドレス」である。
６）さっき消した、「http://nomawebstudy.web.fc2.com/webimage/movierpumph_charaimages/dummy.jpg」があったところで、
「貼り付け」もしくはctrl-Vのショートカットで、先ほどコピーした画像アドレスを貼る。貼ったアドレスが""に囲まれる形になるよう注意。
7）画像のwidthとheightの数字（デフォルトは450,300）を変えて画像の大きさを調整する。
資料制作には、ふたつのルールを設ける。
１)
必ず全ての画像とテキスト（画像６枚、テキスト１２箇所）を埋めること。
２）
画像のうち最低でも２枚は、人物ではなく風景や物が大きく映っている画像であること。
（人物が映っているのはかまわない。）また、その２枚の画像は、ネットで自分で探してきたものであること。
※2)は、2023年から推奨ルールにした。つまり守らなくても減点しないし、どうしても上手くいかないなら無視してもいい。
※なお、いちおうキャラクターイメージをこちらで用意してはいるが、それを使わなくてはいけないというルールはない。
６枚の画像、全て自前で探してきても構わない。というより、積極的に推奨する。
あくまでおすすめの手順であり、この通りの順番で考えなくてはいけないということではない。
１）まず、人物イメージ画像を二枚選び出す。
私のほうで、洋画系の登場人物イメージをある程度用意してあるので、それを見ながら二枚選ぼう。
ネットで自分で調べて見つけた画像を使ってもいい。
二枚の人物は脇役でもいいが、おそらくどちらかは主役と考えたほうがアイデアが出やすい。
何をどんな理由で選ぶかは完全に自由。
２）映画のストーリーのキーになる言葉を一つ以上決める。
三題噺実習やキャラクタープロフィール実習と同じ考え方。
画像のイメージとつながりそうな、言葉を一つ考えることで、ストーリーを構築する手がかりを作る。
このキーワードはのちにタイトルやキャッチコピーに使える。
キャラクター実習のときに使ったランダム単語ガチャを使ってもいい。
ランダム単語ガチャ
３）次に、その映画の雰囲気を伝える画像イメージを一枚、ネットから探して選ぶ。
人物のイメージ以外に、「物」や「場所」のイメージを１枚加えることでアイデアがふくらむ。
人物が大きく映っていないものを選ぶこと。
４）三つの画像とキーワードが揃ったら、それをもとに「越境まで」のストーリーを作る。
物語の作り方は、講義でやった「三題噺の作り方」を思いだそう。
キーワードが画像に変わっただけで、やることは変わらない。
お題あてはめの項目に画像やキーワードを入れて作ってみよう。
おもしろそうな話ができたら、それをもとに画像を選び直すのもOK。
この段階ではhtmlには書き込まず、ノートパッドなどで下書きするといいだろう。
５）「越境まで」のストーリーに合った画像を、さらに一枚選ぶ。
キャラクターの画像か、その他の画像かは自由。
作った物語に合うような、四枚目の画像を選んでみよう。
６）「越境後」のストーリーを考える。
越境後にどうなるかを考えつつ、中盤の物語に合う画像を二枚選んでいこう。
なるべくなら、何かの意外な真実が明らかになったり、どんでんがえしがあるほうが映画っぽくなる。
エンディングまで書く必要はない。
７）画像のキャプションを書こう。
計六枚の画像が揃ったら、その解説文を書いてみよう。
８）映画のタイトルと、キャッチコピーを考えよう。
とても大事。
９）字数を調整しながら、htmlの指定された場所に書き込んでゆこう。
htmlの中にも注意が書いてあるが、htmlの中で表示を改行させるには
<br>
と打つ必要がある。リターンキーで改行しても、ブラウザ上では改行されない。
10）ページタブの表示テキストも、忘れず書き換えておこう。