ラベル javascript の投稿を表示しています。 すべての投稿を表示
ラベル javascript の投稿を表示しています。 すべての投稿を表示

2011/05/28

Cloud9 IDEでHello Worldを動かすだけ

開発ツールそのものもクラウド化する時代。
機能的には全てを満たしているとは残念ながら言えないですが、それでもブラウザさえあればどこでも同じ開発環境を利用出来るなんて素晴らしいですよね。

GitHubのアカウントを持っていればそれを利用してすぐにでも始められるCloud9 IDEです。
Cloud9 - Your code anywhere, anytime

Cloud9 IDE自身も有料(1日or1ヶ月)のサービスなのですが、GitHub同様にオープンソースプロジェクトで利用する分には無料で利用出来ます。こういうのいいね!

もともとCloud9 IDEそのものがnode.jsで動作しており、開発対象としてnode.jsを前提としています。
それならという事で簡単に“Hello World”を実行させる方法です。

適当なプロジェクトを作って適当なJavaScriptファイルを作って、

var http = require('http');

var server = http.createServer(
 function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Hello World!!\n');
 }).listen(process.env.C9_PORT);

console.log('Server running');

単純にHello Worldと返してくれるコードを書いて、Runの設定に作成したJavaScriptファイルを指定して、Runをクリックです。

重要なのはコード中の下線部を引いたところ。
通常ならnode.jsの待ち受けポートを指定するところなのですが、あくまでもCloud9 IDE上で実行と言うことになるのでこの辺は特殊です。
どこのこれに関する記述があるのかと思えば、Runを押して起動した際のコンソールに…

Tip: you can access long running processes, like a server, at 'http://test-one.ユーザーアカウント.cloud9ide.com'.
Important: in your scripts, use 'process.env.C9_PORT' as port and '0.0.0.0' as host.

ってちゃんと書かれてました。

コードに問題がなければ後は ike a server, at 〜 に書かれているアドレスにブラウザからアクセスすると…

ね、簡単でしょ。
開発環境と実行環境をクラウド側で用意してくれるというのは本当に楽。
ただ、ローカルのIDEと比べると機能不足な感じは否めないというか、単にWeb上でインデントがきちんとしてるテキストエリアというだけな気もしないですが、便利なのには変わりないです;p


2010/10/16

Ubuntu ServerにNode.jsを入れてみた

Node.jsという名前だけ聞いていたのでてっきりjQueryのようなクライアントサイドのライブラリーかと思ってましたが、JavaScriptでサーバーサイドのコードを記述できるというすごいやつ。

環境はRackspace CloudのUbuntu 10.04です。

apt-get update

apt-get upgrade

apt-get install git-core

apt-get install build-essential

apt-get install libssl-dev

git clone git://github.com/ry/node.git

cd node/

./configure

make

make install

GitでNode.jsをダウンロードして、makeしてインストールしてます。
ただ、これでやるとちょっとだけ駄目な部分がある。それが実際どう悪いのかいまいち分かってないんですけど;p

# ./configure

Checking for program g++ or c++ : /usr/bin/g++

Checking for program cpp : /usr/bin/cpp

Checking for program ar : /usr/bin/ar

Checking for program ranlib : /usr/bin/ranlib

Checking for g++ : ok

Checking for program gcc or cc : /usr/bin/gcc

Checking for gcc : ok

Checking for library dl : yes

Checking for openssl : not found

Checking for function SSL_library_init : yes

Checking for header openssl/crypto.h : yes

Checking for library rt : yes

Checking for fdatasync(2) with c++ : yes

'configure' finished successfully (2.825s)

あと、Rackspace Cloudのサーバだとmakeに買った時間は3分50秒。
Amazon EC2のmicro instanceでmakeをしたら17分55秒かかりました。まさか個々まで差が出るとは思ってなかったので少々この結果には驚きです。

インストールが完了させて、動かしてみる。
例えばsample.jsと言う名前で

var http = require('http');

http.createServer(function (req, res) {

res.writeHead(200, {'Content-Type': 'text/plain'});

res.end('Hello World\n');

}).listen(8124);

console.log('Server running');

を書き込んで、保存して、

# node sample.js

Server running

となれば実行。
あとはRackspaceのIPにポートを指定して、アクセスしてあげると “Hello World”と表示出来て成功。

公式サイト node.js
API ドキュメント node(1) -- evented I/O for V8 JavaScript


2009/02/19

もうFlashは必要ない時代なのかも知れない。

Js 3D by you.
3D experiments

Flash 9が登場した当時、ブロー処理などの機能にとても興奮しました!!

