2013年12月11日

続・YouTubeで特定のチャンネルのリストを表示

YouTubeで特定のチャンネルのリストを表示だとIE9以下でエラーで表示できなかったので修正。

getJSON()から$.ajax()に変更、dataによる値の受け渡しができないようなので引数で受け渡すようにしたらIE9以下でも動いた。

$.ajax({
url: 'http://gdata.youtube.com/feeds/api/users/チャンネル名/uploads?v=2&alt=json',
success: function(json){
var items = json.feed.entry;
$.each(items,function(i){
$("#youtube ul").append('<li><a href="'+ items[i].link[0].href +'" target="_blank"><img src="'+items[i].media$group.media$thumbnail[0].url+'" /><p>'+ items[i].title.$t + '</p></a></li>');
});
}
});
posted by ねこまんま at 05:36 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2013年05月17日

Dust.jsを利用したテンプレートの埋め込み方法

Dust.jsを利用したテンプレートの埋め込み方法

<script id="tmpl" type="text/html">
{bar}
</script>


<script>
var temp = $.trim($("#tmpl").html());
var data = {bar : "fuga"};
var compiled = dust.compile(temp, "intro");
dust.loadSource(compiled);
dust.render("intro", new_data, function(err, out) {
$("#tmpl").after(out);
});
</script>
posted by ねこまんま at 16:28 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2013年02月08日

a要素のhashプロパティ

ページ内スクロールを実装する以下のようなサンプルスクリプトをどっかでみかけました。ここで注目は「this.hash」、domオブジェクトのa要素はhrefのハッシュ値を簡単に取り出せるっぽいです。

$(function(){
$('a[href^=#]').on('click', function(){
//クリックした要素の#を変数に入れる
var Target = $(this.hash);
//行き先までの画面上の高さの数値を変数に入れる
var TargetOffset = $(Target).offset().top;
//アニメーション時間ミリ秒
var Time = 700;
//集めた情報を元にアニメーション
$('html, body').animate({
scrollTop: TargetOffset
}, Time);
return false;
});
});
タグ:hash
posted by ねこまんま at 11:12 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2013年01月31日

カタカナかどうかチェックする正規表現

■カタカナかどうかチェックする正規表現

/^[ァ-ンァ-ン゙゚]*$/


■全角カタカナかどうかチェックする正規表現

/^[ァ-ン]*$/


■半角カタカナかどうかチェックする正規表現

/^[ァ-ン゙゚]*$/
タグ:正規表現
posted by ねこまんま at 23:17 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年08月30日

特定のオブジェクトがグローバルに存在するかどうかをチェック

特定のオブジェクトがグローバルに存在するかどうかをチェック

in演算子を利用します。

var hoge;
if("hoge" in window){
console.log("ok")
}else{
console.log("ng")
}
タグ:in
posted by ねこまんま at 12:44 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年07月15日

Backborn.js入門

とりあえずBackborn.jsを触ってみた感想

Backborn.jsは単体では動作せず、Underscore.jsとjQuery、json2.jsと合わせて利用する。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>


まずは以下のような基本コードを実行「hello world」を表示してみる

(function($){
var ListView = Backbone.View.extend({
el: $('body'),
initialize: function(){
_.bindAll(this, 'render');
this.render();
},
render: function(){
$(this.el).append("<ul> <li>hello world</li> </ul>");
}
});
var listView = new ListView();
})(jQuery);


initializeメソッドはインスタンス生成時に自動で呼び出されるメソッド、renderはページのレンダリング時に利用するメソッド、_.bindAllはイベント性実行時のthisを固定化するメソッド。

つぎはボタンをクリックした際に「hello world1」、「hello world2」と連番で出力するサンプル。

(function($){
var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem');
this.counter = 0;
this.render();
},
render: function(){
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
},
addItem: function(){
this.counter++;
$('ul', this.el).append("<li>hello world"+this.counter+"</li>");
}
});
var listView = new ListView();
})(jQuery);


renderメソッドでボタンとul要素を出力して、eventsではイベントを生成しておきます。addItemは数値をアップしながらli要素を追加していきます。

つぎもボタンをクリックした際に「hello world1」、「hello world2」と連番で出力するサンプル。ただ、文字列をハードコーディングせず、modelで管理

(function($){
var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
}
});
var List = Backbone.Collection.extend({
model: Item
});

var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem');
this.collection = new List();
this.collection.bind('add', this.appendItem);
this.counter = 0;
this.render();
},
render: function(){
var self = this;
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(item){
self.appendItem(item);
}, this);
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter
});
this.collection.add(item);
},
appendItem: function(item){
$('ul', this.el).append("<li>"+item.get('part1')+" "+item.get('part2')+"</li>");
}
});

var listView = new ListView();
})(jQuery);


新たにmodelを追加、modelはBackbone.Collectionに渡すことでviewとの連携が可能になります。モデルはthis.collectionに保存。addというイベントとしてappendItemメソッドにバインドします。

次はViewをItemとList2つに分けて管理
(function($){
var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
}
});

var List = Backbone.Collection.extend({
model: Item
});

var ItemView = Backbone.View.extend({
tagName: 'li',
initialize: function(){
_.bindAll(this, 'render');
},
render: function(){
$(this.el).html('<span>'+this.model.get('part1')+' '+this.model.get('part2')+'</span>');
return this;
}
});

var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem');

this.collection = new List();
this.collection.bind('add', this.appendItem);

this.counter = 0;
this.render();
},
render: function(){
var self = this;
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(item){
self.appendItem(item);
}, this);
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter
});
this.collection.add(item);
},

