Linux & Android Dialy – ページ 152 – Just another WordPress site

twitter でログインする webサービス

twitter でログインする webサービス
必要なものが
HTML
CSS
PHP
MySQL
Codebird-PHP
https://github.com/mynetx/codebird-php
これは ZIP ボタンをクリックして
圧縮ファイルをダウンロードして解凍して使う
必要なものができたら、次は
twitter アプリの登録
これは
https://dev.twitter.com/
へアクセスし
sign in　して登録する
sign in したら、自分の twitter アイコンをクリックして
My Applications をクリックし
create a new application をクリック
必要な項目が英語だけど
name にはアプリの名前
ただし、twitter という名前をいれるのはダメ
description にはアプリの解説
web site には
自分サイトのURL
callbackURL には
自分のサイトURLに
callback.php をつければOK
規約を読んでOKなら
yes I agree にチェックをいれて
よみにくい文字を入力すれば登録完了
もし、間違えても
登録アプリの Settings タブで
修正が可能なので、そんなに失敗を気にしなくてもいい

HTML5 でメモ帳作成その5

HTML5 でメモ帳作成その5
一定時間毎ではなく、文字を入力した時点で
保存されるようにする
これは、twitter とかブログとかで
下書きの自動保存みたいに使えるので
忙しいときに活用できそう
参考にできるのが
#08 キー入力毎に自動保存
http://dotinstall.com/lessons/memo_html5/2308
これは
jQuery を使う
keyup は文字入力したというイベント
＄(‘#memo’).bind(‘keyup’,function(){
localStorage.setItem(‘memo’,$(‘#memo’).val());
}
というソースの部分が該当
これは
id=”memo” のテキストエリアの内容を
keyup イベント発生
つまり文字入力するたびに
localStorage に保存するというもの
今後の課題としては
Ajax とかでもっと使いやすくできると面白いかもしれない

HTML5 でメモ帳作成その4

HTML5 でメモ帳作成その4
自動保存はできたので、今度は保存していることを
わかりやすくするため
保存時にメッセージを表示
#07 自動保存時にメッセージを出す
http://dotinstall.com/lessons/memo_html5/2307
まずは、表示する領域を設定
今回はp 要素に id=”message” としている
また、最初に非表示にしたいので
display:none というスタイルを適用
<p id=”message” style=”display:none;”>saving ….</p>
あとは、保存した時に表示するように
java script で制御
ユーザ関数 autoSave() に追記する
$(‘#message’).show().hide(200);
これは
id=”message” のところを表示にして
その後 0.2秒たってから
隠すというもの
show() は表示
hide() は隠すという意味
200 は 0.2 秒単位という意味になる
実行すると、02秒ごとに
saving …. とずっと繰り返し表示される

HTML5 でメモ帳作成その3

HTML5 でメモ帳作成その3
ようやく、自動保存の開始
今回は、一定時間ごとに保存するというもの
setTimeoutを使って自動保存
http://dotinstall.com/lessons/memo_html5/2306
を参考に作成
#15 タイマー処理の違い
http://dotinstall.com/lessons/basic_javascript_tips/2115
無名関数と即時関数で出来ること
http://dotinstall.com/lessons/basic_javascript_tips/2118
も参考にしたほうがわかりやすい
これを使うと、保存するボタンをおさなくてもよくなる
このため、UIから保存ボタンを削除して
かわりにオート保存機能を実装
function autoSave(){
localStorage.setItem(‘memo’,$(‘#memo’).val());
setTimeout(autoSave,1000);
}
となる
$(‘#memo’).val()
は
id=”memo” のテキストエリアの
val() つまり、内容
ということ
なので
localStorage.setItem(‘memo’,$(‘#memo’).val());
は
id=”memo” のテキストエリアの内容を
localStorage に保存するという意味になる
そして、その間隔を
setTimeout(autoSave,1000) で
1000 にしているので１秒ごと
に実行される
あと、即時関数を使ったほうが、書くときにも楽
関数を作成して
autoSave();
でもいいけど
(function autoSave(){
localStorage.setItem(‘memo’,$(‘#memo’).val());
setTimeout(autoSave,1000);
})();
というようにして即時関数にしたほうが書く手間が省ける
これにより、自動保存できるし
他の人がおなじURLへアクセスすればみれるので
共有掲示板のようなものも作れる

setInterval() と setTimeout() の違いのメモ

タイマー処理の違い
http://dotinstall.com/lessons/basic_javascript_tips/2115
を参考に
setInterval() と setTimeout() の違いのメモ
setInterval()
これは、処理が終わったことを考慮しないため
１秒間隔で処理しようとすると
終わっていないのに追加処理させていくので
最後にはクラッシュする
なので、複雑なものは
setTimeout() を使う
こちらは終わっているかどうか考慮してくれる
単純なものなら
setInterval() でもOK
でもできるだけ
setTimeout() で書いた方が楽
１秒後とに１たすのを setInterval() なら
setInterval(function(){
console.log(++i);
},1000);
これを setTimeout() に書き換えると
function plusOne(){
console.log(++i);
setTimeout(plusOne,1000);
}
plusOne();
というようになる

即時関数と無名関数

即時関数と無名関数
#18 無名関数と即時関数で出来ること
http://dotinstall.com/lessons/basic_javascript_tips/2118
に解説がある
一回しか使わない、
もしくは即座に実行したい
または、書くのが面倒
そんなときに使えるのが
即時関数
ユーザ関数を
（）
で囲って、最後に（）;
をつける
例えば
function helloworld(){
console.log(“hello world);
}
これを実行するには
通常なら
helloworld();
とするけど
即時関数にしたいのなら
(function helloworld(){
console.log(“hello world);
})();
というように
（）で囲って、最後に();
をつけている
無名関数は
function (){
console.log(“hello world);
}
というように、関数の名前がないもの

HTML5 でメモ帳作成その２

HTML5 でメモ帳作成その２
今回は
http://dotinstall.com/lessons/memo_html5/2304
を参考に、ページを読み込んだら
前回保存した内容を表示するというもの
これはメモ帳として最適な機能だと思う
追加された内容は
java script で
if で localStorage にデータ格納の有無を判定して
中身があるなら
getItem() で読み込んで表示するというもの
if(localStorage.getItem(‘memo’){
$(‘#memo’).val(localStorage.getItem(‘memo’));
}
これにより。
id=”memo”
となっているテキストエリアに、
前回保存した内容が読み込まれて表示される
jQuery で
val() は値を示す関数
これで、自動読み込みはできるので
内容の消去も実装
これは消去ボタンと紐付ける
$(‘#clear’).click(function(){
$(‘#memo’).val(”);
localStorage.removeItem(‘memo’);
});
これで、消去できる
$(‘#memo’).val(”);
で id=”memo” のテキストエリアの内容を空で上書き
そして
localStorage.removeItem(‘memo’);
で
localStorage の内容を削除
これで、再読込してもなにも表示されなくなる

HTML5 でメモ帳作成
http://dotinstall.com/lessons/memo_html5/2301
を参考に、メモ帳を作成
最終的には自動保存機能を実装する
これはHTML５の機能
localStorage を使う
今回は jQuery を使うので
<script src=”http://code.jquery.com/jquery-1.6.4.min.js”></script>
で読み込んでおく
あと、テキストエリアを使うので
textarea を使う
これについては
#11 テキストの入力
http://dotinstall.com/lessons/basic_html/311
が参考になる
rows は行数
つまり高さのようなもの
cols は横の文字数
つまり幅
canvas における
htight = row
width = cols
というかんじ
<textarea id=”memo” rows=”10″ cols=”40″ name=”memo”></textarea>
なら
縦１０行
横４０文字
ということになる
localStorage は制御は
java script で行う
保存には
localStorage.setItem()
読み出しには
localStorage.setItem()
セットした内容を一括削除するには
localStorage.clear()
指定して削除するなら
localStorage.remove()
ただし、ブラウザがHTML５のWeb Storage 対応でないと使えないので注意
実際に使う時には
ボタンクリックとかで保存することがおおい
なので、
$(‘#save’).click(function(){
localStorage.setItem(‘memo’,$(‘#memo’).val());
console.log(localStorage.getItem(‘memo’));
});
これで、実行して保存ボタンをおすと
develper tools で
console で確認すると
保存した文字が見える
developer tools の起動方法は
chrome で
Ctrl + Shift + i で起動
これができたら、ページ読み込んだらデータを表示する

診断結果のツイート
http://dotinstall.com/lessons/shindan_js/4805
を参考に
結果をツイートする機能をつけてみる
これは今後もいろいろと応用できそう
Web Intents | Twitter Developers
https://dev.twitter.com/docs/intents
も参考にするとよりわかりやすい
まず、表示領域を div で作成
<div id=”tweet”></div>
処理は script タグの中に追記する
var tweetLink =”;
$(‘#tweet’).html(tweetLink);
var tweetLink =”;
の中へリンクの作成を追記する
これは、公式サイトのドキュメントに載っている
Web Intents を使う
URLは
https://dev.twitter.com/docs/intents
この中にある
Tweet or Reply to a Tweet
を使う
https://dev.twitter.com/docs/intents#tweet-intent
この中で使うURLが
https://twitter.com/intent/tweet?
で
使うオプションが
Web API ではおなじみの？のあとに
追加していくことができる
オプションについては
Supported Parameters
の項目にそれぞれの説明が英語で記載されている
これを元にコードを書いていく
今回はツイート機能なので
https://twitter.com/intent/tweet?text=投稿内容
というかんじになる
ただし、日本語そのままだと文字化けするので
encodeURIComponent()
でエンコードしておく必要がある
結果は
result に格納されているので
encodeURIComponent(result)
というようにする
今回はハッシュタグをつけているので
&hashtag=dotinstall
もつけているので
var tweetLink = ‘<a href=”https://twitter.com/intent/tweet?text=’+ encodeURIComponent(result) +’&hashtags=dotinstall”>ツイートする</a>’;
このままでも使えるけど、名前をいれなくても
できるという問題があるので、これを対処
この処理には
if () で判定する
if($(‘#name),val() ==”){
alert(‘名前を入力してください’);
return false;
}
関数の中で終わらせるには
return false;
を使う
これで結果のツイート機能
そして入力チェックのできあがり

java script でキャラ診断

java script でキャラ診断
ドットインストールの
http://dotinstall.com/lessons/shindan_js
を参考にして、キャラ診断の作成
とはいっても、メインでやってみたいのは、後半の twitter で
診断結果を投稿するとこ
いくつかサンプルなどをつくるときに
楽をするためには
ベースとなるファイルをつくり、あとは使いまわすほうが楽
なので、base.html を作成し
ソースは
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<script src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>
<title>タイトル</title>
</head>
<body>
</body>
</html>
あとは、これをコピーして使いまわす
<script src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>
はjQuery をつかうのに必須
<input type=”text” id=”name” value=””>
<input type=”button” id=”shindan” value=”診断”>
というように診断ボタンを作成
診断ロジックは java script
<body style=”text-align:center;”>
とすれば、画面中央寄せのものができる
診断結果については
配列で指定する
var types =[‘勇者’,’魔法使い’,’戦士’,’遊び人’,’スター’,];
診断に使う名前は
var name =$(‘#name’).val();
で取得できる
診断ゲームなので、ランダム要素がほしいということで
var type =types[Math.floor(Math.random() * types.length)];
とする
.length とすることで、最大値を自動取得可能
Math.random() は
java script で乱数を発生させるもの
Math.floor() は小数点四捨五入
これで、配列の数値だけ取得できる
あとは、診断結果を作成
var result = name +’さんは’+ type +’です’;
これを表示するので
<p>ここに結果表示</p>
となっているのを
<p id=”result”>結果表示</p>
としておいて
java script の中で
$(‘#result’).text(result);
とすれば
id=”result” になっている部分を
text() の内容で書き換えてくれる
今回は result = 結果の内容なので
結果表示となっている部分が
診断内容に置き換わる
もし、うまく稼働しないときには
chrome で
Ctrl + Shift + i
で
develper tools を起動して
console タグを開くと
エラーがあればその内容が表示されているので
その部分を修正しやすくなります
次は、診断結果の追加
これは、単純に
var charas =[‘かっこいい’,’かわいい’,’クールな’];
というように
配列を用意して
var chara =charas[Math.floor(Math.random() * charas.length)];
というように
ランダムで要素取得できるようにすればOK
あとは、診断結果を追加するだけ
var result = name +’さんは’+ type +’です’;
を
var result = name +’さんは’+chara+ type +’です’;
というようにすれば、いろいろな判定をつけることができる