tomo.mobi

Representation design of material


AngularJS timer

AngularJS timerの仕組みだけ作ったので、メモ。
シンプルなほど、色々応用できるなと思うのでできるだけ機能のみシンプルに作ってゆこうと。
たくさん自分tips作って組み合わせできると。

Published by tomoka , on 10月 9th, 2018 at 2:16 am. Filled under: AngularJS,javascriptNo Comments
この記事を読む

コンソールのメモ

alert();で変数を渡した方が確実のとき、
変わりにconsole();を使う。

Published by tomoka , on 12月 26th, 2013 at 6:36 pm. Filled under: javascriptNo Comments
この記事を読む

phpでRSSリーダー

久しぶりにphpに触りました。
RSSのアメブロのフィードを読み込みました。
なので、次の時も開発しやすいようにメモです。

使った関数は以下の通り。
simplexml_load_file();
文字コードが違う場合もあるので。。。

mb_language(“Japanese”);
mb_internal_encoding(“EUC-JP”);
//改行削除
$addrssTXT = ereg_replace(“\r|\n”,””,$rssTXT);
//表示文字コード変換。 UTF-8 からの EUC-JP
$addrssTXT = mb_convert_encoding( $addrssTXT, “EUC-JP”,”UTF-8″);

あとは、いつも通り解析して、書き出しですが、($Feed->item as $entry $entry->titleや$entry->linkなどなど)
そのとき、javascriptとして書き出してjQuery等を使って(使わなくてもいいけど、便利なのは使う)htmlへ挿入するのが便利です。contextの設定ヘッダの書き出しも忘れずにー。

ちなみに、アメブロのxmlのパスは、読み込みように表示されるパスはID以下スラッシュが無いパスが良いです。
http://feedblog.ameba.jp/rss/ameblo/Blog-ID
※”Blog-ID”はブログのID

Published by tomoka , on 12月 11th, 2013 at 12:54 am. Filled under: javascript,いまさらNo Comments
この記事を読む

navigator.userAgent.match()

“gi”は→大文字と小文字の違いを無視する (ignore case) フラグ
以下が使用例です。

navigator.userAgent.match()とあわせて使ってみた!

if (navigator.userAgent.match(/(ipad|iphone|android|mobile)/gi)) {
cssChange(‘css/style-mobile.css’);
} else {
cssChange(‘css/style-pc.css’);
};

これで、”android”も”Android”も”ANDROID”もOK!

Published by tomoka , on 11月 18th, 2013 at 2:21 am. Filled under: javascript,smartphoneNo Comments
この記事を読む

拡大伸縮 CSS Zoom

拡大縮小。
Math.max();
Math.min();
を使うと回転した時に大きくなったり小さくなったりしません。。。。

ブラウザ幅が変わると、縮尺も変わる。
横幅 685pxで決めうち設定しております。。。。。

$(window).on(“orientationchange resize”, function() {
if (Math.abs(window.orientation) === 90) {
var w = $(window).width();
var x = w – 20;
var zoom_num = x / 685;
$(‘body’).css({
zoom: ” + zoom_num + ”
});
}
else {
var w = $(window).width();
var x = w – 20;
var zoom_num = x / 685;
$(‘body’).css({
zoom: ” + zoom_num + ”
});
}
});

Published by tomoka , on 11月 18th, 2013 at 1:32 am. Filled under: CSS3,javascript,jQuery,smartphoneNo Comments
この記事を読む

facebookのコメント投稿メモ

facebookのコメント投稿を作成しました。
同じ記事にしか投稿できないように、今は作ってしまったので、
サンプルは載せられないのですが、きちんと出来上がったら今後の為にも記述。

・FBの元々備わっているメゾットからのオース認証
・グラフapiへの投稿パス
・投稿する記事のid

です。
オース認証やPOST等、はそもそもfacebook側に用意されていました。

FB.login();←ログイン
 ※ちなみに、この時点で、投稿する場合は{scope:’publish_stream’}というパラメータを作成する必要があります。
FB.api();←投稿先をセットするメゾット

//connect.facebook.net/en_US/all.jsを読み込めば、
そのまま、FB.login();やFB.api();は読み込めます。

Published by tomoka , on 7月 4th, 2013 at 8:54 pm. Filled under: api,facebook,javascript,jQueryNo Comments
この記事を読む

