pg13
デザインツールをデザインする話
Glispを紹介する。
今回の演習課題では使用しないがデザインツールを作るところから始めるデザインについて考えてみてほしい。
Glispは橋本 麦 氏（@_baku89）が実験・開発中のグラフィックデザインツールとプログラム開発ツールを融合させた独自のデザインツール
グラフィックのデザイン画面の図形とコード画面の図形描画コマンドが双方向評価により互いに接続されおり、
「コードをいじる→図形が変化」も「図形をいじる→コードが変化」
が実現されている。つまり、デザイン画面で図形を操作することでコードを作成・調整するようなことが可能。
試すにはこちらから： Glisp
開発コンセプトについて： マシな作り方の作り方を作る
lispは最古の部類のプログラム言語。
以下の画像のようなウェブページを作成する（ロゴ画像も各自でデザインする）
演習１
■ステップ１
Webサーバを起動する
スタート → XAMPP → XAMPP Control Panel
コントロールパネルが表示されたら
Apacheの行の start ボタンを押す
XAMPP（ザンプ）はWindowsでWebアプリケーションを構築する開発環境です。Mac版のMAMPPもあります。どちらもLinux版のLAMPPが元になっています。XAMPPにはWebサーバのApache、データベースサーバのMySQLなどが含まれています。開発言語はPHPを使います。
■ステップ２
WebページをVisual Studio Code（テキストエディタ）で編集する
スタート → Visual Studio Code → Visual Studio Code
■ステップ２a
VS Code のファイルの保存フォルダを設定する
File → Open Folder
場所を移動する
PC → ローカルディスク（D:） → xampp → htdocs
「フォルダーの選択」ボタンを押す
Webサーバ（Apache)のドキュメントルート（htdocs）をvs codeの保存先フォルダに設定できた。続けてHTDOCSフォルダの中で次の作業をする
■ステップ２b
HTDOCSフォルダの中に学籍番号のフォルダを作成する
以下の画像のように①の部分をクリックしてから②のフォルダ作成ボタンを押す
■ステップ２c
Web用のファイルを学籍番号フォルダの中に新規作成する。
ファイル名 index.html
以下の画像のように
①で学籍番号のフォルダを選び、
②でファイル作成ボタンを押す
作業完了の様子
■ステップ３
HTML という言語でWebを作成します。
ファイル index.html に以下の内容を記述する（コピペOK）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
学籍番号
名前
Webページを作りました
</body>
</html>
< > で囲まれた英単語は タグ と言います。
全角文字の部分はブラウザに表示されるテキストです。
テキストと異なりタグはブラウザに表示されません。
タグでテキストなどのコンテンツの処理方法を指定します。
ネタ： 生物になったHTML https://twitter.com/SaadAbedine/status/940089276951289856
■ステップ３a
ファイルを保存する。ファイル保存ボタンを押す。
ファイル未保存マーク
ファイル保存アイコン
■ステップ４
確認作業：ブラウザ（Chrome）で作成したWebページを表示する
アドレス（URL）に入力 localhost/学籍番号
NBU WiFiに接続したiPadなどの端末から表示を確認するには http://192.168.201.アドレス番号/学籍番号を入力する。
※アドレス番号に用いる数値は受講生の利用しているPC番号＋１の数値。（先頭０は用いない。例）PC01なら2）
http://localhost/3120999/ は http://localhost/3120999/index.html の省略形。このアドレスで3120999フォルダ内のindex.html ファイルにアクセスできる。
■ステップ４a
記述内容を修正する
<p> パラグラフ（段落タグ） と <br>（改行タグ）を利用して文章を整形する
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>
学籍番号<br>
名前
</p>
適当に行をあける
<p>
Webページを<br>作りました
</p>
</body>
</html>
■ステップ４b
ブラウザで index.html を再読み込みする。リロードボタンを押す。
演習２
WebページにSVG画像やyoutube の動画やGoogleMapの地図などのコンテンツを埋め込む。
■ステップ５
index.htmlに次の行を追加する。コピーする場所は <body>タグの下。
<object type="image/svg+xml" data="logo.svg" width="1024" height="512"></object>
画像ファイル logo.svgは後で用意する。画像の幅width と 高さheight は後で調節する
■ステップ５a
Googleで 名古屋文理大学 を検索して 埋め込み用のコード をindex.htmlにコピーする。場所は </body>タグの上。
地図を検索 → 共有 → 地図を埋め込む → HTMLをコピー
埋め込み用コードの例）コピペして利用してOK
<iframe src="https://www.google.com/maps/embed?pb=!1m23!1m12!1m3!1d11611.524542302512!2d136.79242055451206!3d35.246946513640324!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m8!3e6!4m0!4m5!1s0x6003a035fe08c113%3A0xd547ddc07a557d48!2z5ZCN5Y-k5bGL5paH55CG5aSn5a2m!3m2!1d35.248324!2d136.79141199999998!5e0!3m2!1sja!2sjp!4v1512668290787" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
■ステップ５b
youtubeで 名古屋文理大学 を検索して 埋め込み用のコード をindex.htmlにコピーする。場所は </body>タグの上。
動画を検索 → 共有 → 埋め込み → コピー
埋め込み用コードの例）コピペして利用してOK
<iframe width="560" height="315" src="https://www.youtube.com/embed/VQy19Mx5lNU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
■ステップ５c
ブラウザで index.html を再読み込みする。リロードボタンを押す。
演習3：
グラフィックス編集ソフト Inkscape でタイトルロゴを作成する。画像のフォーマットは SVG(Scalable Vector Graphics)で作成する。
■ステップ１
Inkscapeの起動：
スタート → Inkscape
実習室では初回起動には1分～2分以上の時間がかかります。
■ステップ２
Inkscapeの設定を調整する。
編集 → Inkscapeの設定
入出力 → SVG出力
無用な style プロパティの扱い
styleのプロパティを除去する
チェックを入れて有効にする
属性と style プロパティのチェック
保存時
チェックを入れて有効にする
■ステップ３
Inkscapeの基本操作を練習する。
Inkscapeでアニメロゴ作成(1/4)
オブジェクト操作
Inkscapeでアニメロゴ作成(2/4)
ペンツール
Inkscapeでアニメロゴ作成(3/4)
オブジェクトをパスに変換
パスの編集
テキストをパスに変換
■ステップ４
ロゴを作成する。
・テキストツール でロゴの元となる文字をテキストオブジェクトに入力する
・位置やサイズを調整する
・パス → オブジェクトをパスへ
でテキストオブジェクトをパスに変換する
・フィル（塗）を除去（× を選択）する
・ストローク（線）の色を設定する（シフト＋クリックで色を選択）
・画面左下隅のストロークをクリックして、フィル/ストロークメニューを表示する。
線の幅（太さ）を調整する（マウスホイール回転）
余力があれば続けて、
・オブジェクトツールで一文字ずつ選んで位置を移動する
・ノードツールでパスを編集する。
■ステップ４a
Web用に画像の設定を変更する
ファイル → ドキュメントのプロパティ
ページサイズをコンテンツに合わせて変更 → ページサイズを画面全体または選択オブジェクトに合わせる
■ステップ４b
ファイルを保存する
ファイル → 名前を付けて保存
場所を移動する
PC → ローカルディスク（D:） → xampp → htdocs → 3120999(自分の学籍番号)
ファイル名 logo.svg で保存
■ステップ５
ロゴにアニメーションを設定する
Inkscapeでアニメロゴ作成(4/4)
テキストのストロークに
VIVUSでアニメーションを追加
■ステップ５a
logo.svg ファイルをファイルエクスプローラーで表示しておく
■ステップ５b
VIVUSのWebサイトにアクセスする
・アドレス http://maxwellito.github.io/vivus/
VIVUSはGoogle Chromeから開く。IE11では不具合が発生する。
・TOPページ下部にある Vivus Instant のリンクを開く。
・logo.svg をファイルエクスプローラからVIVUSの画面にドラッグ＆ドロップする。
・左サイドメニューを適当に調整する
Loop の On/Off
時間 Durationの設定（アニメーション開始から終了までの時間、ループ開始までの時間など）
・Updateボタンを押してアニメーションの様子を確かめる
・Download ボタンを押してダウンロードする
■ステップ５c
・DownloadしたアニメーションロゴのSVGファイルのファイル名を
logo_animated.svg から logo.svg
に変更する。
Chromeでダウンロードした場合は下の画像の様にフォルダを開いてから操作すればよい。
■ステップ５d
ダウンロードして名前を付け替えた logo.svg をVS CODE の学籍番号フォルダの中のlogo.svgにドラッグ＆ドロップして入れ替える。
replace （置き換え）の確認画面があらわれるので、replaceボタンを押す。
■ステップ５e
作成したWebページを表示しているブラウザの更新ボタンを押して動作確認する。
課題提出
今回作成したWebページをスクリーンショットしてWebclassに提出する。
出来たところまででよい。
おまけ
CSSファイルを設定して背景を作成する。
キーワード「CSS 背景 サンプル」で検索してCSSのサンプルを見つける。
例）【コピペOK！21選】CSSでストライプ柄の背景を実装する方法！サンプルコード有
次の画像の様に
body.css ファイルを作成して
コードを張り付けて
index.htmlを修正する
ファイルを保存してブラウザでリロードして確認する
下の画像②の body.cssファイルのコード（リンク先に掲載されていたもの）
body {
background-image: linear-gradient(
-45deg,
#dfdfdf 25%, /*1つ目の色の終点*/
#ffffff 25%, /*2つ目の色の始点*/
#ffffff 50%, /*2つ目の色の終点*/
#dfdfdf 50%, /*3つ目の色の始点*/
#dfdfdf 75%, /*3つ目の色の終点*/
#ffffff 75%, /*4つ目の色の始点*/
#ffffff /*4つ目の色の終点*/
);
background-size: 40px 40px; /*ストライプ線の太さ*/
}
下の画像③のindex.htmlファイルに追加したコード
<link rel="stylesheet" href="body.css">
他にも、「css 背景 チェック」で検索して見つけたサイト
から、次のコードを紹介する。
チェック柄2
元のサイトでは .bg とクラス名を指定していたが、ここでは以下のようにbody要素に変更してある。
body.cssファイルの内容を置き換えて利用する。
body {
width:100%;
height:260px;
background: linear-gradient(90deg, rgba(0, 0, 0, .5) 50%, transparent 50%),
linear-gradient(rgba(0, 0, 0, .5) 50%, transparent 50%);
background-color: #696969;
background-size: 40px 40px;
}
上のコードの配色
配色をアレンジした
VS CODEの CSSファイルの色を指定している部分にマウスを重ねて少し待つと色指定パネルが表示されるので利用するとよい。