appendItem: function(item){
var itemView = new ItemView({
model: item
});
$('ul', this.el).append(itemView.render().el);
}
});

var listView = new ListView();
})(jQuery);


最後は削除や編集を取り入れたバージョン

(function($){
Backbone.sync = function(method, model, success, error){
success();
}

var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
}
});

var List = Backbone.Collection.extend({
model: Item
});

var ItemView = Backbone.View.extend({
tagName: 'li',
events: {
'click span.swap': 'swap',
'click span.delete': 'remove'
},
initialize: function(){
_.bindAll(this, 'render', 'unrender', 'swap', 'remove');
this.model.bind('change', this.render);
this.model.bind('remove', this.unrender);
},
render: function(){
$(this.el).html('<span style="color:black;">'+this.model.get('part1')+' '+this.model.get('part2')+'</span>     <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>');
return this;
},
unrender: function(){
$(this.el).remove();
},
swap: function(){
var swapped = {
part1: this.model.get('part2'),
part2: this.model.get('part1')
};
this.model.set(swapped);
},
remove: function(){
this.model.destroy();
}
});

var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem');
this.collection = new List();
this.collection.bind('add', this.appendItem);

this.counter = 0;
this.render();
},
render: function(){
var self = this;
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(item){
self.appendItem(item);
}, this);
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter
});
this.collection.add(item);
},
appendItem: function(item){
var itemView = new ItemView({
model: item
});
$('ul', this.el).append(itemView.render().el);
}
});
var listView = new ListView();
})(jQuery);


参考:Hello Backbone.js
タグ:Backborn.js
posted by ねこまんま at 04:21 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年05月22日

Safariかどうか判別する

Google ChromeとSafariで日本語のlocation.hashの違い(参考:ブラウザごとのlocation.hashの挙動のまとめ - ?D of K)から条件分岐して対応しなくてはいけなくなったので簡単なメモ。

$.browser.safariだと$.browser.webkitと同じ意味でGoogleChromeも検出してしまいます。

つぎのようにUserAgentにSafariをふくんでChromeを含まない場合のみに処理を行うとよい。

if( navigator.userAgent.indexOf("Safari") > 0 &&
navigator.userAgent.indexOf("Chrome") < 0 ){
location.hash = "#"+encodeURIComponent(”ほげ”)
}else{
location.hash = "#"+”ほげ”
}

posted by ねこまんま at 16:42 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年03月02日

JavaScriptやCSSを圧縮する

JavaScriptやCSSを圧縮するにはYUI Compressorがあるけどオンラインでサクっと圧縮したい場合は以下のサイト使えばいいかも。

Online JavaScript/CSS Compression Using YUI Compressor
タグ:javascript CSS YUI
posted by ねこまんま at 18:13 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年02月25日

popstateで戻るボタンを押された際の挙動を制御する

popstateで戻るボタンや進むボタンを押された際の挙動を制御することができます。

$(function(){
setTimeout(function(){
window.addEventListener('popstate', function() {
$("body").append("<p>aa</p>")
},100);
})
});


dom ready時に発火してしまうので100ミリ秒後にバインド。ページ遷移後に戻るボタンが押されたらイベントが発火します。pushState時に設定したデータを取得することも可能。

WebKit Android: 2.2 〜 2.3のみ、iOS : 4.2〜5.0のみで動作します。参考
posted by ねこまんま at 11:14 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年02月19日

AmazonWebサービスのエラーを修正

作成したツールが動かなくなったので色々と修正。

まず、2012年2月22日で2011-08-01バージョンを除くバージョンが停止してしまったらしいのでVersionを「2011-08-01」に変更。

それでも動かず、どうもAssociateTagが必須になったらしくAssociateTagを追加すると動き出すようになりました。

Amazon Product Advertising APIの利用方法は「Amazon Product Advertising API」や「hash_hmac をPHP4で利用するライブラリ」を参照。
posted by ねこまんま at 17:29 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年02月12日

keyframesをJavaScriptで制御

createElementでstyle要素を作成することでkeyframesのアニメーションをJavaScriptで動的に生成できる。

var main01main = [
"0% {left:100px}",
"50% {left:200px}",
"100% {left:300px}"
];
var cssAnimation = document.createElement('style');
cssAnimation.type = 'text/css';
var rules = document.createTextNode('@-webkit-keyframes main01main {'+
main01main.join(" ")+
'}');
cssAnimation.appendChild(rules);
document.getElementsByTagName("head")[0].appendChild(cssAnimation);
posted by ねこまんま at 01:34 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年02月06日

JavaScriptでランガムに画象を表示する

JavaScriptで配列に画象を入れておいてランガムに表示する方法