それが今じゃJavaScriptで表現できるわけですから…
なんだかすごいなぁ…

 

それ以上にすごいのはJavaScriptでテクスチャマッピングが可能であると言う事!

JavaScript テクスチャマッピング by you.
js cloth

これは非常にすごい!!

なんだかActionScript 3の登場当時にもこういった局地的なブームが発生しませんでしたっけ:-)
動画や音に関してはどうしてもFlashが必要なる部分がありますが、かなり高度な演出に関してもJavaScriptで… と言いつつも結局はCanvasなんですけどね。

ただ、Flash以上にブラウザの処理能力に依存します。
ですのでこれらサンプルを見る場合はGoogle Chromeで観覧することをお薦めします。

IEとか…

 

via gyuqueさんのJavaScript 3Dが熱い! Google Chromeのキラーアプリに!? Kawa.netブログ(川崎有亮)/ウェブリブログ

2009/02/08

Opera 5~50倍高速なJavaScriptエンジン「Carakan」

早ければいいのか!?
早ければ良いんです:-)

スタック型のバイトコード命令セットから、レジスタ型のバイトコード命令セットに変更。また、ネイティブコードに変換する機能などの工夫によって現行のOpera 10αに搭載されているJavaScriptエンジンの5~50倍もの高速処理が可能と言うことだそうです。
Carakan - Opera Core Concerns

なんだか某OS会社の提供するブラウザ以外はCSS問題はとっくの昔に解決して、次のステージに移ってしまいましたね。
ただ、当たり前ですが一番市場シェアの大きなIEに合わせてサイトを作らないといけないので…

via Opera、最速のJavaScriptエンジン「Carakan」開発計画

2009/02/07

Google Chromeが進化する…そうです。

Google製オープンソースWebブラウザのGoogle Chromeですが、高速化とアドオンに対応するという話題が出ています。

 

まずは高速化。

Google ChromeはGoogleが2年近くかけて開発してきたJavaScriptをネイティブコードに変換することで処理を極限まで早める「V8 エンジン」を採用しています。
このレベルまで来ると正規表現の処理の遅れが目立ち始めたそうです。そこで、その部分を思い切って独自開発してV8に統合するIrregexpという計画を発表しました。

と言うよりもGoogle Chrome 2.0.160に搭載されすでに公開されています。

 

  1. 正規表現を中間オートマトン形式へ変換する。この形式は正規表現を自然に表現できるうえに扱いやすく、分析や最適化を実施しやすい
  2. 最適化する
  3. ネイティブコードへ変換する。バックトラッキングを使っているが、これは時間がかかるため最小限になるように工夫はしてある。このあたりの実装は今後の課題

via Google Chrome、正規表現を独自実装で高速化 | エンタープライズ | マイコミジャーナル

全然何を言っているのか分からないですが、高速化するというのはこんなにも大変なことなんですね。

 

次は拡張機能に対応。

これは昔から明言されていたことですが、具体的に5月頃に登場するのではという噂が出てきました。

Google I/Oウェブサイトに掲載された38セッションの中に、「Google Chrome用拡張機能の開発」というセッションがあることに気付いた

Firefoxと違って各タブが独立しているのでアドオンを作るのが大変そう。それでも対応してくると世界が広がります。

via Google Chromeの拡張機能は5月提供か

 

実際問題スペックのやばいぐらい…なPCで作業しているとGoogle Chromeほど頼れる相棒はいません。確かにFirefoxのアドオンはすごい便利なのですが、その分快適さという点は十分なスペックが必要になるのではないかと感じています。

肥大化することなく、シンプルという進化をこれからも続けてほしいと切に願います。

2009/01/23

jQuery 1.3.1がリリースされました。

先日公開されたjQuery 1.3のバグフィックス版です。
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
Google Ajax library API はまだのようです。
すでに対応済みです!

jQuery: The Write Less, Do More, JavaScript Library
Google Ajax library API で指定しておけばバージョンアップに柔軟に対応出来ます。
ただし、ちゃんとしたサービスを提供している場合はきちんと動作確認しておいた方が良いでしょう。

2009/01/18

Google Chrome 2.0 のバグ

Google Chrome

バグって言うほどでもないですが、JavaScriptが正しく処理されていません。
ちなみにバージョンは2.0.157.2です。いわゆる開発版

 

image

他のブラウザだとちゃんと交互に色がついているんですが…

 

最初にCSSを用いている時は問題が無かったんですが、JavaScript(jQuery)に切り替えてから上の様になってしまいました。

何が問題なんでしょうか?
ちなみにjQueryに切り替えた理由は、CSSだとIEなど対応していないブラウザだと残念なことになっているので…

 

