6/20(金) 授業
今日の授業は、書籍チラシを制作しました。
先生から提供されたチラシのデータをもとにIllustratorを使ってコピー作品を制作しました。３時間で完成出来なかったのでへこみましたよ。。。
カフェのフライヤーを作成（120mm x 120mm）
授業でカフェのフライヤー（CDジャケットサイズ）を作成しました。
白黒.ver
カラー.ver
カラー.verは、フライヤーではなくチラシになってしまいました。。。
失敗です。。。
先生のアドバイスは、
①フライヤーとはチラシとは違う
②手にとってもらえるデザインにする事
③不明確（情報はたくさんないほうがいい）が必要で興味を持たせる（どんなお店なんだろうと興味を持たせる）
でした。
そういえば、CDショップにあるフライヤーってそうだよな！って思いました。
Sublimetext2を導入してみた
SublimeText 2 を導入しましたので、導入方法を紹介します。
SublimeText 2 をダウンロードする。
公式のサイト（http://www.sublimetext.com/2）から、自分の環境にあったファイルをダウンロードしてきてください。
※OSは、Windows,Mac,Linux に対応しています。
初期設定
アプリを立ち上げて、Sublime text2 → Preference → Settings Userを開く。
ショートカットキーは、 command + , です。
「Preferences.sublime_settings」のタブが立ち上がります。
私は下記の設定を記述しました。
他にもいろいろ設定出来るみたいなので検索していろいろ設定してみて下さい。
設定を保存して再起動をします。
{
//フォントサイズ
"font_size": 12,
//行間
"line_padding_top": 5,
//タブサイズ
"tab_size": 4,
//タブやスペースなどの不過視文字を表示
"draw_white_space": "all",
//現在の選択行をハイライト表示
"highlight_line":true,
//自動改行
"word_wrap": true
}
作業がしやすい環境にするためPackageをインストール
Packageとは、作業がしやすくするための拡張機能のことです。
Packageをインストール出来るように準備をする
Packageをインストールするためには、「Package Control」が必要になるのでインストールします。
View → Show Console を選択すると、画面の一番下に枠が表示されカーソルが点滅されています。この枠の中に、下記のコードを記述します。
import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
記述したら Enter を押し実行して SublimeText 2 を再起動（ SublimeText 2 を終了して起動）します。
SublimeText 2 → Preferences → Pacage Control が表示されたらOKです。
これで、 Package をインストールする準備が整いました。
※記述したコードはこちら（ https://sublime.wbond.net/installation#st2 )を参考にしました。
Packageをインストール
まず、インストールの方法を教えます。
①Ctrl+Shift+P を押すと画面が出てきますので、install と入力し検索すると「Package Control:Install Package」が表示されるのでクリックします。
②新たに違う画面が出てきますので、インストールしたいPackage名を入力して検索してインストールしたいPackageクリックします。
クリックするだけでインストールされます。
おすすめPackage
Japanize：メニュー表示を日本語にする
IMESupport：日本語を入力する時に、エディタ内の現在行で入力できるようにする。(Winのみ)
AutoFileName：imageやlinkでファイルを扱う際、フォルダ名・ファイル名を一覧から選択できるようにする。imgタグでは、height,widthも自動取得してくれます。
Markdown Extended：Markdown 内のコードをシンタックスハイライトする
Markdown Preview：ブラウザでプレビュー確認ができる ※1
BrowserRefresh : ファイルを保存すると同時にブラウザのプレビューを更新 ※2
View in Browser : ブラウザでプレビュー確認ができる
Live Style：ブラウザプレビューのリアルタイム更新
LIve Reload：ファイル保存のたびにブラウザを自動リロードしてくれる
QuickLook：Macのクイックルックみたいな感じでプレビュー
OmniMarkupPreviewer：ファイルの編集中にプレビューすることができます
※1 Markdown Previewを実行させるには次の設定が必要になります。
Sublime Text 2 → Preferences → Key Bindings -User を選択します。
以下のように書き換え保存します。
[ { "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser"} }]
これでプレビュー表示が出来るようになります。
Alt+m を押せばMarkdownをプレビュー出来ます。
参考サイト（ コードで一言 http://codedehitokoto.blogspot.jp/2012/04/sublimetext2markdown.html ）
※2 cmd+shift+r でブラウザが更新されます。
Packageを紹介しているサイトを紹介しますのでこちら(SublimeTextの教科書で紹介されてるプラグインまとめ http://qiita.com/maccotsan/items/f320036e19f8d3b798c1 )をチェックしてください。
ファイルをダウロードして設定する
ダウンロードしないとインストールできないPackagを紹介します。
全角スペースをハイライト表示
全角スペースを明確に表示(ハイライト)するPackageです。
下記ファイルをダウンロードし、解凍(展開)します。
ZenkakuSpacet.zip ←クリック
解凍したら 「FullPitchWhiteSpaceHighlight 」フォルダを「コピー」します。
SublimeText2 → Preferences → Browse Package･･･ を選択する。
「Packages」フォルダの中に「FullPitchWhiteSpaceHighlight 」フォルダを貼付け貼付けます。
メニューを日本語化
メニューや右クリックした時のコンテキストメニューが日本語表示になるPackageです。
下記のリンクファイルをダウンロードします。
メニューバー( Main.sublime-menu : 50,537 Byte)
https://docs.google.com/open?id=0B_dAu5x064QTWW5TQ2p0NzRPZTQ
コンテキストメニュー( Context.sublime-menu : 688 Byte)
https://docs.google.com/open?id=0B_dAu5x064QTZ1lZaXpmS3ZMQ0U
リンクをクリックすると、ダウンロードボタンが出てくるのでダウンロードボタンを押してダウンロードして下さい。
ダウンロードした2ファイルを「コピー」し、SublimeText2 → Preferences → Browse Package･･･ を選択する。
「Packages」フォルダの中の「Default」フォルダの中にコピーしたファイルを貼り付け(上書きとなります)ます。
画面の色変更
「現在行のハイライト表示」・「選択部分の色」を、初期のカラースキーマ「Monokai」を一部変更した「Monokai Kai」ファイルです。
下記ファイルをダウンロードし、解凍(展開)します。
解凍したら 「Color Scheme - User 」フォルダを「コピー」します。
SublimeText2 → Preferences → Browse Package･･･ を選択する。
「Packages」フォルダの中に「Color Scheme - User 」フォルダを貼付け貼付けます。
SublimeText2 → Preferences → Color Scheme → Color Scheme - User → Monokai Kai を選択します。
覚えておきたいメニュー・ショートカット等
メニュー
View → Side Bar → Show･･･ / Hide･･･：画面左側に出るファイル名等のサイドバーを表示/非表示。
View → Hide Minimap / Show Minimap：画面右側に出るコードの全体表示ミニマップを表示/非表示。
：画面を指定した数に分割。左画面でhtml、右画面でcssといった事ができる。
Single：1画面 Columns：列＜垂直方向の並び＞ Rows：行＜水平方向の並び＞
View → Word Wrap：コードを画面右端で自動折り返しにする/しない。
ショートカット
Ctrl + S：上書き保存
Ctrl + +：文字サイズを大きく
Ctrl + -：文字サイズを小さく
他
[Esc]キー：PacageControlボックスや検索ボックス等の、ボックスを閉じる。
html + [Tab]キー：htmlの雛形コード入力(htmlのタグ等他にもたくさんあります)。
htmlファイルの編集画面上で右クリック→[Open in Browser]：htmlファイルをブラウザで表示。
参考にしたサイト
Installation - Sabulime Package Control
SublimeTextの教科書で紹介されてるプラグインまとめ - Qiita
6/18(木)授業メモ
今日は、SublimeText3をインストールし日本語化、ビオレパッケージデザイン（花王社製品）。
①SublimeText3をインストールし日本語化。
インストールは出来ましたが、日本語で表示させることが出来ませんでした。。。
メニューバーまでは出来ましたがね。
②ビオレパッケージデザイン
オリジナルでデザインするのではなく既製の物をトレースしました。
ロゴは簡単に出来ましたが、文字のトレースは苦労しました。。。
でも、イラストレーターは使い慣れているので苦ではなかったです。
細かい作業とか、ペンツールを使うのは得意なので楽しかったです。
- 余談 -
息抜きは重要。
最近、授業について行けていない！全然理解できてなかった！って思い知らされて、最近ネガティブな生活を送っていましたので何もかもやる気が出ませんでした。。。
今日は、カフェでリフレッシュしてみました。
学校が終わってすぐ帰宅してずっと部屋に引きこもりで、勉強しなきゃ！とか、復習しなきゃ！と思うけど、全然手つかずで１日が終了でした。。。
これは悪循環です！
「今日はカフェに行こう！」ってふと思ったので実行しました。
みなさんもぜひ！
6/18(水)授業メモ
今日は、CSS3を使ってグラデーションの設定を学びました。
★mozilla系のブラウザ用の命令
記述例 ）background:-moz-linear-gradient(top, #990, #066);
解説 ) background:-moz-linear-gradient (方向, 開始色, 終了色);
方向の種類
- top：上から下
- left：左から右
- left top：左上から右上
※ mozilla系のブラウザ には、 Mozilla Fierfox が含まれる。
★webkit系のブラウザ用の命令
記述例 ）background: -webkit-gradient(linear, left top, left bottom, from(#990), to(#066));
解説 ) background: -webkit-gradient(直線的, 開始位置, 終了位置, 開始色, 終了色）
※ webkit系のブラウザ とは、KHTML系レンダリングエンジン
※ webkit系のブラウザ には、GoogleChrome・ Opera・ Safari が含まれます。
例）
<!DOCTYE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 グラデーション</title>
<style>
#grad1, #grad2, #grad3, #grad4, #grad5 {
width: 300px;
height: 200px;
margin: 30px 50px;
}
#grad1 {
background: -moz-linear-gradient(top, #990, #066);
background: -webkit-gradient(linear, left top, left bottom, from(#990), to(#066));
}
#grad2 {
background: -moz-linear-gradient(left, #990, #066);
background: -webkit-gradient(linear, left top, right bottom, from(#990), to(#066));
}
#grad3 {
background: -moz-linear-gradient(left top, #990, #f60 50%, #066);
background: -webkit-gradient(linear, left top, right bottom, from(#990), color-stop(0.5, #f60), to(#066));
}
#grad4 {
background: -moz-linear-gradient(left top, #990, #c36 30%, #f60 50%, #000 70%, #066);
background: -webkit-gradient(linear, left top, right bottom, from(#990), color-stop(0.3, #c36), color-stop(0.5, #f60), color-stop(0.7, #000), to(#066));
}
#grad5 {
background: -moz-linear-gradient(top, rgba(60,100,50,0.5), #066);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(60,100,50,0.5)), to(#066));
}
</style>
</head>
<body>
<div id="grad1"></div>
<div id="grad2"></div>
<div id="grad3"></div>
<div id="grad4"></div>
<div id="grad5"></div>
</body>
</html>
6/17(火)授業メモ
午前の授業は、昨日につづきレスポンシブWebデザインです。
午後は、CSS3を使用し角を丸くするborder-radiusと、PHPでブログやYahoo!のトピックスのrssを取得する方法を学びました。
①レスポンシブWebデザインは、固定レイアウトによるレスポンシブWebデザインでした。テキストP48と学校ブログ 7/9 の記事 固定レイアウトパターン | 構造 以降を参照し制作を行いました。
1-1 ) max-width
※<img>の幅の最大値を指定。実数値にpxなどの単位をつけて指定する方法と、親ボックスに対する割合を％で指定する方法があります。 また、幅を制限させないようにするにはnoneを指定します。
1-2 ) border-bottom: solid 5px taransparent;
※ taransparentは透明(初期値)
※ Firefox、Safari、Chromeは、この指定がなくても透過されます。（IEやOperaではこの指定が必要です）
②CSS3を使用し角を丸くするborder-radius
2-1 ) IEは対応していないので四角のまま
2-2 )グローバルナビゲーションが丸いのは主にCSS3で角丸にしている
2-3 ) border-radius: 10px 20px 30px 40px;
※ 左上 右上 右下 左下
※ radiusは半径
2-4 ) それぞれ指定して角を丸くする
#radius3 {
border-top-left-radius: 10px;
border-top-right-radius: 15px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 25px;
}
※ 上から、左上 右上 右下 左下 への命令。
2-5 ) 真円にする
#radius4 {
width: 100px;
height: 100px;
border-radius: 50%;
}
③rssを取得
外部ブログのRSSを取得し表示（学校ブログ 7/25の記事を参照 )
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yahoo! トピックスの RSS を表示</title>
<style>
span {
margin-left: 1em;
}
</style>
</head>
<body>
<h2>RSSを表示</h2>
<?php
$url = 'http://rss.dailynews.yahoo.co.jp/fc/rss.xml';
$rss = file_get_contents($url);
$xml = simplexml_load_string($rss);
$channel = $xml->channel;
$feed_title = $channel->title;
print '<h3>'.$feed_title.'</h3>';
print '<ol>';
foreach ($channel->item as $item) {
$link = $item->link;
$title = $item->title;
$date = $item-> pubDate;
$date = date('Y.m.d', strtotime($date));
print "<li><a href=\"$link\" title=\"$title\" target=\"_blank\">$title</a><span>($date)</span></li>\n";
}
print '</ol>';
?>
</body>
</html>
※ http://rss.dailynews.yahoo.co.jp/fc/rss.xml 部分にをrss取得したいブログのアドレスを入れる
※ 取得したいブログ等のアドレスの後ろに、/rssを入力。
※ RSSは、ニュースやブログなど各種のウェブサイトの更新情報を簡単にまとめ、配信するための幾つかの文書フォーマットの総称である。(wikipedia参照)
★余談★
6/12(木)放送のカンブリア宮殿：２５兆円企業 トヨタ復活劇の真実！〜豊田章男 激動の5年〜を見て、「継続は力なり」だな！仕事は、面白みやワクワク感がないとダメだなと感じた。何かワクワクできるようなWebサイト・喜んでもらえるWebサイト制作をしたい。