var images = ["dummy01.png","dummy02.png","dummy03.png"];
var i = Math.ceil(Math.random() * images.length | 0);
document.write("<img
タグ:javascript
posted by ねこまんま at 14:17 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

JavaScriptでcookieの書き出しを行う

JavaScriptでcookieの書き出しを行う関数

function setCookie(key, val, tmp) {
tmp = key + "=" + escape(val) + "; ";
tmp += "expires=Tue, 31-Dec-2030 23:59:59; ";
document.cookie = tmp;
console.log(document.cookie)
}
function getCookie(key, tmp1, tmp2, xx1, xx2, xx3) {
tmp1 = " " + document.cookie + ";";
xx1 = xx2 = 0;
len = tmp1.length;
while (xx1 < len) {
xx2 = tmp1.indexOf(";", xx1);
tmp2 = tmp1.substring(xx1 + 1, xx2);
xx3 = tmp2.indexOf("=");
if (tmp2.substring(0, xx3) == key) {
return(unescape(tmp2.substring(xx3 + 1, xx2 - xx1 - 1)));
}
xx1 = xx2 + 1;
}
return("");
}


jQuery 使ってる場合はjQuery Cookieとか使うとよさげ

via:Cookie(JavaScript版)のソースコード

via
タグ:Cookie
posted by ねこまんま at 14:14 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年01月20日

JavaScriptで互換モードかどうか確認する

IE8には標準のIE8標準準拠モード 以外に互換モードという描画モードが用意されていてこれが色々と問題を引き起こす。

document.documentMode;


というプロパティが5の場合は互換モードなので

if(document.documentMode && document.documentMode == 5) {
myMode = true;
}


とかで互換モードの場合のみフラグを付けることができる
posted by ねこまんま at 12:16 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年12月17日

jQueryで画像の縦横を揃える

画像の縦横を揃える、横幅が多い場合は168pxいないで表示して、高さがあふれる場合は111px以下に縮小する方法

<img src="products.gif" width="168" />


画像には属性をつけて横幅を縮小しておく。その上で以下のjQueryスクリプトを実行する

$(window).load(function(){
$(".hoge img").each(function(){
if($(this).height()>111){
$(this).removeAttr("width").height(111)

}
})
});


そうすると画象の縦横比を崩さずに縦が111px以内、横が168px以内に縮小できる。
タグ:jquery
posted by ねこまんま at 17:52 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年11月06日

Facebookコメントを通知する

Facebookのコメントソーシャルプラグインをページ内に配置すると簡単にコメント機能を実装することができますが、いつコメントがあったかを通知してくれません。

Comment Moderation Toolを利用すると、どのページにどんなコメントが書かれているかを見ることができます。(fb:app_idの設定が必要)

さらに、コメントプラグインの「設定」からモデレーターを指定することで、コメントがあった際にモデレーターにも通知が行くようになります。

posted by ねこまんま at 01:25 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年10月28日

Firefoxでスクロール位置がリセットされる現象に対応する

Firefoxでhtml要素にoverflow:hiddenを指定しているとscrollToメソッドなどでスクロール位置の制御ができない。

overflow:hiddenなどを指定しておいてscrollToメソッドなどでスクロール位置を変更することは可能だがその後html要素をoverflow:hiddenに変更すると初期値の戻ってしまう。

document.defaultViewで対応可能で、色々試したところクロスブラザを考えると次のようなコードになる

window.scrollTo(0,0);
$("html").css("overflow","hidden");
if(document.defaultView)document.defaultView.scrollTo(0,0);


via:スクロール位置を維持しつつ web ページ全体のスクロールをできないようにする方法 (web ページのスクロール位置固定) - vivid memo
posted by ねこまんま at 11:45 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年10月14日

ASPのDataGridにドラッグアンドドロップを追加

ASPのDataGridで作られたtableをドラックアンドドロップで操作したいんですがASPコントロールとか糞システムはHTMLの変更もままならい。theadとか行儀よく書きだしてくれたらいいのに駄目HTMLを書きだす。

$(function(){
var thead = $('').append($("#hoge .field-Title"));
$("#hoge").prepend(thead);
$("#hoge tbody").sortable({cancel:"tr.field-Title"}).disableSelection();
});


として無理やりthead書き出してFirefoxは対応した。tableはブラウザによってtbody保管したりしなかったりするからブラウザ調整が必要になる予定。
posted by ねこまんま at 01:31 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年10月13日

テキストフィールドでエンターを押されてもsubmitしないようにする

テキストフィールドでエンターを押されてもsubmitしないようにする方法。

$(document).delegate("input.hoge","keypress",function(e){
if(e.keyCode==13){
return false;
}
}):


タグ:keypress
posted by ねこまんま at 01:50 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

blur時のfocus()

blur時にfocusを設定しようとしたらうまくいかなかった。Firefoxで

$(document).delegate("#hoge","blur",function(){
if(isNaN($(this).val())){
alert("数値を入力してください");
$(this).get(0).focus();
}
});


こう言った場合はsetTimeoutでだいたいどうにかなる。

$(document).delegate("#hoge","blur",function(){
if(isNaN($(this).val())){
alert("数値を入力してください");
var self = this;
setTimeout(function(){
$(self).get(0).focus();
},100);
}
});


こういう細かいはまりどころがめんどくさい。
タグ:Blur FOCUS
posted by ねこまんま at 01:22 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年09月19日

PhoneGapでAndroidアプリ

PhoneGapでAndroidアプリをインストールするまでの備忘録

PhoneGapのインストールAndroid SDKのインストールはすでに完了してる。

Eclipse Classic 3.7のMac OS 64bitをダウンロード。ダウンロードした「eclipse-SDK-3.7-macosx-cocoa-x86_64.tar.gz」を解凍した「eclipse」を適当なフォルダへ。その後eclipsを
起動(workspaceは適当に)。

Eclipseのメニューから[Help]→[Install New Software]、[Install]ウィンドウが開いたら、[Add]ボタンをクリック。[Name]に「ADT Plugin」、[Location]に「https://dl-ssl.google.com/android/eclipse/」と入力して、[OK]。その後、「Pending...」が「Developer Tools」に変化したら、[Select All]→[Next]。後はウィザードに沿ってインストール。

メニューの[Eclipse]→[Preference]を選択、左メニューの「Android」を選択[SDK Location]にAndroid SDKまでのパスを入力(/Applications/android-sdk-mac_x86など)、その後[Apply]を押すと、Android SDKが読み込まれます。

Eclipseのメニューから、[File]→[New]→[Project]、[Android]→[Android Project]を選択

Eclipsワークスペースに、「HelloWorld」フォルダが作成されているので、その直下に「libs」フォルダを新規作成し、ダウンロードしたPhoneGapアーカイブの「Android」フォルダの中にある「phonegap.1.0.0.jar」を「libs」フォルダの中にコピーします。「aseets」フォルダの中に「www」フォルダを作成し、その中に「index.html」を作成した後、「Android」フォルダの中にある「phonegap.1.0.0.min.js」をコピーします。「res」フォルダにXMLフォルダをコピーします。

EclipseのPackage Explorerでプロジェクトを選択、まずは「src/com.example.helloworld/HelloActivity.javaを編集します。

package com.example.helloworld;

import android.app.Activity;
import android.os.Bundle;

public class HelloActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}


