as 5a3i: 2012

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\

ソース見てると「ソースの配置が超きれい」とか
「こんな簡単に書いちゃうか」とか色々参考になります。
ぜひお試しあれー。

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)なら~って感じでいけるんですね。
らくちん、らくちん。

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拡張のすごさだが、
そこいらの話は次回に。

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"に変えちゃえば出し分けできるということですな。
簡単なバリデーションに使えそうです。（もちろんサーバ側でもバリデーションは実装しなきゃだが）

2012年5月21日月曜日

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

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

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

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

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

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

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

勉強会で使用したスライドはこちら

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;

}

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()にある情報は全部とれるっぽいから結構使えるファンクションだね。

2012年4月27日金曜日

【html•css•javascript】マウスオーバーはCSSだけでいける！

文字や画像が載ったときに色や画像を変更させるいわゆるマウスオーバーは
実はCSSで行けるということを知りましたー（おろかものだ。。）

hoverというCSSの擬似クラスで設定可能ということでして。

例：

color:FFFFFF;

}

a:hover{

color:000000

}

上の簡単な例だと文字にマウスが載った瞬間に黒に変わる。

CSSで作った方がシンプルで高速らしい。
確かにシンプルだー

2012年4月25日水曜日

【API】Google APIとかすごすぎやろ

Google APIにはMapとか検索のAPIが存在することは知っていたけど、Chartもあるのね。
しかも超簡単でびっくりした。

Google Chart API

2分ぐらいで試しに適当に作った。

imgタグにちゃちゃっと書いてこんなにステキな円グラフが出来ている。。
ちなみに上のソースは下記の通り。

chtt : タイトル
chs : 図のサイズ
chd : 各項目のパーセント,数値
chco: 各項目の色
chdl : 右の説明表の設定
chl : 各項目名

他にも棒グラフや折れ線グラフ等の定番チャートからQRコードとかも作ってくれる。
とても便利すぎてびっくり。
Google Chart API グラフ画像のサンプルにもたくさんサンプルがあり、使える！
API使って効率よく作業をしていかなければ。

2012年4月24日火曜日

【etc】こりゃたまらん！ドットインストール

たまたま発見した。

『ドットインストール』

初心者用のプログラミングサイトで一つの授業は3分程度。
ささっと見れて逆に言うとささっと見れる分どんどん見てしまうー。

PHPとかJavaとかだけでなく、
最近流行のTwitterbootstrapとかGoogleのAPIとかも受講できちゃう。
これが全部ただって言うのがまたすごい。
ぜひお試しあれ。

こんな感じで結構コースも豊富なんです。

2012年4月23日月曜日

【tool】chromeデバッグツール

chromeには標準装備でめちゃめちゃ優れた
デバッグツールを搭載している。
ただこいつの使い方を簡単に紹介しているサイトはないかなとか
思って探していたら、あった。

作業効率が10倍アップする Chrome Developer Tools の使い方

めちゃ簡潔に書かれていてわかりやすい。

（全然関係ないけどタイトルにもあるように「10倍アップ〜」

とかいう文言はとても魅力あるように感じるのは自分だけかな？

別にその数字の信憑性など誰も問わないけどなんかクリックしてしまう。）

標準装備されているのに、全然使っていなかった自分に後悔。。

JSもHTMLもこいつを使ってもっと効率よく開発をしたいね。

2012年4月20日金曜日

【iPhone App】面白いマップアプリ発見！！

今日とても面白いiPhoneアプリを発見した！
その名は『ロケスマ』。

なんか良質なスマホアプリってまだまだ少ないけど、
これはなかなかよい！

ロケスマは、お店や観光スポット、学校や病院、災害時避難場所などなど、さまざまな地点情報をスマートフォンで手軽に表示するアプリでgoogleで作ったマイマップなんかもとりこめる。

これはバス停を選択したときのマップ。

ただしマイマップからリストを作るときに１点だけ問題が（しかもアプリ側の問題ではないw）！！

