【授業】 Web APIを使う
Web APIとの通信の流れ
REST（Representational State Transfer）形式
リクエストとレスポンスはそれぞれ通信に適切な形でやりとりされます。
リクエストにはURLの形にすること
レスポンス時にはXMLの形で受け取る
載せたいページのサムネールとリンクを作る
Webサイトのサムネイル画像／PDF ファイルを生成するAPIHeartRails Capture
できたコード
QRコードをつける
- PHPファイル テストサーバーを用意
<img src="http://chart.apis.google.com/chart?chs=画像サイズ &cht=qr&chl=QRコードを生成したいページのURLエンコード済みの文字列"alt="">
:例
<img src="http://chart.apis.google.com/chart?chs=120x120&cht=qr&chl= http://d.hatena.ne.jp/HONME/201209" alt="">
上記コードをPHPで記述すると
QRコード作成サイト
QRコードを表示するPHP＜qrcode.php＞
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>QRコード作成サイト</title> <style> body { text-align: center; } </style> </head> <body> <p>生成されたQRコード</p> <?php $keyword = $_GET["keyword"]; $keywordurl = urlencode($keyword); $url="http://chart.apis.google.com/chart?chs=150x150 &cht=qr&chl=$keywordurl"; ?> <img src="<?php echo $url; ?>"> </body> </html>
$keywordurl = urlencode($keyword);
↑このコードで、文字コードが変換されるので、どんなコードを入れても読み取ってくれる
$url="http://chart.apis.google.com/chart?chs=150x150 &cht=qr&chl=$keywordurl";
↑このコードでgoogleのQRコード作成サイトから作られたQR画像を引っ張ってこられる
検索制作を表示する画面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>検索フォーム</title> <style> body { text-align: center; } </style> </head> <body> <p>QRコードにしたい文字を入力してください。</p> <form action="qrcode.php" method="get"> キーワード：<input type ="text" name="keyword"size="40"> <input type="submit" value="検索"> </form> </body> </html>
amazonアソシエイトプログラム
自分のホームページや、ブログにamazonの商品を表示、紹介できる
amazonアソシエイトプログラム
amazonにおまかせで商品を表示 ↓
「ログイン」→「ウィジェット」→好きなジャンルを選んで「サイトに追加」→
ソースがでるので貼り付ける
自分のサイトにあった商品を表示↓
API特有のブログにあわせた表示を受けるためには、アクセスキーの認証を取得して設定
はてなブログにTwitterをつける
twitterのウィジェット作成ページを開く
https://twitter.com/about/resources/widgets
- 「自分のサイト」→「プロフィールウィジェット」
- 自分のTwitter名を入れる
- 設定、デザイン、サイズを設定して、カスタマイズ
- 「コードを生成」をクリックして、コードを書き出す
- 生成されたコードをはてなブログのフッター部分に貼り付ける
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"> </script> <script> new TWTR.Widget({ version: 2, type: 'profile', rpp: 5, interval: 30000, width: 250, height: 300, theme: { shell: { background: '#333333', color: '#ffffff' }, tweets: { background: '#000000', color: '#ffffff', links: '#4aed05' } }, features: { scrollbar: true, loop: false, live: true, behavior: 'default' } }).render().setUser('ユーザー名').start(); </script>
コードがエラーになって、ちゃんと表示されない
6.「charset="utf-8"」を削除
7.「features」に「hashtags」「timestamp」「avatars」を追加
8. [behavior]を「default」から「all」へ修正
features: {
scrollbar: true,
loop: false,
live: true,
behavior: 'all'
hashtags: true,
timestamp: true,
avatars: false,
}
9.hatenaのフッターにサイドバータグで載せる
「web学のすすめ」をみながら勉強させていただきました
http://d.hatena.ne.jp/vinton/20120830/1346302969
【授業】はてなブログにyou tubeを載せる
スタジオジブリにリスペクトされている、ロシアの映像作家ユーリ・ノルシュテイン。
1973年度アニメ作品。
Yuriy Norshteyn - The Fox and the Hare (Лиса и заяц, 1973).
【授業】FwデータのPs/Aiへの互換 CSS3ジェネレーター
Fwのデータの互換
以前はEPSでファイルを書き出すのが定番だったが、いまは、Ai /Ps/Fwもそれぞれのファイル形式で互換が可能
[ファイル]→[読み込む] ※レイヤーを保持
で行う
Illustratorへ
Photoshopへ
CSS3ジェネレーター
テキストシャドウ特化型http://westciv.com/tools/text-properties/
ボタン
http://cssgradientbutton.com/
【授業】Fire Works ボタンを作る
「長方形ツール」を使って角丸ツールでピクセル指定 →角丸四角
角丸ツール％表示で使用（100％＝端が完全な丸の形）
角丸の半径を「100px」で高さ「50px」にしてしても結果は同じだが、無駄な計算が発生してファイルにふたんがかかる
真ん中右のフィルタ→photoshopライブ効果を使うと
「ハイライト」や「べべルとエンボス」を使うことができる
変更→シンボル→シンボルに変換→（ボタン）F8（Flashに同じ）
シンボルの中にはいって、編集することもできる
Aｌt＋シフトで複製も
ライブビューで複製すると、テキストで文字を編集することができる
（その際、中央表示か、左揃えかの設定が大事）I
webツール
4つ中左下が、「スライスを消す」
ボタンシンボルの中に入って、オーバーの画像とかをコピー、色相をかえることで。オーバーボタンとを簡単に作ることができる（プレビューで確認）
up オーバーとかは、ステートパレットで確認することができる
書き出し→画像のみ
書き出し→css
いろいろ書き出される
Abs.Wrap〜
Abs=absolute 絶対位置のことと、覚えておく
ドキュメントライブラリに登録される
「共有ライブラリ」にチェックを入れると、他のFwファイルでもそのシンボルを開くことができる
webのホットスポットツールは、透明なホバー、またはクリックの領域を指定することができる
が、
まだHTML化されていない
ので。
Dwでは、
イメージを置いた上にに、「ホットスポットツール」で、領域を指定する形で、リンクや反応を作ることができる
（（透明だが、ホットスポット上にくると、指アイコンになる）
「授業 」Fw
カンバス→画像解像度
webブログ用だとだいたい530 とか500台
画質；バイキュービック
先に画像解像度を変更してからサイズをいじると、
解像度が固定されてサイズが変更される
画像の上にシェイプツールをのせ、シェイプをコピー
画像を選択して。「編集」→「マスクとしてコピー」で切り抜きができる
書いてる途中ビットマップ
書き終わるとベクトル
なので、ちょっとぎざぎざが見える
イラストレーターでみえているようなベクトルにはならない
プレビューをアンチエイリアスを持っていないので、
１００％にみえるときが、見え方のすべて
線幅を持たせるときは、下枠オプションで線幅をどちら側に作るのか
（外側、内側、中心）を選択しないと
画像サイズの仕上がりサイズが後々でずれてくる
線幅→柔らかいとか硬いなど種類はFｗは線幅の計算が一番苦手
ベクトルプレビューは、際のアンチエイリアスが、ぼけるので
ピクセルの大きさが、微妙にずれる
書いてる最中ベクトル、おくとビットマップなので
いられをふぉt所に配置するとき、崩れずにできるので問題はないが、
縦書きにするときは、縦書き用に組みなおしが必要
特に数字、年号、アルファベット
DTPのように、隙間などを調整する必要はない
グラデーションマスク
（PSのレイヤマスク）
画像をグラデーションでベタカラーとなじませるのは、あまり意味がない
だったら、直線でパンと区切ってそこにキャッチコピーを載せるのがいい
特に食べ物は、がちっときったほうがいい
イメージを伝えたいのはぼかしだが。商品をびしっとみせたければ、ぼかさない
デザイナーがぼかしに慣れると、端をぼかす癖がついてくるが。
デザインとして、ぼかすのはあまり効果がないので
しないほうがいい
背景と人物をなじませると、考えたほうがいい
ひとつ使うと、あそこもここもとなりがち
ドキュメントの切り抜きでシェイプの形だけ切り出せる
変更 →フォトショップ的作業
コマンド→Fw的作業が入っている
ボタンをシンボル化できる
ライブトレースをつかって、写真をイラストっぽくする
人工物よりも、自然物のほうが、それっぽく見える
「ライブトレースオプション」から
「カラー」「色数２０色以下」 時によってはカラーをスウォッチにに保存できる
写真の解像度が高いと、あまりイラストっぽくならない
バートモンロイというadobeのイラストレーター（リアルな絵の描き方）
写真からフォトショップでリアルを書き出す
ロンチャン（アメリカ系中国人）
「ロンチャン 未来派のえいきょうのある人」
ロシア系イタリア系いろいろな未来派がある
ロンチャンの手法はイラストレーターAiなので。どちらかというとイタリアの未来派
検索「マクロメディア ディレクター images」
イラスト系でいくなら、
かすれ、手書き的なテクスチャーを作る方法を研究したり。
手書きっぽいかすれとかはFwが作りやすい
イラストレーターの様々な素材の書き方ブログ
http://forty-n-five.boy.jp/blog/Illusutrator.php?page=all
winでの画像キャプチャ snippin tool
http://www.youtube.com/watch?v=7ldxPzoRdL0
macのキャプチャー
スクリーンショット(画面キャプチャ)の撮影
[Mac入門編]
スクリーンショットの撮影方法の紹介です。
私のブログ記事にも頻繁に使用していますが、スクリーンショット(スクリーンキャプチャ)とはディスプレイに表示されているMacの画面イメージを画像ファイルとして保存する機能です。主にアプリケーションなどの操作説明に使用すると有効です。
以下の２つの方法で撮影が可能です。
１）「グラブ」アプリケーションを使用した撮影
２）ショートカットを使用した撮影
撮影方法を以下に示します。
1. 「グラブ」での撮影アプリケーション＞ユーティリティ＞グラブで起動。
メニューバーから[取り込み]を選択し撮影したい種別を選択します。
種別は４種類で特徴は以下となります。
- [選択部分] マウスでドラッグした範囲を撮影
- [ウインドウ] ウインドウ単位での撮影
- [スクリーン] 画面全体を撮影
- [タイマ] 10秒後に画面全体を撮影
（メニュー撮影などに有効）
撮影例：[ウインド]
撮影例：[スクリーン]
＜ポイント＞
グラブで撮影した画像はTIFF形式のファイルとなります。TIFFは容量の大きなファイルとなりますのでWebに公開する場合などはJPEGなどの圧縮された形式に変換する必要があります。撮影したファイルをダブルクリックするとプレビューで表示されますので[ファイル]＞[別名で保存]で変換できます。
2. ショートカットでの撮影[画面全体を撮影]
コマンド＋ Shift ＋ 3 キーを押します。
[画面の一部を撮影]
コマンド＋ Shift ＋ 4 キーを押してから、
取り込みたい領域をドラッグ。
[ウインドウを撮影]
コマンド＋ Shift ＋ 4 キーを押してから、
スペースバーを押す、
カメラマークのポインタを撮影したい領域に置く、
強調表示されるのでクリックする。
※コマンドとはアップルマークの付いたキー。
※デスクトップ上にファイルとして保存されます。
※Control キーを押しながら上記のショートカットを押すとクリップボードに保存されます。
＜ポイント＞
グラブではメニュー操作が必要になるため撮影したい画面状態の維持が上手くいかない場合があります。この場合はショートカット操作が有効となります。
●画面のキャプチャ方法
A.画面全体を保存
コマンド+シフト+3
B.画面一部を保存（十字カーソルで範囲指定）
コマンド+シフト+4
C.特定のウィンドウを保存（レンズカーソルでウィンドウを選択）
コマンド+シフト+キャプスロック+4
目的からすればCがいいと思います。
※なお、範囲指定・ウィンドウ選択する際にコントロールキーを押していれば
保存せずにコピーされます。
●スクリーンショットの開き方と保存の仕方
1.QuickTime3.0以降に同梱されている「PictureViewer」に
「スクリーン …」をドラッグ＆ドロップして開きます。
（QuickTimeのフォルダ内にあります）
2.メニューバーの「ファイル」から「書き出し」を選択します。
ポップアップメニューから「JPEG」を選び名前を付けて保存します。
名前は半角英語の方がいいでしょう。
拡張子「.jpg」は自動的に付くので取らないようにしてください。
iMacならQuickTime3.0か4.0だと思いますが
QuickTimeのユーザー登録していない場合、書き出しができるかどうかは未確認です