を次のように変更

package com.phonegap.helloworld;

//import android.app.Activity;
import android.os.Bundle;
import com.phonegap.*;

public class App extends DroidGap{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
super.loadUrl("file:///android_asset/www/index.html");
}
}


エラーが出るようだったらPhoneGapのjarファイルを読み込めてない可能性が高いので、EclipseのPackage Explorerで、「libs」フォルダを右クリックし、 「Build Path」→「Configure Build Path」を選択し、 「Libraries」タブ内で「Add JARs...」→「libs」→「phonegap-1.0.0.jar」を選択し、 「OK」を押します。 最後にプロジェクトを更新(F5)してください。

次にAndroidManifest.xml を編集「Open With」 から「 Text Editor」で開きます。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.phonegap.helloworld"
android:versionCode="1"
android:versionName="1.0">


<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".App"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>

</application>
</manifest>


を次のように変更

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.phonegap.helloworld"
android:versionCode="1"
android:versionName="1.0">
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />

<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".App"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.phonegap.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> <intent-filter> </intent-filter> </activity>
</application>
</manifest>


index.htmlは次のようにしておく

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap.1.0.0.min.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>


エミュレータでチェックするにはプロジェクトを右クリックして[Run as]→[Android Application]を選択。プロジェクトが複数ある場合は[Run as]→[Run Configurations]で設定画面を開き左の+ボタンで新しいプロジェクトを追加して[Run]。

実機で確認するにはAndroid本体をUSB接続でつなげて「Target」タブでManualを選択、「Run」するとChoose arunnign Android deviceで実機確認ができます。



参考:PhoneGapでAndroidアプリを作るための基礎知識
Get Started Guide « PhoneGap
[DroidGap]のクラス部分が 「DroidGap cannot be resolved to a type」 と表示される場合の対応
posted by ねこまんま at 09:23 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年09月10日

FacebookページのiFrameの高さを揃えスクロールバーを表示しないようにする

ページの一番最後に次のようなコードを入れておくとiFrameの高さがコンテンツとおなじになりスクロールバーを表示されないようになります

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : 'xxxxxxxxxxxxxxx',
status : true, // check login status
cookie : true, // enable cookies
xfbml : true, // parse XFBML
logging : true
});
FB.Canvas.setAutoResize();
</script>
posted by ねこまんま at 04:13 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

PhoneGap入門

参考:ASCII.jp:HTML5でiPhoneアプリ開発!PhoneGap入門|古籏一浩のJavaScriptラボ

参考元とちょっと違うところもあったので、補足がてらインストール手順を紹介。Xcodeはインストールしているので飛ばします。ただ、実機確認するにはiOS Developer Programへ参加(年間1万800円)とXcode4が必要らしいです、おいおい購入としておこう。

まずはPhoneGap本体をダウンロード。

iOSフォルダ内にある「PhoneGap-1.0.0.dmg」を展開、「PhoneGap-1.0.0.pkg」をダブルクリックして開く。

インストーラーが立ち上がるのでウィザードにそってインストール。

つぎは、/Developer/Applications/xcode.appからXcodeを立ち上げる。

「Create a new Xcode project」から新規プロジェクトを作成、左のテンプレートから「PhoneGap」を選択して「選択」、適当なプロジェクト名を付けて保存。

wwwフォルダ内にプロジェクトのHTMLファイルがあるので色々操作できます。

iOSシュミレーターでの確認はプロジェクトメニューから「アクティブな実行可能ファイルを設定」→「iPhone Simulator 4.3」を選択後、「ビルドと実行」ボタンで確認できます。
posted by ねこまんま at 02:33 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年09月04日

Excelで書きだしたXMLをパースするスクリプト

要件としたはデータはExcelで管理して、Excelで書きだしたXMLを利用してAjaxでサイトを管理するという物。

Excelが書きだしたXMLは次のような感じなので

<Row>
<Cell><Data ss:Type="String">001</Data></Cell>
<Cell ss:StyleID="s62"><Data ss:Type="String">北海道</Data></Cell>
<Cell><Data ss:Type="Number">1</Data></Cell>
</Row>
<Row>
<Cell><Data ss:Type="String">001</Data></Cell>
<Cell ss:StyleID="s62"><Data ss:Type="String">北海道</Data></Cell>
<Cell><Data ss:Type="Number">1</Data></Cell>
</Row>


なので次のようにすると取得できる。

$("Row",xml).each(function(i){
console.log($("Cell",this).eq(0).text())
});


ただ、空欄のセルなどがあると

