Whiteboard
情報デザイン演習IIIA｜情報デザイン専攻｜ 木曜１・２限 デジタルラボ 504
学園サーバーFTP接続先：ftp.ip.kyusan-u.ac.jp（ 133.17.4.74 ）
ローカルホスト：http://localhost:8888/
第15回
プロジェクト情報のまとめ
- 学科サイトの個人ページにプロジェクトの概要をまとめて下さい。
学科サイト＞情報デザイン演習IIIA - ページのまとめ方については、３・４年生のプロジェクトページを参考にしてください。
成果発表
- 10:10〜
- 内容
- プロジェクトの概要（再確認）
- 成果物
- プロジェクトの今後について
第11-14回
プロジェクトの遂行
- 各自、テーマに沿って作業を進めて下さい。
- 学科サイトの個人ページに本日の作業記録を詳細に記載して下さい。
学科サイト＞情報デザイン演習IIIA
ルートアドレスからpukiwikiディレクトリへ自動転送する方法
以下のようなファイルを作って、index.html としてルートに置くと、ルートへのアクセスから、pukiwikiディレクトリへ自動転送されます。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="0;URL=http://example.com/pukiwiki/">
<title>SamleSite</title>
</head>
<body>
</body>
</html>
- content="0;URL=http://example.com/pukiwiki/"
- 0 は自動転送までの時間です。速攻移動であれば 0 です。
- URL= の部分に移動先のアドレスを記載します。
補足講義
- Wiki の導入に必要な事項
- 参加者の情報共有に対するモチベーションを上げる
- 初動チームの立ち上げ（スキルを持つ人材の養成）
- 参加者全員が楽しめる「個人ページ」の準備
- 初心者が執筆に迷わないよう、パターン別の「雛形」を作成
- 編集ガイド等のマニュアルの整備
- ナビゲーションのデザインについて
参考記事：NavigationDesign - PukiWikiのカスタマイズにおけるフォーマットチェックについて
参考ページ：FormatCheck - Wiki で使われる Markdown 記法について
参考記事：Markdown
- CSSの書き方について
参考記事：CSS/CodingRule - 「追加のCSS」という発想について
参考記事：PukiWiki/Customize - レスポンシブデザインのブレイクポイントについて
参考記事：ResponsiveDesign
- GitHub を利用したWebサイトの公開について
参考記事：GitHubPages
注）ソースをまるごと簡単にDLできるようになります。それは困る・・という場合は利用を控えてください（ただし、そもそもWebで公開したページの中身はブラウザからすべてダウンロード可能です。単に簡単にできるか、一手間いるか、それだけの違いです）。
第10回
プロジェクトの遂行
- 各自、テーマに沿って作業を進めて下さい。
- 学科サイトの個人ページに本日の作業記録を詳細に記載して下さい。
学科サイト＞情報デザイン演習IIIA
情報科学研究科プロジェクトの方へ
- 10:00以降、成先生が来室されます。現状報告の準備をお願いします。
- サイト制作の目的・趣旨の確認
- サイトマップ
- ワイヤーフレーム
- サイトのカラーサンプル、ロゴマークのサンプル等（方向性の見極め）
- 今後のスケジュール
第９回
プロジェクトの遂行
- 各自、テーマに沿って作業を進めて下さい。
- 学科サイトの個人ページに本日の作業記録を詳細に記載して下さい。
学科サイト＞情報デザイン演習IIIA
PukiWiki サイトの開発について
- PukiWiki はデータベースサーバーを使わないアプリケーションであるため、ローカルで開発したものを、そのままサーバーへアップするかたちで実運用へ移行することが可能です。
- また利用者による記事の更新とサイトのデザイン（SKIN）の更新を同時進行で進めることも可能です。以下概念図をご覧ください。
PukiWiki サイトの開発イメージ（Made with Draw.io）
- 参考：Draw.io について
第８回
プロジェクトの遂行
- 各自、テーマに沿って作業を進めて下さい。
- 学科サイトの個人ページに本日の作業記録を詳細に記載して下さい。
学科サイト＞情報デザイン演習IIIA
中間報告 10:10 -
- 取り組みテーマ、現状（要求）分析、サイトマップ等、現状の報告。
第７回
プロジェクトの遂行
- 各自、テーマに沿って作業を進めて下さい。
- 学科サイトの個人ページに本日の作業記録を詳細に記載して下さい。
学科サイト＞情報デザイン演習IIIA
事務連絡
- 10:00-10:30 情報科学研究科との打合せ。メンバーとともに一時退席します。
- 急ぎの連絡があれば LINE 18AS にてお知らせ下さい。
PukiWiki 補足
- HTML構造（ワイヤーフレーム）のカスタマイズについて
PukiWiki/Customize
プロジェクトチーム用のページ
第６回
プロジェクトの遂行
- 各自、テーマに沿って作業を開始して下さい。
- 学科サイトの個人ページに本日の作業記録を詳細に記載して下さい。
学科サイト＞情報デザイン演習IIIA
プロジェクトの立ち上げに関連して
Webプロジェクトのワークフロー
- WebDesign/Workflow
以下の２つは、必ず個人ページの記録として作成・アップして下さい。- サイトマップ
- ワイヤーフレーム
第５回
プロジェクトのテーマ設定
- 各自、本演習におけるプロジェクトのテーマを設定して下さい。
学科サイト＞情報デザイン演習IIIA
- 現在、依頼を受けている事項（希望者募集中）
- 九州産業大学 大学院 情報科学研究科 公式サイト（PukiWiki）
現状１：https://www.kyusan-u.ac.jp/faculty/daigakuin/joho/
現状２：http://www.kyusan-u.ac.jp/daigakuin/jyoho_kagaku/index.html - 九州産業大学 ArtSpace+50 サイトリニューアル（PukiWiki）
現状：http://art.kyusan-u.ac.jp/artspace/
- 九州産業大学 大学院 情報科学研究科 公式サイト（PukiWiki）
PukiWiki サイト開発の前提
開発者自身が PukiWiki の使い方を熟知しておく必要があります。
- 以下のような機能については、PukiWikiのプラグインを活用すれば解決します。自分でプログラムやCSSを作り込む必要はありません。
- 検索機能：＃search プラグイン
- 投稿機能：＃article、 ＃comment プラグイン
- 最新の更新の表示：＃recent プラグイン
- 他のページの読み読み込み機能：＃include プラグイン
- 部分的な文字色の変更：＆color(red){・・・・}; プラグイン
- 部分的な文字サイズの変更：＆size(12){・・・・}; プラグイン
- 表組み：｜ (縦ストロークの利用)
- 囲み表示(整形済みテキスト)：行頭に半角スペース
- 左寄せ・センタリング・右寄せ：LEFT：、CENTER：、RIGHT：
参考：EditGuide
- PukiWikiの記法とHTMLタグの関係理解
Wikiの記法がどのHTMLタグに対応するのか、その対応関係を知っておくことが必要です。以下、主なものを挙げます。要素 Wikiの記法 HTMLタグ ページ名 Wikiページ名 h1 大見出し * h2 中見出し ** h3 小見出し *** h4 箇条書き レベル１ - ul.list1 li 箇条書き第 レベル２ -- ul.list2 li 段落 記述+改行 p 整形済みテキスト 行頭半角空白 pre 引用 行頭に ＞ blockquote p.quotation リンク [ [ ] ] a 強調 ’’文字列’’ strong 斜体 ’’’文字列’’’ em 取消線 ％％文字列％％ del
学科サイトの個人ページで、プラグインの活用を含め、様々な書き方を試して下さい。また、ブラウザの分析ツールで、それぞれどのようなタグに置き換わっているか確認して下さい。
第４回
PukiWiki のカスタマイズ
- PukiWiki ファイル構成と初期設定情報の確認
- PukiWiki/Customize カスタマイズ（サンプルスキンの提供）
- 各自 SubMenuに PukiWikiサイトへのリンクを張って下さい。
学科サイト＞情報デザイン演習IIIA
第３回
はじめに
- 前回の復習：各自以下の操作を確認してください。
- ローカルでサーバーを起動
- ドキュメントルート（htdocs）に .html、.php などを置く
- ブラウザからアクセス
http://localhost:8888/
続・PHP入門
サーバーに置かれたファイルの操作を体験します。
- PHP/Sample02 事例５の簡易アクセスカウンタを体験
サーバーがファイルを書き換える（更新する）プログラムを作成する場合、ファイルのパーミッションを変更する必要があります。
PukiWiki 導入
オープンソースのCMS、PukiWiki の導入について解説します。
- 公式サイト：https://pukiwiki.osdn.jp/
ここから、pukiwiki 本体 をダウンロードしてください
第２回
はじめに
- 前回の復習：各自以下の操作を確認してください。
- ローカルでサーバーを起動
- ドキュメントルート（htdocs）にHTMLファイルを置く
- ブラウザからアクセス
http://localhost:8888/
PHP入門
- PHPとは何か ＞ PHP
- 初歩のサンプルプログラム ＞ PHP/Sample01
- サンプルは、前期の Webデザイン実習と同様に WWW-KSU/samples/直下にアップロードして下さい。
- また前期同様に、各自のWebサンプル集のページ [ 氏名/WebSample ] に、中見出し [ **PHP ] を付けた上でリンクを張って下さい。
第１回
ガイダンス
- 演習の目的と概要 > 情報デザイン演習IIIA
- 課題への取り組み方について
- 成果物の発表 ＞ 学科サイト/情報デザイン演習IIIA
- 事務連絡：StarFree サーバーをお持ちの方、更新手続きをお忘れなく。
https://www.star.ne.jp/free/
演習の主テーマ Webプロジェクト
本演習では、前期のWebデザイン実習で修得した技術をベースに、身近な方々や団体の情報共有を支援するWebサイトの構築に取り組みます。
- ソーシャルデザインの体験を目的とした無償の取り組みです。
- 地域を活性化する「面白い」仕組みを提案することが前提です。営利目的ページ作成は行いません。
- 商取引き、決済関係の仕組みにはタッチしません。
- 数人でチーム、あるいは個人プロジェクト、いずれでも構いません。
知識・技術に関する補足講義
クライアントからの要求が CMS となることが多いため、前提となる知識や技術について、補足の講義を行います。
- Webサーバー入門
- ネットワークに関する基礎知識 ＞ Network
- 開発環境（ローカルサーバー）について ＞ WebServer
- レンタルサーバーについて ＞ RentalServer
- PHP入門
PHPを用いたサーバーサイドのプログラミングを体験します。