LogoMark.png

ソーシャルデザイン演習/2020/0430

ソーシャルデザインのための情報共有2

学科サイトの執筆方法2|リンクの形成、動画の掲載、画像の掲載
ソーシャルデザイン演習/20202020.04.30

第2回目の学習事項


以下、まずは目次を見て、授業の全体を把握してから、順に読み進めて下さい。

本日の目次


はじめに

前回に引き続き、学科サイトにおける個人ページの編集方法について説明します。本日のテーマは3つ。リンクの形成、動画の掲載、画像の掲載です。
 最初の2つは簡単ですが、画像の掲載については、アップする前に自分自身で画像のサイズを「Web用に最適化する」という作業が必要になります。
 では、順に、説明を読んで、各演習を行なって下さい。

前回の復習(基本の確認)

EditButton.png

1. リンクの掲載

リンクとは、あるページから別のページへと、クリックで誘導する要素のことです。通常リンクボタンとなっている要素の上にマウスを持っていくと、マウスがポインタに変わる、リンク文字の色が変わるなど、何らかの演出によって、そこがリンクであることがわかるようになっています。
 リンクには、同一サイト内の別ページにジャンプする「内部リンク」と、他所のサーバー上にあるページへジャンプする「外部リンク」の2つがあります。

1.1. 内部リンク

1.2. 外部リンク


1.3. 演習1

あなたのページの下の方に、以下の部分をコピー&ペーストして、いくつかのリンクを張って下さい。

***リンク集
-内部リンク
--[[ソーシャルデザイン演習]]
--[[◯◯◯◯/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. 動画の掲載手順

youtubeID.png

2.2. 演習2

あなたのページ内に、以下のようにして動画を掲載して下さい。場所はどこでも構いません。

***おすすめ動画
#youtube( ここに動画のID )


付記:動画の埋め込みはOKです。

YouTubeなどの「動画共有サイト」は、文字通り、動画を共有することを目的としているので、動画のリンクや、埋め込みコードは、そのサイト自身が提供してくれる・・という仕様になっています。したがって、あなたのページに動画を埋め込むことに、問題はありません。
 但し、違法にアップロードされた動画は、それ自体が問題です。例えば、ミュージックビデオの類についても、公式サイト以外のチャンネルで個人がアップしたものは、違法である可能性があるので、そのような動画の埋め込み掲載は避けるようにしてください。



3. 画像の掲載

画像つまり、写真やイラストの掲載には、いくつかの予備知識が必要です。
はじめに、Web用の画像の最適化に関する知識が十分かどうか、確認・下準備を行なった上で、画像の掲載を行って下さい。

画像の掲載は本日の時間中に完了する必要はありません。GWが間に入りますので、ゆっくり学習して下さい。またパソコンがない場合は、この作業は難しいかと思います。実際の掲載は後回しにして、読んで知識を蓄えるだけでも構いません。無理はしなくて大丈夫です。

3.1. 画像の掲載に必要な予備知識

はじめに、画像データの取り扱いに関するあなたの現在の知識を確認します。画像の掲載には、少しだけ追加の学習が必要になります。以下、ご確認下さい。

注)SNSの場合、利用者がアップした画像は、サービス側で最適なサイズに自動調整されています。しかし、WikiやブログなどのCMSや、自分でWebサイトを作る場合は、制作者側で画像のサイズをWeb用に最適化する必要があります。


以上、ご自身の経験上、問題なければ、先へ進んでください。

画像の最適化について自信がない方は、以下のページをお読み下さい。
画像のサイズを変更するためのWebサービスも紹介しています。


3.1.注1)いや、面倒な話は抜きで、とりあえず試したい・・という方へ

MonaLisa.jpg


3.1.注2)画像のリサイズが簡単にできるオンラインツール

以下、2つ紹介します。Google Squooshがおすすめです。

3.2. Wikiへの画像の掲載手順

Upload.png
Attach.png

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.
sample.jpg

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. 演習3

あなたのページ内に、以下のようにして写真を掲載して下さい。場所はどこでも構いません。
アップロードする前に、必ず画像データのファイルサイズを確認して下さい。1枚の写真が300KBを超えているときは、リサイズして下さい。数十KB〜 200KB 程度が適正とお考えください。


pct470020170217154233.jpg


付記1:写真は原則あなたのオリジナルに限ります。

インターネットからダウンロードした画像等をアップすることは、著作権法上問題です。あなた自身が撮影した写真、あるいは、あなたが描いたイラスト等、オリジナルのものをアップするようにして下さい。

付記2:PD(PublicDomain)の画像は自由に掲載可能です

PD(PublicDomain)というのは、著作権の有効期限が切れて、世界の共有財産となった著作物のことです。例えば、以下をご覧ください。
Hiroshige, Travellers surprised by sudden rain.jpg

ダビンチのモナリザや、北斎・広重の浮世絵といったものは、自由に利用することが可能です。Wikimedia Commons には、そうした画像が大量に掲載されています。「C(Copyright)」のマークに斜め線が入って public domain と表記があるものは、あなたのサイトに掲載したり、またその画像でT-シャツを作って売る・・なども可能です。

あと、この著作権では、いろいろなトラブルがあるので、以下のページを読んでおいて下さい。

学科サイトで「特設/」となっているページは、メンバーとしてログインしないと読めないページです。


はい。お疲れ様でした。
第2回目は、以上の体験をもって終了とします。時間に余裕のある方は、個人ページのさらなる充実を図って下さい。



APPENDIX

先輩のページを参考にして下さい

ソーシャルデザイン学科では「情報をオープンにする」というインターネット考え方に沿って、サイトの編集に関しては、メンバー全員が共通アカウントで関わることができるようにしています。

 編集が上手な先輩のページを見つけたら、編集画面を開いて、その書き方を学んで下さい。この学科では、代々そうして全員のスキルアップを図ってきました。参考にされて怒る先輩はいませんのでご安心ください。また、みなさんも来年は、後輩に参考にされるようなページづくりを目指してください。

当然ですが、先輩のページは見るだけです。間違って「更新」ボタンを押さないよう、十分ご注意ください。

学科の皆さまへのお願い

学科サイトのトップページ Today's Recommended Video(本日のおすすめ動画)の掲載にご協力ください。トップページの動画は、学生、教員に関係なく、当学科のメンバーであれば誰でも更新できる・・というルールになっているので、面白い動画を見つけたら、是非みんなに紹介して下さい。

ルールは以下のとおりです。


第3回について

次回も同様に、授業開始前に、ページを更新・アップするので、授業時間を中心に、同様に演習を行なって下さい。

遠隔授業が5月20日までに延長されましたが、その先の状況も不透明です。教員は、基本的にこの「授業のページ」に、説明と作業課題等を記載し、受講生の方は、学科サイトの、自身のページで情報を公開、教員はそれを確認し、コメントする・・という流れで進めますので、以後、引き続き、よろしくお願いします。




PAGES

GUIDE

DATA

Last-modified: 2020-04-30 (木) 14:59:29