2016年12月21日

Angular2のライフサイクルメソッド

OnInitやOnChangesをimportしておけば子コンポーネントでngOnInitやngOnChangesといったライフサイクルメソッドが利用可能

import { Component} from '@angular/core';

@Component({
selector: 'my-app',
template: `
<div>
<my-h1 [myText]=h1></my-h1>
<p (click)="onClick()">click</p>
</div>
`
})
export class AppComponent{
h1:string = "h1";
onClick(){
this.h1 = this.h1+"!";
}
}


import { Component, Input,OnInit,OnChanges } from '@angular/core';

@Component({
selector: 'my-h1',
template: `
<h1>{{myText}}</h1>
`
})
export class h1Component implements OnInit,OnChanges{
@Input() myText:String;
ngOnInit() {
console.log("ngOnInit")
}
ngOnChanges(changes) {
console.log('ngOnChanges',changes);
}
}
タグ:Angular2
posted by ねこまんま at 13:03 | Comment(0) | TrackBack(0) | Ajax | 更新情報をチェックする

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>');
});
}
});
タグ:jquery YouTube AJAX
posted by ねこまんま at 05:36 | Comment(0) | TrackBack(0) | Ajax | 更新情報をチェックする

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>
タグ:Dust.js
posted by ねこまんま at 16:28 | Comment(0) | TrackBack(0) | Ajax | 更新情報をチェックする

2013年02月26日

Underscore.jsでXSS対策

Backborn.jsのテンプレートエンジン「Underscore.js」でXSS対策する方法

<%= hoge %>


だとHTMLがそのまま出力されるので

<%- hoge %>


とすると実体参照に変換される。

(実装までみていないので穴があるかもしれないので自己責任で参考までにしてください)
posted by ねこまんま at 00:21 | Comment(0) | TrackBack(0) | Ajax | 更新情報をチェックする

2013年02月01日

Sublime Text 2でブラウザリロード

Sublime Text 2でブラウザリロードする際のメモ

Command+shift+pでパッケージマネージャーを開いて、「install」と入力すると出てくる「package control install package」でインストールマネージャーを開きます。そこで「Browser Refresh」と入力して「Browser Refresh」をインストールします。

このままではショートカットが動かないので、

「Preference」→「Package Settings」→「Browser Refresh」→「Key Bindings-default」を選択

keysをcommand+shift+rからcommand+option+rに変更します。

[
{
"keys": ["command+option+r"], "command": "browser_refresh", "args": {
"auto_save": true,
"delay": 0.0,
"activate_browser": false,
"browser_name" : "Google Chrome"
}
}
]


これでcommand+option+rでリロードができるようになります。
タグ:Sublime Text 2
posted by ねこまんま at 12:26 | Comment(0) | TrackBack(0) | Ajax | 更新情報をチェックする

2012年11月01日

markdown入門

Sublime Text 2にmarkdown previewを入れたので、markdownを覚えようとしているメモ書き。

markdown previewのインストールはSublime Package Controlをインストールしている前提で、Cmd+Shift+Pでコマンドパレットを立ち上げて、「install」などとうって「Package Control:Install Package」を実行します。markdown previewをインストールします。

次のように入力しておくと自動的に変換してくれるイメージ

#見出し1

<h1>見出し1</h1>


##見出し2

<h2>見出し2</h2>


###見出し3

<h3>見出し3</h3>


####見出し4

<h4>見出し4</h4>


#####見出し5

<h5>見出し5</h5>


######見出し6

<h6>見出し6</h6>


*強調1*

<em>強調1</em>


**強調2**

<strong>強調2</strong>


- 箇条書きその1
- 箇条書きその2
- 箇条書きその3


<ul>
<li>箇条書きその1</li>
<li>箇条書きその2</li>
<li>箇条書きその3</li>
</ul>


1. 番号付きその1
2. 番号付きその2
3. 番号付きその3


<ol>
<li>番号付きその1</li>
<li>番号付きその2</li>
<li>番号付きその3</li>
</ol>


<引用

<blockquote>引用</blockquote>


---

<hr>


| A | B | C |
|a|b|c|


<table>
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
posted by ねこまんま at 19:47 | Comment(0) | TrackBack(0) | Ajax | 更新情報をチェックする

2012年09月04日

