LogoMark.png

QuickGuide のバックアップソース(No.2)

#author("2020-04-20T19:30:34+09:00;2020-04-20T19:29:23+09:00","default:inoue.ko","inoue.ko")
*QuickGuide
~

***はじめに
[[PukiWiki>https://pukiwiki.osdn.jp/]] は Webブラウザから簡単にページの発行・編集などが行なえる、コンテンツ管理システムです。 メニューを含め、すべての区画が「ページ」として作られているので、サイトを柔軟に再構築することができます。 Wikipedia と同様の [[Markdown]] 形式なので、編集記法を学習することがグローバルスタンダードなスキルの向上に繋がります。
~

***利用者ID とパスワード
限定公開ページの閲覧、記事の編集、ファイルのアップロードの際に、利用者IDとパスワードが求められます。事前にメール等でご案内しています。

~

***はじめに現在のページ名をご確認下さい
Wiki はページ単位に管理されるものなので「ページ名」は非常に重要な情報要素となります(HTML上では<h1>要素として扱われています)。

Wikipedia 等では、ページの最上部に大きく表示されますが、様々な使い方を想定している当サイトでは、視覚的な配慮から、''ヘッダーのロゴの直下に小さく @ とともに掲載されています''( ↖︎ あのあたり)。ちなみに、このページのページ名は、[[QuickGuide]]です。

#image(PageName.png,right,30%)
-例えば、JohnSmith さんのページであれば、右図のようにロゴの直下に''@JohnSmith'' と表示されます。

-基本的に、あなた(このWikiサイトへの参加者)が編集するページは、''個人のメインページ(「自分の名前」)''と、''個人のサブページ(「自分の名前/科目名」、「自分の名前/MEMO」など「/ 」接続された形式のページ)''のみである・・とご理解ください。

-ページの編集中は「 @◯◯◯◯ の編集」、また画像をアップロードした場合には、「@◯◯◯◯ にアップロードしました。」などといった文字列を伴って表示されます。
~
~

**編集・新規作成・削除

***ページを編集・更新するには
#image(EditButton.png,right,30%)
-編集対象となるページ(あなた自身の名前がページ名となっている個人ページ)を表示して、ページフッター(ページの一番下)にある''「EDIT(編集)」''のボタンをクリックしてください。

-ここで、利用者ID、パスワードが求められます。事前にお伝えしたものを入力して、ログインしてください。

#image(EditWindow.png,right,30%)
-ログインに成功すると、右のような編集画面が表示されます。 
-試しに、適当な文字を書いてみてください。 
-編集後に「更新」を押して下さい。編集した結果がページに反映されます。この時点で情報は''世界に公開されます''。
~

***新規にページを作成するには
-ページフッターの「NEW」のボタンをクリックして、ページ名を入力して下さい。OK すると編集画面になります。
-あとは、上記の編集のプロセスと同じです。
~

***ページを削除するには
-編集画面内ですべての記述を削除して「更新」すると、ページが削除されます。
-間違ってページを作成してしまった場合は、この方法で削除してください。
-くれぐれも、必要なページを削除しないよう、''現在のページ名を再確認してから''、行なってください。
~
~

**ページ内の編集記法
***基本3要素
記事の基本要素は、''見出し・本文・箇条書き'' です。これを正しく、使って記事情報を構成することができれば、仕事の8割は完成すると思ってください。
&small(ちなみにこのページも、見出し・本文・箇条書きと、画像が数点だけでできています。);

-行頭に''半角アスタリスク [ * ]'' を付けると''見出し''になります。見出しは大きく、以下の3種類があります。ページ内の記事は、この見出しのレベルを使い分けることで整理できます。
 *: 大見出し 
 **:中見出し 
 ***:小見出し

-編集画面で入力した文章はそのまま''本文段落''として表示されます。
ワードプロセッサでの記述とWeb記事の違いで、ちょっと違和感を感じるであろう点は、複数行の空改行が画面には反映されないということです。
画面上で大きく行間を開けたい場合は、''半角のチルダ記号 [ ~ ] を行頭に''入力して下さい。
 ~

-''行頭にハイフン ( - ) ''を付けると''箇条書き ( リスト )'' になります。見出しと同様に、リストも3段階の階層化が可能です。
 *: 大見出し 
 **:中見出し 
 ***:小見出し
~

***特殊な記法
-''行頭に半角スペース''があると、''整形済みテキスト''として、通常であれば、Wikiの記法として処理されてしまう記号などをそのまま画面に反映させることができます。一般の本文と区別するために、以下のように「グレー背景で囲み表示」になります。
 *大見出し ← 実際に大見出しとしてではなく、そのまま表示されます。
 この部分は、行頭に「半角スペース」があります。

-''行頭に半角の2連スラッシュ [ // ] を書くと、その行は、編集画面の中のみに表示されるコメントとなります。
 // この部分はコメントとして、編集画面の中のみに表示されます。
 // このようにして、非表示にすることを「コメントアウト」と言います。
~
~

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

***内部リンク
-Wikiでは、''既存のページ名を二重括弧 [[ ]]で括る''だけでリンクになります。
 [[九産花子]]  ← 九産花子さんのページへジャンプします。

-以下のように''リダイレクト記号 [ > ] ''を用いると、任意の文字列から必要なページへジャンプさせることもできます。
 詳細は [[こちら>EditGuide]] をご覧ください。
詳細は [[こちら>EditGuide]] をご覧ください。
~

***外部リンク
-Wikiでは、''URLを直接記載する''だけでリンクになります。
https://www.kyusan-u.ac.jp

-以下のように''リダイレクト記号 [ > ] ''を用いると、任意の文字列から必要なページへジャンプさせることもできます。
 [[九州産業大学>https://www.kyusan-u.ac.jp]]
[[九州産業大学>https://www.kyusan-u.ac.jp]]

~

***付記:リンクに許諾は不要です
重要なことですが、''リンクするのに相手の許諾は不要です。''よく、「勝手にリンクしていいんですか?」という質問を受けることがありますが、リンクというのは、閲覧を誘導しているだけなので、著作権侵害にはあたりません。
 Webサイトというものは、あちこちからリンクされる(被リンク数が多い)方がサイトの価値が上がって、検索ランキングも上がるので、リンクされることは「うれしいこと」なのです。リンクを張っておくと有益・・と思われるサイトは、見つけたらすぐ、自分のページにリンクしてしまいましょう。
~
~

**画像の掲載
画像つまり、写真やイラストの掲載には、いくつかの予備知識が必要で、順序としては、その学習が必要なのですが、とりあえず、先に手順を説明します。
~

***とりあえず掲載手順
-画像はそれを掲載したいページにアップロード(添付)することが前提です。

#image(Upload.png,right,30%)
- 画像を掲載したいページを閲覧している状態で、ページフッターの「''UPLOAD''」のボタンをクリックしてください。
-右のような画面が表示されるので、「ファイルを選択」をクリックして手元の画像を選んでください。
&color(red){ご注意下さい。アップした時点でインターネット上に公開です。誰かにダウンロードされたら取り返しがつかないので、公開してはいけない画像を絶対にアップしないようお願いします。};

#image(Attach.png,right,30%)
-アップロードが完了すると、ページには、右図のように、画像が添付ファイルとして表示されます。この事例では、「sample.jpg」という名前の画像をアップロードしています。

-次に、ページの編集を行います。ページフッターのEDIT から編集画面に入り、画像を表示させたい場所で以下のようにと書いて更新して下さい。  
 #image(sample.jpg) 
sample.jpg の部分は、あなたがアップした画像のファイル名です。

-以下のように、サイズ調整、レイアウトが可能です。
--画面幅の 50%・左寄せで表示
 #image( 画像ファイル名 ,left, 50% )
--画面幅の 20% で横に並べて表示 
 &image( 画像ファイル名 ,, 20% ); &image( 画像ファイル名 ,, 20% ); ・・・
~

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

-画像ファイルを取り出せますか?
--PCで編集する場合
カメラからSDカードを取り出してPCに挿す、クラウドドライブを経由してPCに取り込むなど、自分で撮った写真をPCに取り込む・・という作業が必要です。
--スマホで編集する場合
当サイトに画像をアップロードするには、スマホで撮った画像データがどこにあるのか、その所在を把握しておく必要があります。

-拡張子について知っていますか?
画像に限らず、コンピュータが扱うファイルには、ファイルの種類を明確にするために''拡張子''(一般に3文字程度)がつきます。以下例です。
--sample.jpg :JPEG形式の写真のデータ
--sample.docx:WORDで作成された文書データ
--sample.html:一般的なWebページのファイル
~

-画像データにはいくつかの形式があります。
Webに掲載できる画像には、一般に以下の形式(拡張子)があります。
--JPEG(.jpg):細かな色の変化の多い「写真(自然物)」向きです
--PNG(.png):スクリーンショットなどの「画像(人工的なもの)」向きです。また透明部分の処理がきれいなので、ロゴマーク等にも適しています
--GIF(.gif):フラットな塗りの多いイラスト等で、効率よく圧縮がかかります。またこの形式は、複数枚の画像を内包することができ、それをアニメーション表示することも可能です。
~

-画像サイズの最適化
SNSにアップする場合と違って、画像はあらかじめWebに適したサイズにリサイズすることが必要です。ということは、「画像のサイズって何?」がわかっていなくてはなりません。さらに、画像のサイズを変更するための、サービスやソフトウエアについての知識が必要になります。
~

ということで、画像の掲載には、前提となる知識と、その準備作業が必要なので、記事を別ページに移動させました。以下でご確認ください。
-[[EditGuide/Images]]
//-[[WebDesign/Images]](内容は上記とほぼ同じです)

~
~

**動画の掲載
当サイトでは、YouTube, Vimeo の動画を簡単に埋め込み掲載できるよう、拡張機能(プラグイン)を用意しています。以下のように 動画のIDを利用するだけで、簡単に動画を埋め込み掲載することができます。
~

***掲載手順
-動画のID を取得します。例えば、動画のURL(アドレス)が以下のかたちであれば、v= の後の文字列 ''EexXu1UhLMY'' が動画のIDです。
https://www.youtube.com/watch?v=EexXu1UhLMY

-このIDを使って以下のように記載すると動画が表示されます。
 #youtube(EexXu1UhLMY)
#youtube(EexXu1UhLMY)

-詳細については、以下のページをご覧ください。
--[[Plugin/YouTube]]
--[[Plugin/Vimeo]]
~

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









**