googleマイマップからkmlで取り込んでねと言われたので、試してみたが、、
『マイマップのエクスポート(kml)の仕方がわからない！』
google map上ではインポートはあってもエクスポートがない！！

どういうことやねんって思って調べたら、
URLに『&output=kml&ge_fileext=.kml』をつければいいとわかり、なんとか解決ー。
つまり、

１ google map上で、
【マイプレイス】→【マイマップ】→【（自分で作った）カテゴリ】
へ移動
２右上のリンクボタンを選択
３ URLをコピーして、『&output=kml&ge_fileext=.kml』を後ろにつける。
４ロケスマのアプリ上でURLを入力する際に３のリンクをペーストすると完了！

他にもやり方があるかもしれないが、わからない人は試してみてほしい。

2012年4月19日木曜日

【web】イノベーションとマーケティング

いつのWeb Site Expertか忘れたが、
村上知紀さんがイノベーションについてイノベーションについて
おもしろいことを書いていた。

村上さん曰く、イノベーションを起点とした流れは以下の流れになっている。

１新しいサービスや技術やデバイスが出る（技術革新がおこる）
２ユーザが技術革新に反応する。
３ユーザの動きに応じてマーケティングの仕方が変わる。
４マーケティングの変化に応じて企業が変わる

最近で言えばiPhoneやAndroidのスマートフォンが出現してきて、
それにユーザは反応し、そのユーザの流れに応じてマーケティングの手法も
変えていくということらしい。
ごもっともです。

意外とマーケティングをするときって現時点で消費者は何を求めているかに
注意しているものの少し先の未来の消費者が何を求めているかはわかっていない。
というのも何が来るかわからないからである。
じゃあなぜ予測できないのか。
それは１の新しいサービスや技術に着目できていないからである。

Webの世界の基本は情報技術にある。
つまり情報技術の変化を追って少し先の消費者が何を欲しいと思うのか予測することが
重要になる。
先手必勝のweb業界ではこの予測と実行のスピードが勝敗を決めるのではないか。

2012年4月18日水曜日

【symfony】index.phpをURLから消す！

symfonyでアプリ開発を行っていて、
URLからindex.phpを省略したいと思い調べた。
するとアプリのsetting.ymlで設定ができることが判明！

setting.yml

prod:
.settings
no_script_name: on

no_script_nameをoffにすればprod環境においてindex.phpは省略できる。
もうsymfony2もとっくにリリースされているけど
さきにsymfony1.x系をマスターしたいと思う今日このごろ。

終わり

2012年4月16日月曜日

【PHP】型の変換

PHPで型を変換したいなーとか思ってググった。

settype

解説	変数の型をセットする
書式	`bool settype( mixed var, string type )`
書式	`bool settype( mixed 変数, string データ型 )`
引数	`var` 変数
引数	`type` データ型
返値	TRUE（成功した時）／FALSE（失敗した時）

例：
<?php
$num = 1;
settype($num, "string");

便利だなーとか思ってたけどキャストした方が早くねってことに気づいた。

例：
<?php
$num = (string)1;

頭が固いとこんなことをしてしまうね。。
キャスト、キャスト、キャスト。
よく覚えておこう。

【etc】安藤美冬さんに共感！！

久しぶりにびっくりするほど人に共感した。
2012/4/15にTBSで放送された情熱大陸に出演の安藤美冬さん。
生き方が自分の理想型だわー

何も肩書きを持たず、あらゆるビジネスをこなすノマドワーカーに自分もなりたい。
もちろん何のスキルも持ってない今の自分では出来る生き方ではないかもしれないが、
ノマドワーカーになるためにあれこれスキルを身につけていきたいと強く思った。

安藤さんが紹介していた「自分の中に毒を持て」（岡本太郎著）がめっちゃ読みたいので、早速本屋にでも行ってくるかのー

【マーケティング】webマーケティングの勉強（その２）

webマーケティングで欠かせない要素として検索エンジンが挙げられる。

ネットユーザは大抵検索エンジンを使って（ググって）ネットサーフィンしているからだ。

