2012年6月24日日曜日

【chrome extension】chrome拡張ソースの場所


chrome extensionの開発をしているときに、
「このエクステンションのソース見たいなー」なんてよく思う。
そんなときはソースを見ちゃえばいい。

【macの場合】

~[username]/Library/Application Support/Google/Chrome/Default/Extensions

【windowsの場合】
[username]\AppData\Local\Google\Chrome\User Data\Default\Extensions\



ソース見てると「ソースの配置が超きれい」とか
「こんな簡単に書いちゃうか」とか色々参考になります。
ぜひお試しあれー。
投稿者 時刻: 0 件のコメント:

2012年6月22日金曜日

【JavaScript】確認ダイアログ表示


ユーザにフォームの入力をしてもらい、最後に確認をしたいとき、
JavaScriptでダイアログ表示を行うとよい。

以下の入力フォームでボタンが押されたら
入力内容を確認するようなダイアログを実装してみよう。


--フォームの実装--
<body>
<span>入力してね</span>
<form name="form1">
<input type="text" name="text1" id="text1">
<input type="button" value="ボタン" onClick="check();">
</form>
</body>


onClick="check();"⇒ ボタンを押したらcheck()がスタート。
check()内の処理のイメージとしては
①"内容はこんな感じでいいかな？"的メッセージを表示
②OKを押したら"内容変更しました"的メッセージを表示
③キャンセルなら何もせずダイアログを閉じる
それでは実装。


--JavaScriptの実装--
<script>
function check(){
var text1 = document.getElementById("text1").value;
var res = confirm("入力内容は「" + text1 + "」で良いでしょうか？");

if(res == true){
// OKを選択したときの処理
alert("変更しました。");
}
}
</script>


confirm()の時点でダイアログを表示してくれて、
リアクションがOK(true)なら~、キャンセル(false)なら~って感じでいけるんですね。
らくちん、らくちん。
投稿者 時刻: 0 件のコメント:

2012年6月21日木曜日

【Javascript(Chrome Extension)】タブの情報を取得する


Chrome拡張開発でタブの情報をしたいときは以下のようにしようー

１ manifest.json⇒permissions⇒tabsの追加
２ 操作したいファイル上でchrome.tags.* APIを用いる

これだけ。。
意外と１番忘れるとAPI見ながらなんでなんで？？状態に陥るので、
１番をお忘れなくー

１ manifest.json⇒permissions⇒tabsの追加
--manifest.json--
{
  "name": "拡張名",
  ...
  "permissions": [
    "tabs"
  ],
  ...
}




２ 操作したいファイル上でchrome.tags.* APIを用いる
ひとまずこのAPIでできることを一覧にしてみた。
これみてマニュアル(Chrome API)見てコード書くみたいな感じで。

選択中のタブの情報げっと getSelected
特定のタブの情報げっと get
タブを新しく作る create
タブを削除する remove
スクリプトを実行 executeScript

タブだけでなく、ブックマークの操作もできたりしちゃうのがChrome拡張のすごさだが、
そこいらの話は次回に。
投稿者 時刻: 0 件のコメント:

2012年6月20日水曜日

【Javascript】オブジェクト表示/非表示の切り替え



同一テンプレートで正常時、エラー時の出し分けを実装したいときに
Javascript上で出し分けちゃおうということで。

次のhtmlをサンプルにする。
フォームの中が空なら「入力してね」を表示する。





<body onLoad="hideErrorParts();">
<form name="form1">
<input type="text" name="text1">
<input type="button" value="ボタン" onClick="checkForm();">
</form>
<span id="error">入力してね</span>
--以下の２点を実装する--
•ソースが呼び出されたときは「入力してね」は非表示。
•テキストボックスに入力してボタンを押した時にテキストボックスが空の場合に 「入力してね」を表示。
実際のスクリプトが下記のようになる。


<script>
function hideErrorParts(){
document.getElementById("error").style.display = "none";
}

function checkForm(){
var content = document.form1.text1.value;

// テキストボックスの中が空なら表示する
if( content == "" ){
document.getElementById("error").style.display = "block";
}
}
</script>

  display属性を"none"か"block"に変えちゃえば出し分けできるということですな。
  簡単なバリデーションに使えそうです。（もちろんサーバ側でもバリデーションは実装しなきゃだが）
投稿者 時刻: 1 件のコメント:

2012年5月21日月曜日

【マーケティング】「インサイト」を学ぶ

昨日5/21に勝手にマーケティング大学 第2回勉強会 『インサイト　消費者が思わず動く、心のホットボタンに参加してきました！


今回のテーマは「インサイト」。
インサイトとは消費者のホンネのことです。
例えば目の前にいる人が自販機でコーラを買ったとします。
その人はなぜコーラを買ったのでしょう？？
「喉が渇いたから」、「ジュースの缶を集めているから」、「小銭が欲しかったから」、「その人の周りでは空前のコーラブームだったから」。
理由は様々考えられます。
この理由こそインサイトから来ているのです。

従来の消費者分析は商品が軸にあり、商品をどう作れば、どう広告すれば売れるかを
試行錯誤していました。

しかしインサイトのマーケティングでは消費者が軸になります。
消費者が普段何気なく取っている行動には何かしら理由があって、
その理由を探ることで消費者の本当のニーズを知ることが出来ます。

いやぁ、面白いですねー。
マクドナルドの原田さんじゃないけどやっぱ消費者本位で考えることの方が大事なんだな
としみじみ。

ほんと面白い勉強会でした。

勉強会で使用したスライドはこちら
投稿者 時刻: 0 件のコメント:

2012年5月3日木曜日

【html】最大文字数を指定する方法



記事とかブログとかで最大文字数を制限して、
レイアウトのバランスを崩さないようにする方法を挙げる。

PHPで実装

$news = '表示させたいニュース' ;

// 表示制限を17バイトにしてそのあとは「...」にする。
$display_news = mb_substr($news, 0, 17).'...';
echo $display_news;

CSSで実装



.classname {
 width:240px;
 height:3em;
 overflow:hidden; ←あふれた文字に関しては隠す
}


JavaScriptで実装(引用元：JavaScriptでマルチバイト文字列を決まった文字数で制限する方法)



文字列を省略する
@arg  text  省略する文字列
@arg  len  半角文字数で指定
@arg  truncation  省略時の文字列
*/
function substr(text, len, truncation) {
  var count = 0;
  var str = '';
  for (i=0; i
    n = escape(text.charAt(i));
    if (n.length &lt; 4) count++; else count+=2;
    if (count&gt;len) {return str+truncation;}
    str += text.charAt(i);
  }
  return text;
}

投稿者 時刻: 0 件のコメント:

2012年4月30日月曜日

【PHP】ブラウザの判定

スマートフォン対応や各ブラウザ対応等で
ブラウザ情報でページを出し分けするときは
user agentから情報を判別すればよい。

getenv(string varname)

解説環境変数の値を取得する
引数varname 変数名
返値varnameで指定した環境変数の値を返す。varnameが存在しない場合はfalseを返す。


例：
// ブラウザの情報取得
$bsr = getenv("HTTP_USER_AGENT");

echo $bsr;

⇒Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.165 Safari/535.19

mb_eregとかを使ってページを出し分ければいけそうだな。
phpinfo()にある情報は全部とれるっぽいから結構使えるファンクションだね。
投稿者 時刻: 0 件のコメント:
登録: 投稿 (Atom)