基本僕はDTPの仕事しています。
でも、、、
これからはWEBサイトも作れるようにならないといけないなーと
勉強していこうかなーなんて思ってます。
HTMLやCSSは若干かじってはいるんですけど、
所詮かじった程度。
とりあえず基本的なことから
スタートしようと思ってます。
仕事で扱えるレベルになれたらいいな。
いやなろう。
Webサイト製作について
返信
月別アーカイブ: 2014年3月
RGBカラーシミュレータ RGB color simulator for JavaScript
JavaScriptの練習がてら
RGBカラーシミュレータを作ってみた
コードはこんな感じです。素人ちっくでごめんなさい。。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RGBカラーシミュレータ</title>
</head>
<body>
<H1>RGBカラーシミュレータ</H1>
<p>WEB上のRGBカラーとはR(アカ)、G（ミドリ）、B（アオ）の3つの色からなりたってます。</p>
<p>それぞれの色は0〜255までの256段階あり、0が真っ暗で255がその色の原色となります。</p>
<p>そしてその3つの色のかけあわせにより色を表現しています。</p>
<p>RGBカラーは光のかけあわせなので混ぜると明るくなります。</p>
<p>R、G、Bすべて0で黒、R、G、Bすべて255で白になります。</p></br>
<p>ここではそれぞれの色の数字をそれぞれ入力して決定ボタンをクリックすることで</p>
<p>かけあわせた色のシミュレーションができます</p></br>
<p>どんなかけあわせでどんな色になるか色々試してみてくださいね！</p></br>
<p>R（アカ ）：<input type="text" id="text1">0〜255までの数字を半角で入れてください</p>
<p>G（ミドリ）：<input type="text" id="text2">0〜255までの数字を半角で入れてください</p>
<p>B（アオ ）：<input type="text" id="text3">0〜255までの数字を半角で入れてください</p>
<p><input type="button" onclick="doAction();" value="決定"></p></br>
<p>R[<span id="r10" >000</span>]の16進数は[<span id="r16" >000</span>]で色は<span id="rco" > </span>です</p>
<p>G[<span id="g10" >000</span>]の16進数は[<span id="g16" >000</span>]で色は<span id="gco" > </span>です</p>
<p>B[<span id="b10" >000</span>]の16進数は[<span id="b16" >000</span>]で色は<span id="bco" > </span>です</p></br>
<p>三つの要素を混ぜると色は
<div id="target" ></div>
<p>になります。</p>
</br></br>
<p>HTML上の色指示の表記は[”#”]＋[Rの16進数]＋[Gの16進数]＋[Bの16進数] </p>
<p>という文字列なので<span id="iro" >#000000</span>となります。</p>
<script type="text/javascript">
<!--
var target = document.getElementById("target");
target.style.background = "#000000";
target.style.width = "100px";
target.style.height = "50px";
function doAction(){
var text1 = document.getElementById("text1");
var text2 = document.getElementById("text2");
var text3 = document.getElementById("text3");
var target = document.getElementById("target");
var iro = document.getElementById("iro");
var r10= document.getElementById("r10")
var r16= document.getElementById("r16")
var rco= document.getElementById("rco")
r10.innerHTML=text1.value
var g10= document.getElementById("g10")
var g16= document.getElementById("g16")
var gco= document.getElementById("gco")
g10.innerHTML=text2.value
var b10= document.getElementById("b10")
var b16= document.getElementById("b16")
var bco= document.getElementById("bco")
b10.innerHTML=text3.value
var r_youso= parseInt(text1.value)
var g_youso= parseInt(text2.value)
var b_youso= parseInt(text3.value)
r_youso = "0"+r_youso.toString(16);
g_youso = "0"+g_youso.toString(16);
b_youso = "0"+b_youso.toString(16);
r_youso = r_youso.substr(r_youso.length-2,2)
g_youso = g_youso.substr(g_youso.length-2,2)
b_youso = b_youso.substr(b_youso.length-2,2)
r16.innerHTML=r_youso
g16.innerHTML=g_youso
b16.innerHTML=b_youso
rco.style.background = "#"+r_youso+"0000";
gco.style.background = "#00"+g_youso+"00";
bco.style.background = "#0000"+b_youso
iro.innerHTML= "#"+r_youso+g_youso+b_youso
target.style.background = "#"+r_youso+g_youso+b_youso
}
//-->
</script>
</body>
</html>
JavaScriptの高速化
高速化ってのは、ちとおおげさだったかな。
今回、自前のテキスト変換系InDesignスクリプトの
スピードアップ化に挑戦してみました。
とりあえず前回の時間測定用のスクリプトを使ってみると。。
77秒。
うーん目標は1分以内ですかね。。
とりあえず、これも前に紹介したドキュメントを隠すスクリプトを実行。
70秒。。少しだけ速くなったけどもうちょっと速くしたいですね。
Adobe系スクリプトでオブジェクトの数だけ実行するというループの表記で
for (var i=0; i < Object.length; i++)
てのがよくあります。
lengthというのはObjectの要素数を取得するためのプロパティなんですけど
でもこれ実は、ループをまわすたびに要素数を計算しちゃってるんですよね。
なので
var Len = Object.length; for (var i=0; i < Len; i++)
このようにObjectの要素数をfor文の手前で変数に入れてしまうか
for (var i=0,Len = Object.length; i < Len; i++)
for文の初期設定部分で要素数を変数に入れてしまえば、
一回しか要素数の計算をせずに速くなるというわけ。
こういった訂正を全体的に施してみると、、、
キター
60秒切りました！！
というわけで、作ったスクリプトがおっせーなあ、、と思ったら
こういうスピードアップに挑戦してみるといいかも。
AppleScriptからJavaScriptを実行する。
今回はAppleScriptちゃんに手をだしてみました。
例ではAdobe Illustratorのスクリプトを実行しています。
まず
下のコードをAppleScriptエディタにコピペして
別名保存でファイルフォーマットをアプリケーションにして保存します。
set ScriptPath to ((path to current application) & "Contents:Resources:Scripts:") as string set jsx to ScriptPath & "sample.jsx" tell application "Adobe Illustrator" do javascript file jsx end tell
できあがったアプリケーション（アプレット）を
右クリックで「パッケージの内容を表示」でファイルを覗いてやると
次のようなフォルダ構造になってるのがわかると思います。
なので
[Scripts]フォルダというのがありますのでここにIllustratorのスクリプトをつっこんであげましょう。
（ここではsample.jsx）
[Contents]→[Resources]→[Scripts]
注意：AppleScriptを別名保存で保存し直すとフォルダ構成がリセットされスクリプトも消えちゃうのでスクリプトは必ずコピーしたものを入れてくださいね！
そしてアプリケーションのアイコンをダブルクリックしてやれば
はい、できました。
このやり方をすればどの環境でもスクリプトの置場に困ったりしないですね。
スクリプトの実行中にドキュメントを隠すスクリプト
スクリプトをこのスクリプトで挟むと、
実行中にアクティブドキュメントを隠します（最小化）
そして実行の終わりに元のサイズにもどします。
画面の描写が減るため、
テキストの変換などドキュメントの見た目が変わるスクリプトは
ちょっとだけスクリプトが速くなります。（と思います。）
app.activeDocument.windows[0].minimize() /* ここに処理をかく */ doc.windows[0].restore()