なんで、今日は検索エンジン周りのマーケティング知識を勉強したついでにメモを残す。

LPO(Landing Page Optimization) ランディングページ最適化のことをさす。
ユーザが求めているページにいかにして効率よくWebページに向かわせるかが重要である。
ECサイトで家具を見たいユーザには家具カテゴリのページを提示したり、
ユーザ登録したいユーザには登録ページに直結できるようにすること。
最適化することでCVRなどを高めることが出来る。

リファラ参照元リンクのこと。
LPOを実現するためにはリファラを洗い出して、
ユーザがどのようにサイトに訪問してくれるのかを把握する必要がある。

SEO(Search Engine Optimization) 検索エンジン最適化のこと。
ある特定の検索エンジンを対象として検索結果でより上位に現れるようにwebページを書き換えること。またその技術のこと。（wikipedia参照）

2012年4月13日金曜日

【Mac】macでroot権限を有効にする！！

自分はmacのlionさんユーザなのだが、
今回php.iniファイルをいじろうと思っていたら困ったことに編集できない。。
権限がないとのことで。。
root権限＋書き込み権限が必要つまりroot権限をどうにかしてつけたい！
とかおもってたら、とても親切にappleのサポートに書いてあった。

『Mac OS X で「ルート」ユーザを有効にして使用する』 lionさんもそれ以前のバージョンもすべて親切に書いてあった。。さすがっす。

fin.

2012年4月11日水曜日

【マーケティング】webマーケティング勉強中ー

エンジニアとして１年ほど勉強させてもらっているが、
最近大事なことに気づいた。。。
webマーケティングの知識がなさすぎる。。
どれだけよいものを作れてもそれがどれほどの人にとって
よいものとされるかはわからない。

そこでwebマーケティングについて勉強を始めた。
とりあえず参考書ということで取っ付きやすそうな以下の本を入手。

『マンガでわかるWebマーケティング』

ほんとに基礎から教えてくれる良本だと思う。
今日はその中でも学んだ単語をメモ書き＋自分なりの解釈を込めて、記載しておく。

PV(page view)

Webサイトで閲覧されたWebページ数。アクセス数をカウントする際に用いられる。

UU(unique user)

ある特定期間で訪れた重複をカウントしないユーザー数。

セッション数

調査期間内でのユーザの訪問数。例えば３０分以内でのユーザのサイト訪問数は全部１回とカウントするとすると、あるユーザが１時間に１回、計3回サイトに訪問したとするとセッション数は3回だが、１５分に１回、４５分のウチに3回訪問した場合は２回でカウント（30分以内に２回訪問しているため）される。

コンバージョン率

企業Webサイトの訪問者数に対する、そのサイトで商品を購入したり会員登録を行ったりした人の割合。マーケティングを考える上ではまずサイトに訪問してもらうことが大前提であり、その後、目標に応じて商品を購入してもらえるか、会員登録してもらえるかがポイントになる。どれだけPVが多くても結局商品は購入してもらえないのではECサイトとしてマーケティングが上手く出来ていないことになる。

CRM(Customer Relationship Management)

情報システムを通じて長期的任企業と顧客の関係を築き上げること。顧客情報をDB管理することで企業と顧客の間でのやり取りを記録し、無駄なく適切な情報を顧客に提供することで良好な関係を築く。

2012年4月1日日曜日

【symfony2】symfony2にふれて

symfony2にふれて

symfony2にちょろっと触ったので、メモを残す。

ページ作成手順

ルート作成
コントローラ作成
テンプレート作成

ディレクトリ構成

dirname	内容
web/	ウェブアセットとフロントコントローラ
src/	バンドルなどを配置
app/	設定
vendor/	サードパーティ

バンドル

プラグインの概念に近いらしい。symfony1.x系に触れていた人はfrontendの〜moduleのアクションクラスを〜のような感覚からするとどちらにも該当する概念ではないとのこと。
バンドルの設定はapp/configで行う。詳しくはsymfony2日本語ドキュメントへ。

登録: 投稿 (Atom)