今のところ自分が感じているバグかなと思うところはこんな所でしょうか。
結構Chromeはバックエンドで勝手にアップデートされることがあるので、気がついたら直ってたなんてことを期待しています。

根本的にJavaScriptの書き方が悪いなんて事だったら;p

2009/01/15

jQueryを導入してみた。

沖林 正紀 ¥ 2,919
最初の一歩
初心者に優しくない
jQueryの知識を深めるのにはちょうどいい。
jQueryへの理解を深める上で最適な教科書

先日書いたように、jQuery1.3がリリースされました。
Google Ajax library API も1.3が導入されています。

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js 

 

 image

せっかくなので、サイドバーのTAGの部分のCSSで実装していたストライプをjQueryを使ってIEやFirefox3.0でも見られるようにしました。

コードは単純

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function(){
    $("#tags li:nth-child(4n),#tags li:nth-child(4n+1)").css({"background-color": "#EBE5DC"});
    $("#related-posts li:nth-child(2n+1)").css({"background-color": "#EBE5DC"});
});
</script>

以上です。
前回のBlogger のラベル(タグ)を2列で表示させる | itFun.jpもご参考下さい。

 

jQueryって単純に書けるしとにかく早いので良いよね。

 

ちなみにText-shadowやBox-shadowは完全にブラウザ依存のようで、jQueryを使ってもカバーできませんでした。
IEなら無理矢理filterを使って出来なくもないそうですが…

 

image image

Box-shadowに対応していないのついカッとなって。
基本に返って背景画像を使ってみました;p

あとは、フォントファミリーを指定しました。
メイリオが入っている環境だとちょっと野暮ったくなるかも知れません。こればっかりは見せ方が難しい。

 

CSS云々はJavaScript libraryで解決する時代。

2009/01/12

jQuery 1.3 は1月14日リリース予定!

jQuery website mockup by cole007.
jQuery website mockup on Flickr - Photo Sharing!

シンプルで高性能なJavaScript library

そんなjQueryの新バージョン1.3が今週にも登場します。
さらなる高速・高性能・軽量化が実現されるそうです。ホントすごいですね!

jQuery: The Write Less, Do More, JavaScript Library

 

どうして突然jQueryの話題を書いたかと言えばFancyBoxという非常にCoolなスクリプトを見つけたから。

FancyBox

画像をクリックするとその元になっている画像を、インラインで表示してくれるものです。
画像だけでなく、YouTubeや他のWebページも埋め込み表示可能です。

何よりも見せ方が格好いいと言うことで、ちょっと導入してみようかなぁ~なんて。
このBlogは1つの投稿に1つ以上は画像を載せるようにしています。でも、やっぱり環境によってはそれがボトルネックになっているんじゃないかなぁと。

 

Googleが提供するAJAX Libraries APIを使えば別個にjQueryを用意する必要も無いですし、今回のバージョンアップで他のサービス提供者の方もこれに乗り換えて頂ければWeb全体でさらなる効率化になるのではないでしょうか。

jQueryの良い点はIE6やFirefoxでもCSS 3を用いることが可能な点。
各種実装がそろわないと文句言う前に、jQueryを使おうキャンペーン;p

2008/11/19

CSSにアニメーション機能を


Syntax Error - Folded Up Beyond All Recognition on Flickr - Photo Sharing!

そういえば、このBlogの前のデザインの時に使っていましたね。
webkit-transform を使ってみた | itFun.jp

 

Appleは先日、CSS TransitionsとCSS Animationの2種類の仕様について提案。

CSS Transitionsは比較的単純なアニメーションが可能です。
拡大、縮小、回転など。変化にかかる時間を指定することが出来るので、アニメーションが発生します。

ただ、これは比較的簡単にCSSに書き込むだけで実現できますが、その代わりに読み込まれた順に開始されてそれらが終了したらそこでお終い。という高度なアニメーション効果を実現するには役不足です。

CSS AnimationはTransitionsを拡張する機能を定義しており、@keyframesという指定を行うことで、javascript側からCSS Transitionsを呼び出すことを可能にしています。

 

想定としてはデザイナーがCSS Transitionsを用いて、動きのある部分はAjax libraryでCSS Animationを使うという感じでしょうか。

 

ただ、Flashを用いないというのは良いですね。
Flashの利用を見ていると、ちょっとしたアニメーションのために使っているのが結構な割合を占めているのではないでしょうか。
それが、CSS Transitionsに変わればWebのローディング短縮にもなりますし、Flashの上からだと分かりにくいリンク先の表示や、なによりもマウスジェスチャーが使えるというのが:p

