ソーシャルデザインのための情報共有２
学科サイトの執筆方法２｜リンクの形成、動画の掲載、画像の掲載
ソーシャルデザイン演習/2020｜2020.04.30
第２回目の学習事項
- 受講生側｜以下の作業を行なって下さい
- 以下名簿が表示されます。確認できた方は「出席」をチェックして下さい。
遠隔授業 共有シート - 本日の説明を一通り読んで下さい。
演習１、演習２、演習３ と３つの演習を用意しています。 - 学科サイトの個人ページに演習で求めている内容を掲載して下さい。
ソーシャルデザイン学科｜2020年度生 - 質問は 上記共有シートに書き込ん下さい。極力授業時間内に回答します。
- 以下名簿が表示されます。確認できた方は「出席」をチェックして下さい。
- 教員側｜井上(貢)は、以下のことを実施します
- このページにおいて、技術解説を行う。
- 授業時間内は、共有シートを確認し、質問に対応する。
- 授業時間終了後、各学生のページの完成度を確認する。
- 記載内容の改善が必要な方には、当該ページの下のコメント欄において、次週までにコメントする。
以下、まずは目次を見て、授業の全体を把握してから、順に読み進めて下さい。
本日の目次
はじめに
前回に引き続き、学科サイトにおける個人ページの編集方法について説明します。本日のテーマは３つ。リンクの形成、動画の掲載、画像の掲載です。
最初の２つは簡単ですが、画像の掲載については、アップする前に自分自身で画像のサイズを「Web用に最適化する」という作業が必要になります。
では、順に、説明を読んで、各演習を行なって下さい。
前回の復習（基本の確認）
- 編集対象となるページ（あなた自身の名前がページ名となっている個人ページ）を表示して、ページフッター（ページの一番下）にある「EDIT（編集）」のボタンをクリックしてください。
- ここで、利用者ID、パスワードが求められます。事前にお伝えしたものを入力して、ログインしてください。
1. リンクの掲載
リンクとは、あるページから別のページへと、クリックで誘導する要素のことです。通常リンクボタンとなっている要素の上にマウスを持っていくと、マウスがポインタに変わる、リンク文字の色が変わるなど、何らかの演出によって、そこがリンクであることがわかるようになっています。
リンクには、同一サイト内の別ページにジャンプする「内部リンク」と、他所のサーバー上にあるページへジャンプする「外部リンク」の２つがあります。
1.1. 内部リンク
- 同一のサイト内にある別ページへのリンクを「内部リンク」と言います。
- Wikiでは、既存のページ名を二重括弧 [[ ]]で括るだけでリンクになります。
[[九産花子]] ← 九産花子さんのページへジャンプします。
- 以下のようにリダイレクト記号 [ > ] を用いると、任意の文字列から必要なページへジャンプさせることもできます。
詳細は [[こちら>ソーシャルデザイン演習]] をご覧ください。
詳細は こちら をご覧ください。
1.2. 外部リンク
- 他所のWebサイトへのリンクを「外部リンク」と言います。
- Wikiでは http ではじまるURLを直接記載するだけで外部リンクができます。
https://www.kyusan-u.ac.jp
- 以下のように リダイレクト記号 [ > ] を用いると、任意の文字列から、外部リンクをつくることもできます。
[[九州産業大学>https://www.kyusan-u.ac.jp]]
九州産業大学
1.3. 演習１
あなたのページの下の方に、以下の部分をコピー＆ペーストして、いくつかのリンクを張って下さい。
***リンク集 -内部リンク --[[ソーシャルデザイン演習]] --[[◯◯◯◯/IdeaNote]]（◯の部分は自分の名前） --[[◯◯◯◯/視覚デザイン演習]] -外部リンク --[[ソーシャルデザイン演習 授業のページ>https://design.kyusan-u.ac.jp/OpenSquareJP/?%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92/2020]] --[[◯◯◯◯>https://xxx.xxxx.xxx]] --[[◯◯◯◯>https://xxx.xxxx.xxx]]
付記：リンクに許諾は不要です
重要なことですが、リンクするのに相手の許諾は不要です。よく、「勝手にリンクしていいんですか？」という質問を受けることがありますが、リンクというのは、閲覧を誘導しているだけなので、著作権侵害にはあたりません。
Webサイトというものは、あちこちからリンクされる（被リンク数が多い）方がサイトの価値が上がって、検索ランキングも上がるので、リンクされることは「うれしいこと」なのです。リンクを張っておくと有益・・と思われるサイトは、見つけたらすぐ、自分のページにリンクしてしまいましょう。
2. 動画の掲載
当サイトでは、YouTube, Vimeo の動画を簡単に埋め込み掲載できるよう、拡張機能（プラグイン）を用意しています。以下のように 動画のIDを利用するだけで、簡単に動画を埋め込み掲載することができます。
2.1. 動画の掲載手順
- 動画のID を取得します。例えば、動画のURL（アドレス）が以下のように表示されている場合、v= の後の文字列 EexXu1UhLMY が動画のIDです。
https://www.youtube.com/watch?v=EexXu1UhLMY
- 動画のIDは、共有ボタンから見つけることもできます。YouTubeでは、動画の右下に「共有」というボタンがあります。それをクリックすると右のように動画の短縮アドレスが表示されます。このとき、[/]より後ろの部分が動画のIDです。
- このIDを使って以下のように記載すると動画が表示されます。
#youtube(EexXu1UhLMY)
- サイズ変更等、いくつかのオプションの利用も可能です。詳細については、以下のページをご覧ください（オプションの利用は必須ではありません）。
2.2. 演習２
あなたのページ内に、以下のようにして動画を掲載して下さい。場所はどこでも構いません。
***おすすめ動画 #youtube( ここに動画のID )
付記：動画の埋め込みはOKです。
YouTubeなどの「動画共有サイト」は、文字通り、動画を共有することを目的としているので、動画のリンクや、埋め込みコードは、そのサイト自身が提供してくれる・・という仕様になっています。したがって、あなたのページに動画を埋め込むことに、問題はありません。
但し、違法にアップロードされた動画は、それ自体が問題です。例えば、ミュージックビデオの類についても、公式サイト以外のチャンネルで個人がアップしたものは、違法である可能性があるので、そのような動画の埋め込み掲載は避けるようにしてください。
3. 画像の掲載
画像つまり、写真やイラストの掲載には、いくつかの予備知識が必要です。
はじめに、Web用の画像の最適化に関する知識が十分かどうか、確認・下準備を行なった上で、画像の掲載を行って下さい。
画像の掲載は本日の時間中に完了する必要はありません。GWが間に入りますので、ゆっくり学習して下さい。またパソコンがない場合は、この作業は難しいかと思います。実際の掲載は後回しにして、読んで知識を蓄えるだけでも構いません。無理はしなくて大丈夫です。
3.1. 画像の掲載に必要な予備知識
はじめに、画像データの取り扱いに関するあなたの現在の知識を確認します。画像の掲載には、少しだけ追加の学習が必要になります。以下、ご確認下さい。
- 画像ファイルを自由に移動できますか？
- スマホで撮影した写真をSNSにアップする
- スマホ・デジカメで撮影した写真をパソコンに取り込む
AirDrop、iCloud経由、GoogleDrive、MicroSDの取り出し・・など方法は何でも可
- 拡張子について知っていますか？
画像に限らず、コンピュータが扱うファイルには、ファイルの種類を明確にするために拡張子（一般に３文字程度）がつきます。以下例です。- sample.jpg ：JPEG形式の写真のデータ
- sample.docx：WORDで作成された文書データ
- sample.html：一般的なWebページのファイル
- 画像データの形式について知っていますか？
Webに掲載できる画像には、一般に以下の形式（拡張子）があります。- JPEG（.jpg）：細かな色の変化の多い「写真（自然物）」向きです
- PNG（.png）：スクリーンショットなどの「画像（人工的なもの）」向きです。また透明部分の処理がきれいなので、ロゴマーク等にも適しています
- GIF（.gif）：フラットな塗りの多いイラスト等で、効率よく圧縮がかかります。またこの形式は、複数枚の画像を内包することができ、それをアニメーション表示することも可能です。
- 付記：iPhone特有のHEIC（.heic）形式の画像は、Webに掲載できません。
Web用に利用するには、以下の２つの手段が考えられます。- 方法１. iPhone の設定・アプリ＞カメラ＞フォーマット＞互換性優先 に切り替える（JPEG形式での記録になります。こちらがおすすめ）。
- 方法２. 以下のような画像フォーマット変換サービスにアップして変換
https://convertio.co/ja/heic-jpg/
- 画像サイズを最適化できますか？
SNSにアップする場合と違って、画像はあらかじめWebに適したサイズにリサイズすることが必要です。ということは、「画像のサイズって何？」がわかっていなくてはなりません。さらに、画像のサイズを変更するための、サービスやソフトウエアについての知識が必要になります。
注）SNSの場合、利用者がアップした画像は、サービス側で最適なサイズに自動調整されています。しかし、WikiやブログなどのCMSや、自分でWebサイトを作る場合は、制作者側で画像のサイズをWeb用に最適化する必要があります。
以上、ご自身の経験上、問題なければ、先へ進んでください。
画像の最適化について自信がない方は、以下のページをお読み下さい。
画像のサイズを変更するためのWebサービスも紹介しています。
3.1.注1）いや、面倒な話は抜きで、とりあえず試したい・・という方へ
- 右のモナリザの画像を「右クリック＞画像をダウンロード」で手元に落として下さい。
- それを、以下の説明に沿ってアップ・掲載をお試しください。
- この画像は、PublicDomain つまり著作権切れで自由に使えるので、あなたのページにアップしても、問題ありません。
3.1.注2）画像のリサイズが簡単にできるオンラインツール
以下、２つ紹介します。Google Squooshがおすすめです。
- Google Squoosh：https://squoosh.app/
参考：Google Squooshの使い方
- Bulk Resize Photos：https://bulkresizephotos.com/
参考：Bulk Resize Photosの使い方
3.2. Wikiへの画像の掲載手順
- 3.2.1
画像はそれを掲載するページにアップロード（添付）することが前提です。- 今見えているのが自分のページであることを確認して下さい。
- 500KBを超えるデータのアップロードはできません。
- 3.2.2
画像を掲載するページのフッター（ページの一番下の部分）で「UPLOAD」のボタンをクリックしてください。
- 3.2.3
ファイルのアップロードを促す画面が表示されるので、「ファイルを選択」をクリックして手元の画像を選んでください。
- 3.2.4
管理者パスワードが要求されますが、みなさんが今使っているパスワードと同じものです。入力して、[アップロード]して下さい。- アップロードに成功すると、ページ名の部分に「・・アップロードしました。」というメッセージが表示されます。
- 何も表示されない場合は、失敗しています。
- 500KBを超えるデータのアップロードはできない仕様になっています。
- 3.2.4 - 注
ご注意下さい。アップした時点でインターネット上に公開です。誰かにダウンロードされたら取り返しがつかないので、公開してはいけない画像を絶対にアップしないようお願いします。
- 3.2.5
アップロードが完了すると、ページには、右図のように、画像が添付ファイルとして表示されます。この事例では、「sample.jpg」という名前の画像がページにアップロードされています。
- 3.2.5 - 注
間違えてアップロードした場合の削除は？
添付ファイルの右側にある「詳細」ボタンをクリックすると、画像の情報が表示されます。そこに「名称変更」や「削除」のラジオボタンがあるので、パスワード（同じです）を入力して、削除を実行して下さい。
- 3.2.6
次に、ページの編集を行います。ページフッターのEDIT から編集画面に入り、画像を表示させたい場所で以下のようにと書いて更新して下さい。#image(sample.jpg)
sample.jpg の部分は、掲載する画像のファイル名です。あなたがアップロード（添付）した画像のファイル名に変更して下さい。
- 3.2.7
以下のように、サイズ調整、レイアウトが可能です。- 画面幅の 50%・左寄せで表示
#image( 画像ファイル名 , left , 50% )
- 画面幅の 20% で横に並べて表示
&image( 画像ファイル名 ,, 20% ); &image( 画像ファイル名 ,, 20% ); ・・・
- 画面幅の 50%・左寄せで表示
- 3.2.7 - 注
説明では、読みやすくするために項目間に余白を作っていますが、実際にコードを記述するときは、スペースを含まないように記載して下さい。#image( sample.jpg , left , 50% ) ← ダメです。 #image(sample.jpg,left,50%) ← OK。
3.3. 画像の「回り込み」とその解除
画像を左右に振った場合、その下の文章が空いたすき間にせりあがってきます（これを「回り込み」といいます）。これを回避するには、「回り込み解除」を意味する、以下のコードを記述して下さい。
#clear
具体例
#image(images/sample.jpg,right,30%) Lorem Ipsum is simply dummy text of the printing and typesetting industry. #clear [ここから次のブロックの文章] Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
[ここから次のブロックの文章] Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
3.4. 演習３
あなたのページ内に、以下のようにして写真を掲載して下さい。場所はどこでも構いません。
アップロードする前に、必ず画像データのファイルサイズを確認して下さい。１枚の写真が300KBを超えているときは、リサイズして下さい。数十KB〜 200KB 程度が適正とお考えください。
- 手元にある画像のサイズを確認するには
- Macの場合：画像ファイルを右クリック＞情報を見る
- Windowsの場合：画像ファイルを右クリック＞プロパティー
- 中央に画面幅の50%サイズで表示する例
#image(sample.jpg,center,50%)
- 画面右側にプロフィール画像を小さく表示する例
#image(myFace.jpg,right,15%)
付記１：写真は原則あなたのオリジナルに限ります。
インターネットからダウンロードした画像等をアップすることは、著作権法上問題です。あなた自身が撮影した写真、あるいは、あなたが描いたイラスト等、オリジナルのものをアップするようにして下さい。
付記２：PD（PublicDomain）の画像は自由に掲載可能です
PD（PublicDomain）というのは、著作権の有効期限が切れて、世界の共有財産となった著作物のことです。例えば、以下をご覧ください。
Hiroshige, Travellers surprised by sudden rain.jpg
ダビンチのモナリザや、北斎・広重の浮世絵といったものは、自由に利用することが可能です。Wikimedia Commons には、そうした画像が大量に掲載されています。「C（Copyright）」のマークに斜め線が入って public domain と表記があるものは、あなたのサイトに掲載したり、またその画像でT-シャツを作って売る・・なども可能です。
あと、この著作権では、いろいろなトラブルがあるので、以下のページを読んでおいて下さい。
学科サイトで「特設/」となっているページは、メンバーとしてログインしないと読めないページです。
はい。お疲れ様でした。
第２回目は、以上の体験をもって終了とします。時間に余裕のある方は、個人ページのさらなる充実を図って下さい。
APPENDIX
先輩のページを参考にして下さい
ソーシャルデザイン学科では「情報をオープンにする」というインターネット考え方に沿って、サイトの編集に関しては、メンバー全員が共通アカウントで関わることができるようにしています。
編集が上手な先輩のページを見つけたら、編集画面を開いて、その書き方を学んで下さい。この学科では、代々そうして全員のスキルアップを図ってきました。参考にされて怒る先輩はいませんのでご安心ください。また、みなさんも来年は、後輩に参考にされるようなページづくりを目指してください。
当然ですが、先輩のページは見るだけです。間違って「更新」ボタンを押さないよう、十分ご注意ください。
学科の皆さまへのお願い
学科サイトのトップページ Today's Recommended Video（本日のおすすめ動画）の掲載にご協力ください。トップページの動画は、学生、教員に関係なく、当学科のメンバーであれば誰でも更新できる・・というルールになっているので、面白い動画を見つけたら、是非みんなに紹介して下さい。
ルールは以下のとおりです。
- Today's Recommended Video という見出しの直下に掲載して下さい。
- 直前の動画掲載から24時間以上経過していることを確認して下さい。
ページフッター部分に更新のタイムスタンプがあります。 - 前の人の掲載情報は 消さずに、行頭の // でコメントアウトして下さい。
毎月、月間アーカイブを作っています。そこに残すために「前の人の掲載内容は消さないで下さい」というルールになっています。 - 違法にアップされた動画（TV番組の録画など）の掲載はお控え下さい。
第３回について
次回も同様に、授業開始前に、ページを更新・アップするので、授業時間を中心に、同様に演習を行なって下さい。
遠隔授業が５月20日までに延長されましたが、その先の状況も不透明です。教員は、基本的にこの「授業のページ」に、説明と作業課題等を記載し、受講生の方は、学科サイトの、自身のページで情報を公開、教員はそれを確認し、コメントする・・という流れで進めますので、以後、引き続き、よろしくお願いします。