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) | テクニック | 更新情報をチェックする