Haxe は FlashDevelop とかで開発してる人が多いと思うけど、僕は Aptana を愛用してまして、Aptana での Haxe の開発環境設定の記事がまだあまり無いようなので、キャプチャとともに手順を残しておこうと思います。
関係無いけど、Haxe と haXe ってどっちが正式な表記なんだろう。
何はともあれまずは「Download - Haxe」から Haxe をダウンロードします。
続いて Haxe をインストールします。ダウンロードしたexeファイルを実行する。基本はずっと「Next」でOK。
Haxe のインストールは完了したので、次に Aptana に Haxe開発用のプラグインの Eclihx(読み方分からない)をインストールします。
Aptana のメニュー「ヘルプ」>「新規ソフトウェアのインストール」を選択します。
インストールウィンドウが開いたら「作業対象」に「eclihx - an IDE for haxe - Installation notes」を参考にしつつ、記載されているURLを入力して、「Eclihx - haXe development in Eclipse」にチェックして「次へ」をクリックします。
続いて表示されるウィンドウで「Eclihx Plugin Feature」にチェックを入れて「完了」をクリックすれば Eclihx のインストールは終わりです。
続いて Aptana で haXe のコンパイラを設定します。
「ウィンドウ」>「設定」から"haXe(EclihX)"の"コンパイラー"を選択して、
「haXe compiler」に先ほどインストールした haxe.exe のパスをセットして「OK」をポチ。
Aptana で Haxe を使って開発するための一通りの設定は完了したので HelloWorld してみます。
プロジェクトを作成する前にまずは haXe のパースペクティブを開きます。
Aptanaのメニューの「ウィンドウ」、若しくは、右上の方にあるアイコンから「パースペクティブを開く」を選択します。
次に開くウィンドウで「haXe Eclihx」を選択して「OK」をクリック。
いよいよプロジェクトを作成します。
Aptanaメニューから「ファイル」>「新規」>「haXe Project」を選択します。
適当にプロジェクト名とロケーションを設定して「完了」をクリックします。
haXe Package Explorer に先ほど作ったプロジェクトが表示されればOKです。
プロジェクトを作成したので、haXe ファイルを作成してHelloWorldのソースを記述してみます。
先ほど作ったプロジェクトの中の src フォルダ の中に Default Package がありますので、そこで右クリックして「新規」>「haXe ファイル」を選択します。
ファイル名は「HelloWorld」にしてみました。
作成した「HelloWorld.hx」ファイルを開いて、何も考えずに次のコードを記述して保存。
package;
class HelloWorld {
static function main() {
trace('Hello World !');
}
}
続いて build の設定をします。
プロジェクトを作成すると、そのプロジェクトフォルダの直下に「bulid.hxml」(プロジェクト作成時に名前を変更していればその名前)というbuild 設定を記述するファイルが自動で作成されます。
「bulid.hxml」を開くといくつかのbuild設定がコメントアウトされていますので、それを自分の環境に合わせて編集します。今回は JavaScript で出力したいので、-js オプションを指定し、-main には先ほど記述したHelloWorldクラスを指定します。
ファイルの保存は忘れずに。
-cp src
# Uncomment the desirable target
# JavaScript target
-js out\HelloWorld.js
# SWF 9 target
# -swf9 out\HelloWorld.swf
# ActionScript3 target
# -as3 out
# Neko target
# -neko out\HelloWorld.n
# PHP target
# -php out
# C++ target
# -cpp out
# Uncomment and place your main class with package
-main HelloWorld
build を実行します。
プロジェクトフォルダの上で右クリックして、「実行」>「実行の構成」を選択します。
実行構成ウィンドウが表示されたら「haXe application」を選択して「新規」で新規作成します。
「名前」に適当な名前をセット、「プロジェクト」で先ほど作成したプロジェクトを選択して「実行」ボタンをポチる。
プロジェクトフォルダ内の out フォルダ下に「HelloWorld.js」(build.hxmlファイルで別の名前を設定していればその名前)というファイルが作成されました。
ちなみに、中身はこんな感じの JavaScript ソース。
JavaScript ファイルが生成できてしまえば、後はHTMLで読み込むのみ。
適当なフォルダ(面倒くさいので今回は out フォルダ)にHTMLファイルを作成して先ほどの生成された js ファイルを読み込みます。
<html>
<head>
<title>Haxe JS</title>
<script src="HelloWorld.js"></script>
</head>
<body>
</body>
</html>
HTMLファイルを保存してブラウザで開くと...
コンソールに「HelloWorld」が出力されているのを確認できました。
ちゃんちゃん
Web Notifications はユーザーのデスクトップに通知を表示することができる API で、
(Win で例えると、タスクトレイにバルーンが表示される感じ)
現在策定中の仕様ですが、正式勧告されて各ブラウザで実装されれば、
ユーザーが他のサイトを閲覧している、若しくは、ブラウザを最小化しているなどの状態でも、
Webサイト・アプリケーション側からユーザーに対して通知を表示することができるようになります。
簡単なサンプルを作ってみました。
2013年8月末時点で、Chrome28・Firefox23 にて動作確認
デモページの"通知"ボタンをクリックすることで、タスクトレイの上にサイトからの通知が表示されます。
Web Notifications が実装されていないブラウザではアラートで使用できない旨が表示されます。
2013年8月末時点では Chrome と Firefox で実装されていますが、
Chrome にはベンダープレフィックス付きの webkitNotifications も独自で実装されていて、
そちらは HTML5 で仕様策定中の Web Notifications とは仕様が異なっています。
時間があれば詳しい使用方法やソースコードの説明を追加したいと思います。
例えば、この API を Node.js などと連携して使用すれば、誰かからメッセージが届いた時に通知を表示するといったように、サーバサイドで何かイベントが発生したことをユーザーに通知することが可能となります。
正式勧告されれば Webアプリケーション で可能な事が更に広がる楽しみな仕様です。
WebRTC は Web RealTimeCommunication の略で、ユーザーのWebカメラやマイクから動画や音声のデータをリアルタイムで取り込んだり、端末間でP2Pを行えるようにするための仕様で、現在 W3C によって標準化が進められています。これまではWebブラウザからWebカメラにアクセスするためには Flash を利用する必要がありましたが、これらを利用することで JavaScript から同様のことができるようになります。
※以降のデモは全てWebカメラが必要です。
まずは一番簡単なサンプルを作ってみました。
2013年3月時点で、Chrome27.0にて動作確認(Androidでも動くかも...)
まずは一番オーソドックスに、Webカメラの映像を video要素 に表示しています。
video要素 にWebカメラの映像を表示できるということは、Webカメラ→video要素→canvasとデータを取り込めるということです。次のサンプルは一見すると先ほどのものと変わりませんが、htmlソースを見ると、映像の表示に video要素 ではなくcanvas要素 を使用しているのが確認できると思います。
2013年3月時点で、Chrome27.0にて動作確認(Androidでも動くかも...)
ここまで出来てしまえば、後は色々できますね。
Webカメラの映像を Canvas に表示する際に色情報を操作してモノクロ表示しています。
Webカメラの映像とアニメーションを同時に Canvas に表示しています。
「撮影」ボタンを押下した瞬間のWebカメラの映像にそれっぽい画像を載せて表示しています。
この技術を「WebSocket」と組み合わせれば比較的簡単にビデオチャットとか作れそうですね。色々と夢が広がる仕様です。個人的にはAR・WebGLと連動してWebカメラの映像上に3Dな何かを表示するとかやってみたいです。
この度、諸事情によってサイト運営のための費用の捻出が以前ほど楽ではない状態となり、
サイトの運営を維持するためにページ内の一部に広告を表示をすることにしました。
僕個人の思うところもあり結構悩んでいたのですが...
そんなこと別に...って気にしない方もいるかと思いますが、
もし、見辛くなったと思う方がいましたら、その方へ現状のご理解を求めたいのと、
僕個人の色々な気持ちの踏ん切りという意味も含めてご報告させていただきます。
尚、当サイトのコンテンツに関してはこれまでと何ら変わりませんので、
今後とも宜しくお願いいたします。
前述のことをする場合は次のようなコードになりますが、そのままでは IE8 でエラーが出ます。
addCssRule : function ( selector, declarations ) {
var style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.innerHTML += selector + '{' + declarations + '}';
document.getElementsByTagName('head')[0].appendChild(style);
}
IE8 でも動作するようにするためには大凡次のようなコードになります。
(※結構はしょってるのでコピペで使用するのはおすすめしません)
addCssRule : function ( selector, declarations ) {
if ( navigator.userAgent.indexOf('MSIE') != -1 && navigator.userAgent.indexOf('Trident/4.') != -1 ) {
document.styleSheets[0].cssText += selector + '{' + declarations + '}';
} else {
var style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.innerHTML += selector + '{' + declarations + '}';
document.getElementsByTagName('head')[0].appendChild(style);
}
}
今更感が否めないエントリですが、滞るよりはいいので^^;
]]>サーバサイドのプログラムで WYSIWYG や JQuery 等を利用したカレンダーといった JavaScript を使用したインタフェースからの入力値を受けとるケースは多いと思いますが、そういった際(JavaScript が input要素 の value属性 を操作する)に使用しているプラグインやライブラリの文字コードがUTF-8の場合は半角スペースの扱いに少し注意が必要です。
普通にキーボードから半角スペースを入力した場合のバイトコードは 0x20 ですが、JavaScriptなどから挿入された半角スペースのバイトコードは 0xc20xa0 となる場合があります。
僕の場合はこれが原因で MySQL の Timestamp型 のフィールドを更新する時に、日付は更新されるが時間が更新されない(常に00:00:00になってしまう)という罠にハマりそうになりました。
一番単純な方法ですが、PHP であれば次の様に対応できます。
$str = str_replace("\xc2\xa0", ' ', $str);
]]>
一つ目は、gzip や deflate を使用したリソースの圧縮です。
リクエストされる各ファイルの容量を圧縮することで転送量を減らし、速度改善につなげる施策です。対象のファイルを一個ずつ gzip 圧縮するのが面倒臭かったので、今回は apache の mod_deflateモジュール を使用して対応しました。
具体的には .htaccess ファイルに以下の記述を追加しました。
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
何やら色々書いてありますが、要は mod_deflateモジュール を使用して、画像ファイル(gif, jpg, png)以外のリソースを、ネットワークを通してクライアントに送る前に gzip 圧縮 するという内容です。
前述の方法の他には AddOutputFilterByType を使用する方法もあります。
AddOutputFilterByType を使用する場合は .htaccess に以下のように記述します。
AddOutputFilterByType DEFLATE text/css text/javascript application/x-javascript
DEFLATE の後に圧縮したいファイルの MIMEタイプ を記述します。
このサイトで使用しているレンタルサーバでは使用できないようでしたので、
今回はこちらの方法は採用しませんでした。
これには少し注意点もありますが、簡単に表現すると httpレスポンス に Expiresヘッダ を追加することでリソースをクライアント側にキャッシュさせ、httpリクエスト の数を減らして速度改善につなげる施策です。
このサイトでは .htaccess に以下のような感じに記述を追加しました。
ExpiresActive On
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType image/svg+xml "access plus 7 days"
ExpiresByType image/png "access plus 7 days"
ExpiresByType image/gif "access plus 7 days"
ExpiresByType image/x-icon "access plus 1 month"
比較的更新や修正が少ないと思われるリソースに対してキャッシュを有効にして有効期間を指定しています。
この時注意が必要なのは、キャッシュの有効期間として指定した期間内はブラウザはローカルのキャッシュを見にいってしまうため、キャッシュ対象にしたリソースに何かしらの変更を加えた場合はファイル名を変更しなければならないということです。
例えば、このサイトの場合は、ファイル名にバージョンを含めることでこの問題を回避しています。
<link rel="stylesheet" href="/common/css/template.201206211900.css" media="all">
<link rel="stylesheet" href="/common/css/module.201206211900.css" media="all">
<script src="/common/js/heading.201206211900.js"></script>
<script src="/common/js/smoothscroll.201206211900.js"></script>
<script src="/common/js/accordion.201206211900.js"></script>
ファイルを更新した場合は、HTMLのファイル読込みの記述のバージョン番号を変更する感じです。
前述した二つの他に次のようなこともしてみました。
これについては各サイトの運用ルールなどもありますし、自身ではまだ詳細に検証していないので一概には良い悪いと言えませんが、とりあえず自分のサイトなのと対応が難しくないので一応やってみた程度です。
参考サイトにこちらに関して記載しているページを載せておきました。
// import.css内に次のように記述していたものを
@import "format.css";
@import "template.css";
@import "module.css";
// 次のようにHTMLで直接読み込むように変更
<link rel="stylesheet" href="/common/css/format.201206211900.css" media="all">
<link rel="stylesheet" href="/common/css/template.201206211900.css" media="all">
<link rel="stylesheet" href="/common/css/module.201206211900.css" media="all">
これは単純に僕が面倒くさがっていただけです。
特に容量の大きい画像ファイルやサイト内のページで共通して表示されるような画像を圧縮しました。
CSS や JavaScript の圧縮や CDN の利用など、
突き詰めればその他にもまだ色々とやることはあるのですが、今回はこんな感じです。
どうでしょうか。少しは表示の体感速度が速くなったでしょうか?
なんやかんや言っても、ソーシャルサービスの共有ボタンとか、
カスタム検索や analytics の読み込みに一番時間掛かっている気がします。
JavaScript で デフォルトでチェックが入っているチェックボックスを生成する場合、
次のようにすると IE6 ではデフォルトチェックが入らない。
var input = document.createElement('input');
input.setAttribute('type', 'checkbox'); // [or] input.type = 'checkbox';
input.setAttribute('checked', 'checked'); // [or] input.checked = true;
document.body.appendChild(input);
IE6(恐らくIE7も) では、createElement した input要素 を body要素(若しくはその子要素) に append する前の段階で checked属性 をセットしても反映されません。
そのため、想定した動作をさせるためには以下の例のようなタイミングで checked属性 をセットする必要があります。
var input = document.createElement('input');
input.setAttribute('type', 'checkbox'); // [or] input.type = 'checkbox';
document.body.appendChild(input);
input.setAttribute('checked', 'checked'); // [or] input.checked = true;
今更 IE6 対応の話かよって感じですが、気をつけろ。そして忘れるな。自分。
]]>Firefox では tr, th, td要素 の display プロパティに対する position:relative; の指定が定義されていません。
(「Firefoxでは」というよりは、CSS2 の仕様上そうなっているのだが)
つまり、例えば td要素 に position:relative を指定し、そこを基点にして何かの要素を position:absolute で配置するといったスタイルは Firefox では無視されます。
かなり強引な例ですが、
次のようにトピックスかなにかの表組を組むとします。
<!-- HTML -->
<div>
<table>
<tr class="new">
<th>9999/99/99</th>
<td>あいうえおあいうえお</td>
</tr>
<tr>
<th>9999/99/99</th>
<td>あいうえおあいうえお</td>
</tr>
</table>
</div>
その td要素 に対して次のようなやり方で New! というテキストを表示しようとすると...
/* CSS */
div, table, tr, th, td{
position:relative;
}
tr.new td{
padding-left:5em;
}
tr.new td:before{
content:"New!";
position:absolute;
color:#ff0000;
top:0;
right:0;
}
だいたいの方が下図のようになると想像するかもしれませんが、
前述した理由から、Firefox では想定した位置にテキストが配置されません。
恐らく下図のようになります。(※もちろんマークアップやCSSによりけりですが)
あくまで "例えば" ですが。
この例の場合で言うと、New! のテキストが配置される位置は、
table要素 の親要素である div要素 の位置が基準となります。
display プロパティには table-row, table-cell, table-column といった値を指定できるが、
これらを指定された要素も上述と同様に position:relative の指定が定義されていない扱いとなるため、
上記サンプルと同様にそれらの要素を基点として何かの要素を position:absolute; で配置しようとすると、
Firefox ではスタイルが無視されて想定する表示になりません。
気を付けましょう(自分が)。
]]>そこで、その解決方法ですが、
例えば YouTube で次のコードを発行したとします。
<iframe width="420" height="315" src="http://www.youtube.com/embed/OX0-8kQnWt4" frameborder="0" allowfullscreen></iframe>
動画は僕が大好きな「GAGAKIRISE」というバンドです。
このままでは前述したような状態になってしまうため、次の二つの作業をします。
動画ページで発行されたコードに以下のプロパティを追加します。
frameborder="0" wmode="Opaque"
執筆時点では frameborder に関しては発行時点でコードに付加されています。
次に発行されたコード内にあるURLの末尾に以下のパラメータを追加します。
?wmode=transparent
これで、z-index が効くようになります。
先に出した埋め込みコードの例でいくと、改変後は次のようになります。
<iframe width="420" height="315" src="http://www.youtube.com/embed/OX0-8kQnWt4?wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>
HTML5 では iframe要素の frameborder属性 が廃止されていますので、
バリデーターにかけるとマークアップエラーとなってしまいます。
ブラウザの対応状況によって表示結果はまちまちかと思いますが、
当サイトでは以下のような対応をしています。参考までに。
時間が無いやら面倒臭いやらという理由で、作業を始めてからかれこれ2年近く経ってしまいましたが、ようやくリリースすることができました。とは言っても、まだ到底満足いく出来ではないので今後もちょくちょく更新して行くと思います。
また、過去にいただいていたコメントやトラックバックのデータが諸々の事情で消えてしまいました...申し訳ありません--;
リンク切れや表示崩れなどありましたらお問い合わせフォームからご指摘いただけると有難いです。
今後とも宜しくお願いいたします。
mashimonator.