<Row>
<Cell><Data ss:Type="String">001</Data></Cell>
<Cell ss:StyleID="s62"><Data ss:Type="String">北海道</Data></Cell>
<Cell><Data ss:Type="Number">1</Data></Cell>
</Row>
<Row>
<Cell><Data ss:Type="String">001</Data></Cell>
<Cell ss:Index="2"><Data ss:Type="Number">1</Data></Cell>
</Row>


といった具合にCell要素は書き出されずにss:index属性が追加される。そうするとeqメソッドだと列数がずれてしまうので次のように貼り列に入れる際にインデックス番号を調整すればいけます。

$("Row",xml).each(function(i){
var data = [],def=0;
for(var i=0;i<12;i++){
if($("Cell",this).eq(i-def).attr("ss:Index")){
var new_def = $("Cell",this).eq(i-def).attr("ss:Index")-i-1;
i=$("Cell",this).eq(i-def).attr("ss:Index")-1;
def = new_def;
}
data[i] = $("Cell",this).eq(i-def).text()
}
console.log(data[2]);
});

posted by ねこまんま at 11:07 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年08月27日

画像の読み込みが終ったあとにスクリプトを実行する

要素の高さを求めたい場合に要素内に画像などが含まれていたら正確な高さが取得できない。デフォルトのHTMLならwindow.onloadで良いけどJSで追加した要素の場合どうするのよ。

コンテンツにheight属性のない画像が含まれていると正しい高さが取れない :: 5509

これで取れそうな気もするけどなんか上手くいかない。

$("#mainContent").html(mainContent);
var imgSize = $("img",mainContent).size();
$("img",mainContent).load(function(){
--imgSize;
if(imgSize==0){
//実行したい命令
}
})


これでうまくいった。

とおもったら駄目だったので「画像の読み込みが終ったあとにスクリプトを実行する2」に続く。
posted by ねこまんま at 04:30 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年05月20日

CocProxyで簡単コーディング

CocProxyってのはサーバーのファイルをローカルのファイルと差し替えて表示できるプロキシー、本番環境で動かない!なんてさいにJavaScriptやCSSをローカルでゴニョゴニョできて便利なんですよ。

Macの利用方法は以下のサイトを参照
OSXにCocProxy(置換プロキシ)を設定してみる | 技術部 | TAC部Log

WindowsはRubyをインストールしたりしなくていろいろめんどくさかった記憶、次のサイトを見て頑張ってインストールしてください。
「CocProxy」という便利なツールを知っていますか? - livedoor ディレクターブログ




タグ:CocProxy
posted by ねこまんま at 21:03 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年04月24日

Facebookのいいねボタンを設置-XFBML編-

ネタ元:FacebookのLike Button(いいねボタン)の設置

Facebookのいいねボタンには「iframe」版と「XFBML」版とがあって「XFBML」版は高さを自動調整津してくれるので使いやすい。

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="http://javascript-memo2.seesaa.net/" show_faces="true" width="450" font=""></fb:like>


のように記述すると簡単に読み込んでくれる。ただこのままだと英語表記になるので読み込む際のJSファイルを次のように変更しておくとよい。

http://connect.facebook.net/en_US/all.js#xfbml=1


http://connect.facebook.net/ja_JP/all.js#xfbml=1



------表示サンプル------

----------------------
posted by ねこまんま at 09:39 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年04月16日

XMLを正規表現を利用してパース

XMLをDOMパースしようとした所、Android2.1で異常に遅かったので正規表現を利用してパース。

data = data.replace(/\n/g, "");
var regexp = new RegExp(/<\/name>/g),m;
while (m = regexp.exec(data)) {
console.log(m[1]);
}


複数の項目を取得したい場合は次のような正規表現

data = data.replace(/\n/g, "");
var regexp = new RegExp(/<\/name>.+?
(.+?)<\/address>/g),m;
while (m = regexp.exec(data)) {
console.log(m[1]);
console.log(m[2]);
}


nodeの出現順番に依存するけどDOMを利用するより当社比、数百倍高速。

あとは、配列に入れて煮るなり焼くなりしてください。
タグ:xml
posted by ねこまんま at 04:16 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

テキストから改行を取り除く

特定のテキストから改行を取り除く方法

data = data.replace(/\n/g, "");


パターン演算子gですべての改行を取り除ける。
タグ:repalce
posted by ねこまんま at 03:57 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2010年12月15日

スクリプトが書かれているscript要素のDOMノードを取得する方

スクリプトが書かれているscript要素のDOMノードを取得する方法

var currentScript = (function (e) { if(e.nodeName.toLowerCase() == 'script') return e; return arguments.callee(e.lastChild) })(document);


参考: とてもシンプルに自分自身が属する script 要素を取得 - IT戦記
posted by ねこまんま at 02:55 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2010年11月22日

初めてのGoogle Chrome Extension

ちょっとGoogle Chrome Extensionを作り始めたのでメモ。

まずは、開発者用かベータ版のGoogle Chromeが必要。


Google Chrome(BETA)

メニューのレンチアイコン→Tools→拡張機能 から拡張機能管理を開く。

右上の『デベロッパー モード』を有効にすると『パッケージ化されていない拡張機能を読み込む』というボタンが表示されるので、これで開発が開始できる。

適当なフォルダに『manifest.json』と『icon.png』を用意する。先ほどの『パッケージ化されていない拡張機能を読み込む』でフォルダを指定、これで開発が開始できる。

アイコンを表示する簡単な拡張

manifest.jsonの内容を次のようにするとアイコンがブラウザに表示される。

{
"name": "simple Browser Extension",
"description": "This extension adds browser icon.",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png"
}
}


これはブラウザアクション(ボタンが押された際に何か実行したい)を制御するボタン

アイコンを表示する簡単な拡張2