IE8以下のみフェードの効果を切り替える

IE8以下だと透過PNGを利用したfadeIn fadeOutがおかしくなるので以下のように暫定的に対応。

if($.browser.msie && $.browser.version<9){
var ieLte8=true;
}
$.fn.fade = function(type){
if(ieLte8){
if(type=="in"){
return this.show(1);
}else{
return this.hide(1);
}
}else{
if(type=="in"){
return this.fadeIn();
}else{
return this.fadeOut();
}
}
}


IE8以下の場合はすぐにフェードイン・アウトせずすぐに表示を切り替えます。
posted by ねこまんま at 17:59 | Comment(0) | TrackBack(0) | Ajax | 更新情報をチェックする

2012年07月22日

JavaScriptと正規表現

JavaScriptで正規表現を利用する方法

特定のテキストを含むかどうか確認(testメソッドとexecメソッド)
特定のテキストの開始位置を取得(searchメソッド)
マッチした文字を取得(matchメソッド)
マッチした文字を置き換える(replaceメソッド)

特定のテキストを含むかどうか確認(testメソッドとexecメソッド)

特定のテキストを含むかどうか確認するにはtestメソッドとexecメソッドがあります

testメソッド

testメソッドは特定のテキストを含む場合trueを、含まない場合はfalseを返します。単純なマッチングに利用するのが良いでしょう。

var txt = "hogehoge";
console.log(/hoge/.test(txt));//true
console.log(/hage/.test(txt));//false


execメソッド

execメソッドではマッチした結果を配列で返します。

var txt = "hogehoge";
console.log(/hoge/.exec(txt));//["hoge"]
console.log(/hoge/g.exec(txt));//["hoge"]
console.log(/hage/.exec(txt));//null


testメソッドとexecメソッドはRegExpオブジェクトのメソッドのため正規表現から記述する必要があります。

特定のテキストの開始位置を取得(searchメソッド)

searchメソッドはマッチした文字列の位置を返します。マッチした場合、マッチした場所を返します。

var txt = "hogehoge";
console.log(txt.search(/hoge/));//0
console.log(txt.search(/hoge/g));//0
console.log(txt.search(/hage/));//1


次のような単純なif文では指定したテキストが最初にある場合をチェックしてしまいます。

if(txt.search(/hoge/)){
//do smoething
}


といった具合に-1とマッチさせるようにしましょう。

if(txt.search(/hoge/)===-1){
//do smoething
}


マッチした文字を取得(matchメソッド)

matchメソッドはマッチした文字列を取得できます。

var txt = "hogehoge";
console.log(txt.match(/hoge/));//["hoge"]
console.log(txt.match(/hoge/g));//["hoge","hoge"]
console.log(txt.match(/hage/));//null


g(global)オプションを付けることによりマッチ結果を複数取得することができます。

マッチした文字を置き換える(replaceメソッド)

replaceメソッドは第2引数に置き換え文字列を指定することで文字列の置き換えを行ないます。

var txt = "hogehoge";
console.log(txt.replace(/hoge/,"foo"));//foohoge
console.log(txt.replace(/hoge/g,"foo"));//foofoo
console.log(txt.replace(/hage/,"foo"));//hogehoge


文字列そのものを置き換えるのではなく置き換えた文字列を返すので注意してください。また、置き換え文字列に$&を利用するとマッチした文字列を置き換えの際に利用できます。

var txt = "hogehoge";
console.log(txt.replace(/hoge/,"A$&A"));//AhogeAhoge
console.log(txt.replace(/hoge/g,"A$&A"));//AhogeAAhogeA
console.log(txt.replace(/hage/,"A$&A"));//hogehoge


複数のマッチ文字を利用したい場合は、マッチ時に()でつつみ置き換え文字内で$1〜の文字列を利用します。

var txt = "hogehoge";
console.log(txt.replace(/(h)o(g)e/,"$1$2"));//hghoge
console.log(txt.replace(/(h)o(g)e/g,"$1$2"));//hghg
console.log(txt.replace(/(h)a(g)e/,"$1$2"));//hogehoge


replaceメソッドでは置き換え文字の代わりに関数オブジェクトを足すことができます。

var num = "123456";
num.replace(/[0-9]/g,function(num){
if(num<4){
return num
}else{
return ""
}
})


