Javascript

[js] Closure Tools用コンパイルツール plovr について

by

plovrはClosure Toolsに依存するJSとClosureTemplateのSoyファイルのローカルコンパイルデーモン。

普通にClosure LibraryやClosure Templateを使う時は　作成→コンパイル→コンパイル後のソースで動作確認　という手順になるが、
plovrを使うと、作成→コンパイル前後のソースで動作確認→コンパイル　という手順に変わる。

作りながらコンパイル後の動作確認ができる。というのが主たる恩恵だが、それだけじゃなく、
必要になった時だけJSファイルを読み込めば良いように、JSファイルをメインとモジュールに分割して作りたい場合にも使えるツールです。

続きを読む

[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい

by

スマートフォンのブラウザアプリで画面の高さにきっちり収まる仕様で作っていると
高さが足りないのでwindow.scrollToしてもアドレスバーが隠せない。
でも隠した方が表示領域が増えるので何とかしたい。
単純に考えればアドレスバー分bodyの高さを増やせばいい、ってことなんですが…

続きを読む

[js] 店長の部屋Plus+ のブログRSSを楽天ショップ内に表示する

by

楽天には店長の部屋Plus+っていう店長ブログがあるんだけど、なぜかどこのショップもRSS表示をショップに表示していないから不思議に思ってたんだ。
よくみるとドメインが違うんだよね。普通のJavaScriptで表示しようとすると面倒だけど、
Google先生の Google AJAX Feed API を使えば簡単に表示が出来ちゃうぞ。
JavaScriptとか分からない人向けに表示の仕方を書いておきます。

続きを読む

[HTML5] Drag and Drop API のこと

by

HTML5のドラッグ＆ドロップはこれ書いてる時点でFirefox、Chrome、IEが対応。
しかしIEの場合はFileReaderとデータURI未対応だから全く面白みがない。

Drag出来るといってもMooToolsやjQueryなどで実装するようなぬるぬる動かすようなものではなく、
html5.jpのチェックページにあるツールのように、右から左へ受け流すようなことしか出来ない。
jQueryとの比較がこのサイトで見れる。

故にshapeshed.comのデモみたく、ゴミ箱にドキュメントを捨てたり、カートに商品を入れたりする用途には向いているが
自由奔放にドラッグさせるとなるとFrameworkの力を借りるより他ない。

サンプルでよく見るのはコンピューターにあるファイルをブラウザウィンドウにドラッグして、
そのファイルの中身をFileAPIで読み込んでこねこねするっていうやつだと思う。
以下に簡単なサンプルを示す。

続きを読む

[js] あの楽器の図形描画をcanvasで

by

あの楽器は初音ミクがPVで持ってる楽器の事です。

一年ちょっと前にMooToolsでやろうとして匙を投げたんだけど、
「canvas使えばやれるかな」と当時言ってた事を覚えがてらやっつけてみた。

AnoRect – jsdo.it – share JavaScript, HTML5 and CSS

忘れないうちに図形描画の解説入れておこうと思う。

続きを読む

[js] 正規表現で拡張子・スキーム・ドメインを一括マッチング

by

アンカーのhrefに含まれる拡張子やスキームに応じたアイコンを表示するっていうのはCSSでよくあるけど、
ドメインに応じてfaviconと同じアイコン表示するのは見たことがない。

どこのサイトか判別するなら大体こんなパターンが考えられる：

  • www.sitename.com …　真ん中にサイト名
  • sitename.com　…　先頭にサイト名
  • service.sitename.co.jp　…　サービス名＋サイト名
  • site.name　…　ドット無くすとサイト名

その理屈をjavascriptの正規表現でやっつけてみたのが次のソースです。

var TextlinksAddClass = function(target,title){
this.target = target || document;
this.title = title;

this.start = function(){
var anc = this.target.getElementsByTagName(“a”);
for(i=0; iView Demo »

del.icio.usみたいなドット無くすとサイト名になるものは判別してない。

上記はアンカーにclassとtitleを付与するものですが、改変して
createElement(“img”)やstyle.backgroundでclass+’.png’とかすれば自動的にアイコンの挿入が出来る。
アンテナサイトとかで使えるかも。

続きを読む

[php + js]読み終えたページによって登場人物紹介ページの内容を変える

by

質問サイト見てたら面白いネタを発見！

私は今、長編小説をHPに公開しようと思っています。
キャラクター紹介のページを作ろうと思っているのですが、
読んだ読者さんによって表示される内容を変えたいのです。
例えば第一章で登場するAとBというキャラがいたとします。
読者さんが第一章を読んだらキャラ紹介のページにAとBのキャラクターの紹介が加わる。
という形にしたくて、cookieを使用しようと思うのですが、
なにぶんこのような操作ははじめてでしてどうしたらよいのかわかりません。
各章の最後のページにクッキーを食べさせるjavascriptを書いて、
キャラ紹介のページでクッキーを読み込み、キャラの説明文を表示したいです。

物語が進むにつれて、他キャラが増えたり、説明文に追記が加わるようにするにはどうしたら良いでしょう。
cookie使用があまりなく、調べましたがよくわかりませんでしたので詳しく教えていただけましたら幸いです。

独自CGI作ってもよさげな発想だと思ったんだけど、PHPとJavaScript使えば比較的簡単に出来るので、
デモとサンプルソース晒しときます。

ページ構成と概要

  • index.html
    小説のトップページ（つまり1ページ目 or 第一章）
  • 2.html
    2ページ目　or 第二章（以降、ページまたは章と同じファイル名で連番にする）
  • cast.php(cast.html)
    キャラクター紹介ページ
  • mychar.js
    クッキー発行スクリプトファイル

トップは1.htmlでもindex.htmでも何でもいいですが、
2ページ目より後のページを　番号＋拡張子　にします。

サンプルはこちら

続きを読む

固定ページ: 1 2

[JavaScript,PHP] 新年の挨拶を自動的に表示する

by

新年に限らず、イベントにちょっとしたアクションを起こしたい人向けのスクリプト。
例は簡単にできる画像変更なんですが
やってることはタイムスタンプによる比較なんで、これを応用すればいろいろなことが出来ます。

まず挨拶の画像を用意したら、表示したい場所にこっそり透明の画像を仕込んでおく。
透過画像が作れなければ、背景色と同じ色の画像でもOK。サイズは1px×1pxで。

<img src="spacer.gif" alt="" id="hny" />

次のソースをコピペして、コメントがついている部分の値を適切に変更する。

window.onload = function() {

	var imgName = "hny";//変更対象となる画像のID
	var newPass =  "01.jpg";//変更する画像のパス

	var today=new Date();
	var newday = new Date(today.getFullYear()+1,0,1);//月は０～１１

	if(today.getTime() >= newday.getTime()){
		document.getElementById(imgName).getAttributeNode("src").value= newPass;
	}
}

headやbodyに入れるとソースでネタバレてしまうので、jsファイルにコピペして読み込ませた方がバレにくい。と思う。

※なお、すでにwindow.onloadを使用している場合は、中身だけコピペしてください。

続きを読む

[javascript]　URIからドメインだけ正規表現で取得する

by

正規表現によるマッチング。location.hrefにmach()使ってドメイン部分を取り出す。

  • http://www.google.co.jp/ →　www.google.co.jp
  • http://example.com/　→　example.com
  • file:///D:/→　D
  • http://localhost/hoge/index.html　→　localhost
  • http://127.0.0.1:8000/　→　127.0.0.1　

※表示の都合上、全角の「？」が混じっているので注意

var str = "http://www.google.co.jp/";
var domain = str.match(/^[httpsfile]+:\/{2,3}([0-9a-z\.\-:]+?):？[0-9]*?\//i)[1];
alert(domain);

変数domainは配列になり、domain[0]にはプロトコルからドメイン後ろのスラッシュまで、
domain[1]にはドメイン部分のみが格納されます。
変数strをlocation.hrefにすると、表示しているページのURIがマッチング対象になる。

続きを読む

prototype.js vs jquery vs mootools vs YUI vs Dojo

by

prototype.js、jquery 、mootools、YUI 、DojoAdobeSpry、Dojo、
MicrosoftAjax、YUI、Rico、MochiKit、Ext、Alfax、script.aclo.us…
実際使ってるのから名前は聞いたことある程度のものまで、色々と出てきて便利なのはいいんだけど、
正直どれ使えばいいのか分からない…(´д｀)という時もある。自分は大抵mootoolsだけどｗ
選ぶ時の参考になるかもしれないAjaxフレームワークのベンチマーク記事の紹介。

まずPeter Velichkov’s Blogの
MooTools vs JQuery vs Prototype vs YUI vs Dojo Comparison Revisedでは
タイトルに挙げたprototype.js、jquery、mootools、YUI、Dojoのベンチマークをグラフにして比較しています。
単純に速度だけの計測なので、サクサク感で選びたいときの参考になる。

続きを読む