『manifest.json』を次のように変更

{
"name": "simple Page Extension",
"description": "This extension adds Page icon.",
"version": "1.0",
"permissions": ["tabs"],
"background_page": "background.html",
"page_action": {
"default_icon": "icon.png",
"default_title": "First icon"
}
}


新たに『background.html』を用意する。

<html>
<head>
<script>
chrome.tabs.onUpdated.addListener(function(tabid, inf){
if (inf.status === 'complete') {
chrome.pageAction.show(tabid);
}
});
</script>
</head>
<body></body>
</html>


これによりページアイコン(アドレスバーの横)が表示される。
posted by ねこまんま at 18:26 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2010年10月27日

undefinedの比較

undefinedの比較

var hoge;
console.log(hoge);//undefined
console.log(hoge=="undefined");//false
console.log(!hoge);//true
console.log(hoge==undefined);//true
console.log(typeof hoge == 'undefined');//true


次のような結果になる。

タグ:undefined
posted by ねこまんま at 02:33 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2010年10月18日

配列とオブジェクトのコピー

配列やオブジェクトは通常の挿入では参照渡しになってしまう。これを値渡しにする方法

配列はArray.slice()などを利用して新しい配列を生成すればよい。

var ary = [1, 2, 3];
var copyAry = ary.slice(0);
copyAry[0]=4;
console.log(ary);//[1, 2, 3]
console.log(copyAry);//[4, 2, 3]


オブジェクトは次のように新しいprototypeオブジェクトを継承した新しいオブジェクトを生成することで可能になる。

var obj = {"a":"A","b":"B","c":"C"};
function clone(obj) {
var f = function(){};
f.prototype = obj;
return new f;
}
var copyObj = clone(obj);
copyObj.a="D";
console.log(obj);//{"a":"A","b":"B","c":"C"}
console.log(copyObj);//{"a":"D","b":"B","c":"C"}
タグ:slice
posted by ねこまんま at 08:47 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2010年09月30日

関数で引数を受け継ぐクロージャー

hogeとhoge2は同じ動作をする関数になる。

var hoge = function(){
var bar = function (n) {
return n
}
return bar;
}()
var hoge2 = function(n){
return n;
}
console.log(hoge(10));//10
console.log(hoge2(10));//10


hogeだとクロージャーのできる。

var hoge = function(){
var memo=0;
var bar = function (n) {
return memo+=n
}
return bar;
}()
var hoge2 = function(n){
var memo=0;
return function(n){
return memo+=n;
}(n)
}
console.log(hoge(10))//10
console.log(hoge2(10))//10
console.log(hoge(10))//20
console.log(hoge2(10))//10
console.log(hoge(10))//30
console.log(hoge2(10))//10
posted by ねこまんま at 03:33 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

メモ化

JavaScript: The Good Partsのメモ化。


var fibonacci = function (n) {
return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2);
};

for (var i = 0; i <= 10; i += 1) {
document.writeln('// ' + i + ': ' + fibonacci(i));
}


これだとfibonaccが453回実行される。一度計算したのは覚えておこう。

var fibonacci = function(){
var memo = [0, 1];
var fib = function (n) {
var result = memo[n];
if (typeof result !== 'number') {
result = fib(n - 1) + fib(n - 2);
memo[n] = result;
}
return result;
};
return fib;
}();
for (var i = 0; i <= 10; i += 1) {
document.writeln('// ' + i + ': ' + fibonacci(i));
}


これだとfibonacciは11回にfibが29回

var memoizer = function (memo, fundamental) {
var shell = function (n) {
var result = memo[n];
if (typeof result !== 'number') {
result = fundamental(shell, n);
memo[n] = result;
}
return result;
};
return shell;
};
var fibonacci = memoizer([0, 1], function (shell, n) {
return shell(n - 1) + shell(n - 2);
});
for (var i = 0; i <= 10; i += 1) {
document.writeln('// ' + i + ': ' + fibonacci(i));
}


これだとモット少なくできる。


難解すぎる。。。
タグ:メモ化
posted by ねこまんま at 03:17 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2010年09月29日

JavaScriptでカリー化

JavaScript: The Good Partsを読んでいるとカリー化で躓いた。

この本内容は良いんだけどどこぞのページで作成した関数やメソッドを次ページ以降で当たり前に使ってくるので結構捜すのがめんどくさい。addとかいうオブジェクトが登場したからネイティブのaddかとおもったらずっと前のページで作詞した関数だった。一言補足が欲しい。(P.○○で作成したaddみたいに)


var add = function (a, b) {
if (typeof a !== 'number' || typeof b !== 'number') {
throw {
name: 'TypeError',
message: 'add needs numbers'
}
}
return a + b;
}
Function.prototype.method = function(name , func){
this.prototype[name] = func;
return this;
}
Function.method('curry',function(){
//var args = arguments , that = this;
//return function(){
// return that.apply(null,args.concat(arguments));
//}
var slice = Array.prototype.slice,
args = slice.apply(arguments),
that = this;
return function(){
return that.apply(null, args.concat(slice.apply(arguments)))
}
})
var add1 = add.curry(1);
document.writeln(add1(6));//7


こういうことらしい。

で、カリー化とは関数に引数を固定して新しい関数を作成する。とのこと。

add(A,B)// return A+B


Aを固定化してadd1を生み出すとこのような感じ。

add1(C)// return A+C



カリー化は理解したが次のコードが難解。

Function.method('curry',function(){
var slice = Array.prototype.slice,
args = slice.apply(arguments),
that = this;
return function(){
return that.apply(null, args.concat(slice.apply(arguments)))
}
})