上記のサンプルでは「123」が帰ってきます。
posted by ねこまんま at 19:20 | Comment(0) | TrackBack(0) | Ajax | 更新情報をチェックする

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のみで動作します。参考
タグ:popstate HTML5
posted by ねこまんま at 11:14 | Comment(0) | TrackBack(0) | Ajax | 更新情報をチェックする

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

2011年12月20日

Google Maps APIのズーム率を制御する

Google Maps APIのズーム率を制御する方法

google.maps.event.addListenerOnce(map, "projection_changed", function(){
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
setZoomLimit(map, google.maps.MapTypeId.ROADMAP);
setZoomLimit(map, google.maps.MapTypeId.HYBRID);
setZoomLimit(map, google.maps.MapTypeId.SATELLITE);
setZoomLimit(map, google.maps.MapTypeId.TERRAIN);
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
});
function setZoomLimit(map, mapTypeId){
var mapTypeRegistry = map.mapTypes;
var mapType = mapTypeRegistry.get(mapTypeId);
mapType.maxZoom = 18;
mapType.minZoom = 2;
}


mapType.maxZoomとmapType.minZoomを変更するとGoogle Mapの最大拡大率と最小拡大率が制御可能です。
タグ:Google Maps API
posted by ねこまんま at 16:22 | Comment(0) | TrackBack(0) | Ajax | 更新情報をチェックする

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保管したりしなかったりするからブラウザ調整が必要になる予定。
タグ:ASP
posted by ねこまんま at 01:31 | Comment(0) | TrackBack(0) | Ajax | 更新情報をチェックする

2011年10月05日

jsonとjQueryの悩ましい関係

次のようなコードを書いたらエラーが出てしまって良くよく調べるとjsonの形式が間違っていたわけです。

var jXHR = $.ajax({
url:"ajax.json",
dataType : "josn"
});
jXHR.done(function(json){
console.log("ajax success");
}).fail(function(data,type){
console.log("ajax error");
});


jsonデータは次のような感じ。

{ Data {....} }


jQuery1.3までは動いたのですがjQuery1.4からはこのコードじゃ動かない。

{ "Data" {....} }


みたいにパラメーターをダブルクオーテーションで包まなくちゃいけない。

APIをいじれない場合は次のように書いて対応することも可能

var jXHR = $.ajax({
url:"ajax.json",
dataType : "text"
});
jXHR.done(function(json){
console.log("ajax success");
eval("var json="+json);
}).fail(function(data,type){
console.log("ajax error");
});


evalとか使いたくないしやっぱりAPIを正しいものに直すのがいいと思う
タグ:JSON jquery AJAX eval
posted by ねこまんま at 20:32 | Comment(0) | TrackBack(0) | Ajax | 更新情報をチェックする

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]);
});

タグ:EXCEL xml AJAX
posted by ねこまんま at 11:07 | Comment(0) | TrackBack(0) | Ajax | 更新情報をチェックする

2010年09月11日

GreasemonkeyスクリプトでjQueryを利用

GreasemonkeyスクリプトでjQueryを利用するには次のような感じ。

var $;
// Add jQuery
(function(){
if (typeof unsafeWindow.jQuery == 'undefined') {
var GM_Head = document.getElementsByTagName('head')[0] || document.documentElement,
GM_JQ = document.createElement('script');

GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
GM_JQ.type = 'text/javascript';
GM_JQ.async = true;

GM_Head.insertBefore(GM_JQ, GM_Head.firstChild);
}
GM_wait();
})();

// Check if jQuery's loaded
function GM_wait() {
if (typeof unsafeWindow.jQuery == 'undefined') {
window.setTimeout(GM_wait, 100);
} else {
$ = unsafeWindow.jQuery.noConflict(true);
letsJQuery();
}
}

// All your GM code must be inside this function
function letsJQuery() {
alert($); // check if the dollar (jquery) function works
alert($().jquery); // check jQuery version
}


ブックマークレットでjQueryを利用と同じような感じだけど、Greasemonkey用のグローバルオブジェクトunsafeWindowを上手に利用する必要があります。

via:jQuery & Greasemonkey
posted by ねこまんま at 11:18 | Comment(0) | TrackBack(0) | Ajax | 更新情報をチェックする

2010年05月12日

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