逆にFlashという共通な環境を用いないので、それぞれが別のエンジンでCSS Transitions等を実装した場合さらにデザイナー/デベロッパーの負荷が大きくなってしまうような気がします。
さらに、きちんと実装されていない(IEとかIEとかIEとか)ブラウザーに対しての動作確認も怠るわけにはいきません。

モバイル環境においても同じと思います。
第一ユーザーがWebその物がアニメーションする事に馴れていないんじゃ…

 

冗談でも良いから、WebKitを採用するって言ってよスティーブ!
なぜMicrosoftはIEにこだわるのか? | itFun.jp

 

via CSS TransitionsとCSS Animations、Apple提案のCSSアニメ機能| マイコミジャーナル

2008/11/08

iPhone で CoverFlow を実現する

 

正直たまげた!

inside looking out » Blog Archive » Building CoverFlow for Safari on iPhone

 

もちろんiPhoneなのでFlashは利用できません。
ですので、javascriptとCSSによって実現されています。

画像 115

safariのWebKitはCSSをかなり独自に先行実装していますので、なんとCSSを用いるだけで3D表現が可能です。
3Dのような表現も可能ですが、この場合は<canvas>を利用しているようです。 

使用してみた感じは、まさにCoverFlow。変にFlashで実装したよりかはレスポンスが良いような気がしました:p
このデモはFlickrから動的に画像を取得し表示するというモノです。

CSS VFX Example - 3D Coverflow | Flickr

PCで見ても全然なにも起きませんが、iPhoneでみるとまか不思議!!

 

CSS-VFXなるモノがコアに使われているらしく、それはオープンソースで開発されています。修正BSDライセンスという一番緩いやつです。

css-vfx - Google Code

 

Introduction - css-vfx - Google Code - Introduction to CSS Visual Effects

基本の説明記事もありますが、どうやってダウンロードするのか解らず…
そのうちiPhone系のBlogで解説されると思うので、そのときを待ちましょう:+

 

画像 113

縦にしたときはちゃんとURLバーは隠れてくれますよ。

 

MacやFlashで実装しているのと違って、使い所が難しい気がします。
写真のギャラリーというのが無難ですが、やっぱり一捻りした使い方で「あっ!!」と言わせて欲しいです:p

2008/09/03

Google Chrome を使ってみた

image
Google Reader にアクセスしてみる図

ついに登場したGoogleブラウザ“Google Chrome

 

非常にシンプルでsafari的な印象です。

ただ、firefoxの様に今のところはプラグインが用意されていないのでまだfirefoxの代わりになるものではありませんでした。

 

最低でも乗り換える条件として

  • All in one Gestures
  • Google Toolbar

この2つが最低でも欲しいです。

というかGoogle Toolbarがインストールされていないのは大人の事情??

 

ただ、javascript処理に関しては爆速です!!

Google Readerはfirefoxで見ているときのようなもたつき感が一切なく、これだけのためにGoogle Chromeを使っても良いくらい。

Webアプリケーションをデスクトップにショートカット作成出来る機能があるのでこういったのが目的で作成されているのかもしれません。

 

image

さて、これはこのBlogなので、何かお気づきになりませんか?

そうです。

Webkitを使用しているのにCSS3のtext-shadowが処理されていないのです!!

これは予想外。

 

独特のインターフェイスである、タブが外側というのも案外違和感がない。

(そりゃそうだ。Operaがそうじゃん。考え方は違うけど)

Webその物がブラウザを圧倒するという考えなのでしょう。

 

 

結果。

firefoxの便利な拡張機能が使えないのが痛い。

ただ、それを考えても、履歴機能や圧倒的な処理速度は魅力的です。

2008/09/02

Sexy Alert Box : MooTools

via Woork: Design a stunning Alert Box using MooTools

image

MooToolsを使用したCoolなアラートです。

 

デモはこちら

SexyAlertBox | JavaScript, MooTools, Programacion - www.coders.me

sexyalertbox.jsを読み込めばすぐに使えます。

 

OS依存のアラートはそれが表示されている間はブラウザが操作できませんが、これはそういったこともないです。

画面のスクロールにも自然な感じで付いてきてくれます:-)

テキストエリアも含めることが出来ます。

 

ライセンスはMIT

MooToolsベースで考えるときは、使ってみるのが良いかな。

2008/09/01

はなみち舎

image
はなみち舎 ― 岡山市のレトロモダンな雑貨・和風ファッションのお店

正直すごいです。

 

ナビゲーション部分はスクロールに合わせて付いてくるFlashです。風鈴という演出で、クリックする度にどことなく風鈴の音が聞こえてきます。