オブジェクトを配列に変換が利用されているのはわかる。

argsとthisをクロージャーで包む。ここでthisはadd関数となる。そこでapplyを利用してadd関数を実行する。引数にはargsつまり「add.curry(1)」の引数とslice.apply(arguments)つまり「add1(6)」を結合した配列[1,6]となる。ということかな?
posted by ねこまんま at 16:59 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

プロトタイプと継承

第14回 プロトタイプと継承

よい記事。

var Point = function(x, y){
this.x = x;
this.y = y;
}
Point.prototype.length = function(){
return Math.sqrt(this.x * this.x + this.y * this.y);
};
var point1 = new Point(3, 4);
console.log(point1.length()); // 5
console.log(point1);


基本的なプロトタイプだけども、new演算子を用いることで,関数がコンストラクタとして働き,そのコンストラクタが持つプロトタイプオブジェクトのメソッド(プロパティ)を継承した新しいオブジェクトを作ることができるらしい。インスタンスと思ってたけど継承したオブジェクトなのか。でどのようなオブジェクトかというと次のような感じ。

{
x:3,
y:4,
__proto__: {
consutructor : function(x,y){
(中略)
} ,
length : function(){
(中略)
} ,
__proto__: {
(中略)
}
}
}
}


xとyと隠しプロパティの__proto__を持つ。__proto__にはconstructorプロパティ(function Point)と,lengthメソッドが定義されています。

これらは実体を共有しているの、new演算子で生成後にprototypeに追加したメソッドも共有される。

var Point = function(x, y){
this.x = x;
this.y = y;
}
Point.prototype.length = function(){
return Math.sqrt(this.x * this.x + this.y * this.y);
};
var point1 = new Point(3, 4);
console.log(point1.length());//5
Point.prototype.distance = function(z){
return this.x*z;
};
console.log(point1.distance(2));//10



__proto__はほぼすべてのオブジェクトに存在しprototypeを拡張することでメソッドを使いできるのがわかる。変数型の拡張

var array1 = [1, 2];
console.log(array1.__proto__ === Array.prototype);//true
Array.prototype.insert = function(v, i){
this.splice(i, 0, v);
return this;
};
console.log(array1.insert(6, 1));


でも、ネイティブのプロトタイプを拡張するとfor inなど様々な箇所で弊害が発生する。for in ではオブジェクト自身のプロパティか,__proto__のプロパティか区別がつかない。これはhasOwnPropertyで確認することが出来る。

var array1 = [1, 2];
for (var p in array1) {
console.log(p, ':', array1[p]);
//0 : 1
//1 : 2
}
Array.prototype.insert = function(v, i){
this.splice(i, 0, v);
return this;
};
for (var p in array1) {
console.log(p, ':', array1[p]);
//0 : 1
//1 : 2
//insert : function (v, i){
// this.splice(i, 0, v);
// return this;
//}
}
for (var p in array1) {
if (array1.hasOwnProperty(p)) {
console.log(p, ':', array1[p]);
//0 : 1
//1 : 2
}
}
posted by ねこまんま at 03:25 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2010年09月28日

変数型の拡張

オブジェクトの拡張ではすべてのオブジェクトで利用できるメソッドを追加したが

関数や文字列などでもFunction.prototypeを拡張することですべての関数で利用できるメソッドを追加できる。

Function.prototype.method = function(name , func){
this.prototype[name] = func;
return this;
}
String.method("hoge",function(){
return this.replace("a","b");
});
alert("abc".hoge());//bbc
posted by ねこまんま at 19:09 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

オブジェクトの拡張

Object.prototypeに新たなメソッドを定義することですべてのオブジェクトで利用できるメソッドが追加できる

Object.prototype.hoge = function(){
return this.replace("a","b");
}
alert("abc".hoge());//bbc
タグ:Prototype object
posted by ねこまんま at 19:04 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2010年09月24日

オブジェクトの参照渡し

今まで気にしなかったんだけどオブジェクトの参照渡しで値が渡される。参照渡しとは共通の領域を別々のオブジェクト名で同じメモリが参照されている。

obj2に変更を加えるとobjも変更される

var obj = new Object;
obj.nickname='bar';
var obj2 = obj;
obj2.nickname = 'foo';
alert(obj.nickname);//foo


配列も同様

var arr = new Array;
arr[0] = 'bar';
var arr2 = arr;
arr2[0] = 'foo';
alert(arr[0]);//foo


文字列は参照渡しではない

var str = 'bar';
var str2 = str;
str2 = 'foo';
alert(str);//bar
タグ:Objec
posted by ねこまんま at 01:12 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2010年09月13日

YUI Compressorでjavascriptを圧縮

YUI CompressorはYahooが提供するJavaScriptやCSSの圧縮ツールです。

ダウンロードしたらコマンドラインから実行する

java -jar yuicompressor-2.2.4.jar js/script.js -o js/script.min.js


タグ:YUI Compressor
posted by ねこまんま at 07:08 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2010年09月09日

JavaScriptと指数

JavaScriptと指数について調べてみた。

次の2つの条件式はtrueを返す。

alert(3000===3e3);//true
alert(3000===3e+3);//true


指数はeで桁を表した数値の形。

次のコードでは20桁を超えた段階で表示できなくなる。

alert(100000000000000000000);//100000000000000000000
alert(1000000000000000000000);//1e+21


そんな感じ。
タグ:指数
posted by ねこまんま at 00:51 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2010年09月05日

要素がサポートしてる属性を確認

次のような関数を実行すると要素が属性をサポートしているどうか確認できる。