スムーズスクロールのメモ

android2.3.4ではスムーズにスクロールできない場合、$()を追加したらうまく動いた!

追記した場所

// リンク先の画面上の位置を取得して、そこまでスクロール
$(‘html, body’).animate({scrollTop: $(target).offset().top});

Published by tomoka , on 3月 30th, 2013 at 8:34 pm. Filled under: Android,javascript,jQuery,smartphoneNo Comments
この記事を読む

WebKidAnimationEnd のタイミングについてメモ

アニメーションが終わったタイミングで、次のステップのアニメーションへ遷移するのに、
端末による表示速度の違いが出る事を恐れて、WebkitAnimationEndを取得後に次のステップのfunctionを呼ぶように
したのですが、なんだか、Android4.0 と Android2.3 の標準ブラウザで確認した所、
compleatするタイミングが違うようです。。。。。。

これでは、実装する意味が無い。

原因はwebkitのバージョンのようです。
結局、CSSで設定したミリ秒より若干早い段階で次のfunctionを呼ぶように、
delay()を入れました。。。。

Published by tomoka , on 12月 1st, 2012 at 12:21 am. Filled under: Android,CSS3,javascriptNo Comments
この記事を読む

CSS3 Transform アニメーション callback

今日はとても勉強になる事を知る事が出来ました。
変形処理を行う transform プロパティを使ったアニメーションのcallbackです。

「CSS Transitions」
http://www.w3.org/TR/css3-transitions/

【引用】「HTMLリファレンス:http://www.htmq.com/css3/animation-delay.shtml」

[CSS]
div#sample {
animation-name: anime1;
animation-duration: 5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-delay: -2s;
}

@keyframes anime1 {
0% {width: 50px; height: 50px; background-color: aqua;}
100% {width: 200px; height: 50px; background-color: blue;}
}

[HTML]


animation効果のサンプル


上記のコールバックは以下のようにして取得できます(?)

var element = document.getElementById(“sample”);
element.addEventListener(“webkitAnimationEnd”, function(e){
e.currentTarget.removeEventListener(“webkitAnimationEnd”, arguments.callee, false);
alert(“webkitAnimationEnd”);
}, false);
element.className = “anime1”;

関数を参照する、Argumentsクラスのcalleeプロパティを使うそうです。

すばらしぃー
おぉぉおぉ。。。。

Published by tomoka , on 11月 29th, 2012 at 12:26 am. Filled under: CSS3,javascriptNo Comments
この記事を読む

jsonのobjectカウント

連想配列なため、lengthがありません。
かといえ、やっぱり数えたい。

// 数
function getPropertyNum(obj) {
var lengthNum = 0;
for (var keyNum in obj) {
++lengthNum;
}
return lengthNum;
}

// 有無の判定
function isHasProperty(obj) {
var flag = false;
for (var keyNum in obj) {
flag = true;
break;
}
return flag;
}

Published by tomoka , on 10月 27th, 2012 at 10:18 am. Filled under: javascriptNo Comments
この記事を読む

window.resize()

ウィンドウの幅が変わるたびに、イベントが発生するから、
処理をためない為に、すべてを処理をせず、200ミリ秒毎に処理。

var timer = false;
$(window).resize(function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
console.log(‘resized’);
// 処理
}, 200);
});

 

Published by tomoka , on 7月 27th, 2012 at 1:37 am. Filled under: javascriptNo Comments
この記事を読む

拡大縮小

var pageSize = 4; // 4倍から
var timerID;
document.body.style[“-webkit-transform”]=”scale(“+pageSize+”,”+pageSize+”)”;
window.onload = function(){
timerID = setInterval(“pageScale()”, 25);
}
function pageScale(){
document.getElementById(“result”).innerHTML = “現在の倍率 : “+pageSize;
pageSize = pageSize – 0.05;
if (pageSize < 1) {
document.body.style[“-webkit-transform”]=”scale(0.5,0.5)”;
clearInterval(timerID);
}else{
document.body.style[“-webkit-transform”]=”scale(“+pageSize+”,”+pageSize+”)”;
}
}

Published by tomoka , on 6月 7th, 2012 at 4:18 pm. Filled under: javascriptNo Comments
この記事を読む