サイトの内部には至る所に動的なコンテンツを組み込んでいます。Flashを使用しているのですが、これがCssデザイン部分とキレイに溶け込んでいるので、違和感がないです。

 

圧倒的なセンスです。

Web Designingは訳の分からない海外サイトじゃなくて、こういった日本のサイトを特集して欲しい。

jParallax

via 奥行きのあるシーンを実現できるjQueryのプラグイン『jParallax』 | IDEA*IDEA

image

これは素直にぶったまげた!!

webdev.stephband.info

名前からもお察しできると思いますが、jQueryのプラグインです。

 

画像を複数レイヤー重ね、マウスの動きで奥のレイヤーほど移動量を少なくすることで、あたかも立体的であるかのような表現が出来ます。

image

Flashなら比較的簡単に実現することが出来ますが、それをjavascriptで実現しちゃうなんて!!

 

注意点はFlashに比べて効率が悪いこと。

沢山のレイヤーと画像を読み込んで書き出さないといけないので、1つのファイルを読み込むだけで良いFlashに比べちゃうと劣りますが…サイト全体に適用しようと思えば出来るので、すごいかな。

 

サイトのロゴマーク程度に使用を抑えておけば格好いい表現が出来そうです。

2007/09/19

jQuery 1.2.1 & UI Release

via 15のバグを修正したjQuery 1.2.1を発表 - 1.2の採用者はアップグレードを | マイコミジャーナル ずいぶん前になりますが、簡単で高速に利用することの出来るjavascript libraryのjQueryの最新版がリリースされました。 そしてjQuery 1.2.1はそのバグフィックス版。 それと同時にjQuery UIがリリースされました。 高品質で再利用可能なウィジェットコンポーネントでWebアプリケーションを開発するのを手助けしてくれるそうです。
Extremely, it is before, but being simple, the latest edition of jQuery of javascript library which can utilize in high speed was done release. And as for jQuery 1.2.1 the bug fix edition. JQuery UI was done release simultaneously with that. The fact that with high quality Web application is developed with the reuse possible widget component is helped, so is. by Google Translate

2007/09/17

Google Reader My Star's

かなり前にLDRに失望して、Google Readerに乗り換えた(昔のDesignの時)わけですが、それ以来「あとで読む」的に増えていくスター


大掃除をかねて一気に記事にしてみようと思います。


CSSベースのフォームテンプレート:phpspot開発日誌
フォームのCSSテンプレート


caramel*vanilla - 記事を書くときに注意してる事・注意していきたい事
耳にいたい話です。気をつけていかないと


caramel*vanilla - Updated Now プラグインのバナーを作りました
Wordpressのプラグインと合わせると更新があったら端っこに更新したことを通知してくれる。


1985年に製作されたコンピューターアニメーションのムービー - GIGAZINE
考えてみれば、最初のMacのパンフレットの日本美人もMacPaintで描かれてるんだよね(関係ないけど


あるSEのつぶやき: JavaScriptでDB操作ができる「JSDB」の検証記事のご紹介
Ajaxで全部が完結できるのかな!?


caramel*vanilla - tumblrでTumblelogをはじめてみた
tumblrには興味あるので


hereticanthem co.,ltd. » Photoshop&Illustratorのチュートリアルまとめ
使いこなしたいですが、敷居が高くて・・・


断片化を爆速で処理する無料デフラグソフト「Auslogics Disk Defrag」 - GIGAZINE
これはあとで試してみないと☆


actionscriptグループ - ConquestArrow.addEventListener(); - ActionScript3 最適化・高速化Tips 簡易まとめ
これに頼るようなプログラムを書いてみたい・・・orz


Fonts 500 - Flex Note
Fontを500種類ほど


Firefoxから直接Flickrなどへファイルをアップできる『FireUploader』 | 100SHIKI.COM
公式サイトを見たところ対応しているのはFlickr・Box.net・Picasaだけかな


Going My Way: 携帯から青空文庫を使えば、いつでもどこでも本が読める
実際に使って読んでみました。やっぱり本は本で読みたい:P


マジックトリック集 from HiroIro
これはすごい!! こりゃー ユリゲラーもYouTubeを裁判したくなるわ


国産最強のフリーソフトシンセサイザー「Synth1」 : Gizmodo Japan(ギズモード・ジャパン)
ドレミも分かりませんが、これは凄そう


件名「Re:」が5割超え、携帯電話メール受信箱の中身--アイシェア調べ:モバイルチャンネル - CNET Japan
タイトルを気にかける自分は一体・・・

定期的に削除していたので、あまり数は無かったかな。
早速tumblrのアカウントを取りに行こう!!