var supportsElementAttribute = function (ele,attr) {
var input = document.createElement(ele);
return attr in input;
};
alert(supportsElementAttribute("input","value"))//true
alert(supportsElementAttribute("input","type"))//true
alert(supportsElementAttribute("input","hoge"))//false
alert(supportsElementAttribute("div","id"))//true
alert(supportsElementAttribute("img","src"))//true


ちなみに in はプロパティが存在するかどうか確認する演算子

参考:HTML5 の placeholder 属性を jQuery でクロスブラウザに
タグ:in
posted by ねこまんま at 06:08 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2010年08月10日

URLからファイル名を取得する正規表現

正規表現は毎回手こずるので作った正規表現を覚書

特定のURLからファイル名のみを取得する正規表現

"url".match(".+/(.+?)$")[1]


更に、拡張子を取り除いたファイル名を取得する正規表現

"url".match(".+/(.+?)\.[a-z]+$")[1]
posted by ねこまんま at 15:30 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2010年07月29日

webkitTransitionEndでCSS3の-webkit-transitionにコールバック関数を設定

CSS3のアニメーションメソッド「-webkit-transition」のアニメーション終了時のイベントは「webkitTransitionEnd」で設定が出来る。

$(this).bind('webkitTransitionEnd', function() {
//コールバック関数
})


便利ですわ。
posted by ねこまんま at 05:39 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2010年05月29日

Adobe AIRのパッケージング

Adobe AIRではパッケージする際に自己署名入り証明書を作成する必要があります。

コマンドラインから次のように実行すると証明書「hoge.pfx」が作成されます。

adt -certificate -cn hogecysign 1024-RSA hoge.pfx hogeword


hogecysignは証明書の名前、hogewordは証明書です。

次はパッケージ化

adt -package -storetype pkcs12 -keystore hoge.pfx -storepass hogeword HellowWorld.air HellowWorld.xml HellowWorld.html


みたいにするとパッケージ化できる。
posted by ねこまんま at 02:26 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2010年05月18日

はじめてのAdobe AIR

まずはAIR SDK をインストール。
ダウンロードして解凍した「AdobeAIRSDK」をC直下に移動します。

次に環境変数pathに、AdobeのAIRの実行コマンドを追記します!

環境変数pathはWindows VISTAの場合、「コマンドプロンプト」から「システムとメンテナンス」を選択、「システム」から「システムの詳細設定」を選択します。ユーザーアカウント制御が出る場合は、続行をクリックします。「環境変数」から「PATH」を選択して「編集」をクリック。行末に「;C:\AdobeAIRSDK\bin」を追加します。

次に作業フォルダの作成。

C直下にC:\AIR\helloというフォルダを作成します。

中に用意するのは設定用のXMLファイルと土台のHTMLファイル

HelloWorld.xml

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
<id>javascript.HelloWorld</id>
<filename>HelloWorld</filename>
<initialWindow>
<content>HelloWorld.html</content>
<visible>true</visible>
<width>400</width>
<height>300</height>
</initialWindow>
</application>


HelloWorld.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
</head>
<body>
<h1>hello world!</h1>
</body>
</html>



コマンドプロンプトで作業フォルダに移動

cd \AIR\hello


adl HelloWorld.xml


これでAIRが実行できます。めでたしめでたし
posted by ねこまんま at 00:58 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2010年05月12日

Amazonの商品をランダムに表示するスクリプト

配列にセットしておいたAmazonの商品をランダムで表示するスクリプトです。

var books = [
{
title :"PHP 逆引きレシピ" ,
asin : "4798119865"
},
(中略)
{
title :"基礎から学べる PHP 標準コースウェア" ,
asin : "4774138002"
}
]
var list='', n=4 , l = books.length;
while (n-- > 0) {
var i = Math.random() * l | 0;
list += '<a href="http://amazon.co.jp/o/ASIN/'+books[i].asin+'/○○-22/ref=nosim"><img src="http://images.amazon.com/images/P/'+books[i].asin+'.09._OU09_SCTZZZZZZZ_.jpg" alt="'+books[i].title+'" /></a><br /><a href="http://amazon.co.jp/o/ASIN/+books[i].asin+/○○-22/ref=nosim">'+books[i].title+'</a><br /><br />';
books.splice(i, 1);
--l;
}
document.write(list)


document.writeとか手を抜き感満載ですが自由に改造して利用してください。
タグ:Amazon
posted by ねこまんま at 14:55 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

overrideMimeTypeを利用してAjaxの文字化けに対応する

AjaxのXMLHttpRequestでSJISなどのファイルを読み込もうとした場合、文字化けすることがある。

これはoverrideMimeTypeを設定することで解消が可能だ。

var xhr = new XMLHttpRequest();
xhr.overrideMimeType("text/plain; charset=shift_jis");


ただしIEではoverrideMimeTypeが実装されていないので、この方法では対応ができない。
posted by ねこまんま at 14:31 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2010年05月11日

配列から任意の数の値をランダムに取得する方法

配列から任意の数のの値をランダムに取得する関数です。

function random(array, num) {
var a = array;
var t = [];
var r = [];
var l = a.length;
var n = num < l ? num : l;
while (n-- > 0) {
var i = Math.random() * l | 0;
r[n] = t[i] || a[i];
--l;
t[i] = t[l] || a[l];
}
return r;
}
var arr = ["hoge1","hoge2","hoge3","hoge4"];
random(arr, 3)


これは頭いい!

参考:配列からn個の要素を重複無しでランダムに取り出す - m2
タグ:random
posted by ねこまんま at 18:02 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする