読者です 読者をやめる 読者になる 読者になる

webサービス開発と本の実践

webサービス開発や課題解決の為に読んだ本からヒントを得て実践する様子を書くブログです。

Vue.js 初めの一歩

Javascript Vue.js

Javascriptでよく耳にするMVVMフレームワークとは何か、jQueryでDOM操作は複雑になってくると辛いので
何とかしたいという気持ちからVue.jsを勉強し始めました。

まず、下記を読みました。

ガイドは、英語訳だからかちょっと読みづらかったですが
サンプルも多く、意味を理解するのには困らなかったです。

jp.vuejs.org

www.slideshare.net

スライド分かりやすかったです。

ガイドを読んで、少しサンプル動かした後だと
染み込む情報量が多くて、参考になりました。

誰かが、新しい事を勉強し始めるときはまずスライド見て
概要を掴むという話をされてた気がしますが、確かにいいですね。

Vue.jsの特徴について、ガイドを読みながらまとめていたのですが
スライドの方が分かりやすいので、辞めておきます。

Qiitaの言語別投稿数の推移を作ってみた(半年分)

PHP Javascript

QiitaのAPIを使って、データを半年前位から取り始めてだいぶ溜まってきたので
気分転換に、言語別の投稿者数の推移を作ってみました。

面白みのないグラフになってしまったので特にオチはないです。。。
2015/12に投稿数が増えているのは、AdventCalenderの影響ですかね。


f:id:misaex:20160605042844p:plain

コード

DBの処理は「Idiorm」というDBライブラリを使いました。
DB処理する前の下準備がすごい楽なので、ちょっとしたもの作るときいいですねー。
PHPの薄いDBライブラリ「Idiorm」を使ってみた - Qiita

グラフはHighcharts.jsを使いました。
簡単に使えて、見た目も綺麗です。
Interactive JavaScript charts for your webpage | Highcharts



Qiita - 言語別投稿数推移


Qiita - 言語別投稿数推移

marked.jsを読んでみる

Javascript

はてな記法でのリアルタイムプレビューを作りたく
Javascriptでパーサを作る為にどう実装したものか悩んだので
既にあるパーサを参考にしようと思い、マークダウン記法のパーサであるmarked.jsを読んだ。

GitHub - chjj/marked: A markdown parser and compiler. Built for speed.

圧縮されてるので、下記にあるサービスを使って
読みやすくしてから、実際にchromeデベロッパツールで
javascriptを1行1行動かしていって確認した。

圧縮されたJavascriptを読みやすく元通りに整形し直してくれるWebサービス10選 | Maccle

大まかな処理

・ブロック要素で合致する部分を配列に格納

 正規表現で、記法に合致する部分を配列に格納していく。
 配列にtype(headingやtable等)とtext(合致した要素のテキスト)を入れていく。

 配列に格納した部分は、テキストから削っていき、なくなるまで続ける


・ブロック要素の配列をHTMLに変換

 上記で作った配列をHTMLに変換する。
 テキストはインライン要素で合致する部分をHTMLに変換する。


大まかな処理としては、上記のような感じだった。

課題

プログラムを読んでるなかで、この書き方はよくわからないなと思ったもの。

call

 「call」を何のために使っているのか?

(function() {

/*
 * プログラム
 *
 */

}).call(function() {
  return this || (typeof window !== "undefined" ? window : global);
}());


callはthisの指定と考えると、「this」がない場合windowオブジェクト、それもなければglobalオブジェクトを
thisとするという意味ではないかと思います。

Javascriptのcall/apply関数のプロっぽい使い方 〜 JSおくのほそ道 #014 - Qiita


for文の省略

for (;src;) {

}

上記src変数は文字列ですが、どんどん文字列がなくなって最後には
空になる為、0以下になるとループがとまる特性を利用しているのでしょうか。
JavaScript における for文 の色々な書き方 | あらかぜ手帖

正規表現で置換(パターンを変数で書く)

Javascript

matchやreplaceで正規表現のパターンに変数を使おうと思ったら
ひと手間必要になります。別に難しい話ではありませんが、個人用メモとして。

ポイント

・変数で正規表現を書く場合は、new RegExp()で正規表現オブジェクトを作り
 match・replaceメソッドで利用する。

 
 RegExp - JavaScript | MDN
 正規表現を使ったマッチングに変数を使用する - Qiita


・変数の中身が予め分からない場合はエスケープに通すこと
 ※あえて正規表現のパターンで特別な文字を使いたい場合は除く。

 【保存版】正規表現でエスケープが必要な文字一覧表 - Qiita

サンプル

下記、サンプルを書いてみました。

function regexp_escape(reg_text){
    reg_text = reg_text.replace("(", "\\(");
    reg_text = reg_text.replace("/", "\\/");
    reg_text = reg_text.replace("+", "\\+");
    reg_text = reg_text.replace("{", "\\{");
    reg_text = reg_text.replace("}", "\\}");
    reg_text = reg_text.replace("|", "\\|");
    reg_text = reg_text.replace(")", "\\)");
    reg_text = reg_text.replace("[", "\\[");
    reg_text = reg_text.replace("]", "\\]");
    reg_text = reg_text.replace("-", "\\-");
    reg_text = reg_text.replace("*", "\\*");
    reg_text = reg_text.replace(":", "\\:");
    reg_text = reg_text.replace("$", "\\$");
    reg_text = reg_text.replace("^", "\\^");
    reg_text = reg_text.replace(".", "\\.");
    
    return reg_text;
}

text = "Javascriptによる正規表現(エスケープ)";

var pattern = "(エスケープ)";
pattern = regexp_escape(pattern);

var replace = "[***]";

var RegularExp = new RegExp( pattern, "g" );
text = text.replace(RegularExp, replace);

console.log(text); //出力:Javascriptによる正規表現[***]

文字数測定(改)

Javascript

全角・半角を区別した文字数測定を以前書いた。
Javascriptで文字数を測定・文字列を丸める - webサービス開発と本の実践


が、出来が微妙だったので再度書いてみた。

仕様

下記のようにカウントします。

・全角 1文字
・半角 0.5文字
・改行 1文字
サロゲートペア文字(4バイト文字) 1文字

サロゲートペアについては、下記記事が分かりやすいです。
JavaScriptでのサロゲートペア文字列のメモ - Qiita


テストしてないけど、プロパティの値を変えれば
設定はカスタマイズできると思う。

コード


文字数測定改

テスト

テストは、Jxckさんのassert.jsを使って書いてみました。
すごく簡単に書けたので有難かった。
qiita.com


文字数測定改テスト

LINEについてざっくり知る

webサービス

ヤバいLINE 日本人が知らない不都合な真実 (光文社新書)

ヤバいLINE 日本人が知らない不都合な真実 (光文社新書)

LINEの歴史について等、読んでて面白かった。

LINE社の沿革

韓国の企業 ネイバーコム

・オンラインゲームと検索事業が主
サムスングループのIT企業
サムスンSDSの社内ベンチャーとして始まる
ハンゲームコミュニケーションを買収
 

日本進出

・2000 ハンゲームが日本支社を設立
・2003 NAVERを展開するも、陽の目を見ず
・2005 検索事業では、事実上の撤退
・2010 ライブドアを買収し、検索事業の拡大を図る
・2011 LINEが市場で人気を獲得し始める

ドラマチックな誕生秘話

・日本製アプリを強調
東日本大震災の影響を経た事から生まれた

日本での急速な普及に貢献

収益モデル

フリーミアムモデル

 ・広告収入
 ・コンテンツ配信(音楽・書籍等)
 メッセンジャーアプリ以外のサービスや商品を提供

収益カテゴリ

・アプリ内でのコンテンツ販売
 ・LINEスタンプ(13年売上20%)・LINEクリエイターズマーケット
 ・LINE着せ替えショップ等

・LINE関連アプリ
 ・LINEゲーム(13年売上60%)、ミュージック、マンガ等

 ・キャラクターライセンス事業
  ・キャラクターグッズショップ(原宿に実店舗がオープン)

 ・企業向け広告および販促事業
   ・LINE@、公式アカウント、プロモーションスタンプ

LINEスタンプについて

10代・女性に刺さる

・スタンプのかわいさやイメージが好評
 10代・女性を中心にクチコミ効果

スタンプの効果

・テキストデータで真意を伝えるのは難しい・誤解を生む
・スタンプで、キャラクタの表情や仕草で、微妙なニュアンスを伝えられる

スポンサードスタンプ

・企業ごとのキャラクターをスタンプにしたもの
・日常的にそのスタンプを消費者が使うことにより自社の宣伝になる

LINEクリエイターズマーケット

・個人がスタンプを制作販売できる
・LINEアカウントを持つ人なら誰でも作成可能
・LINE5:クリエイター5の売上配分
 →15年2月から、クリエイターの配分は35%に。。。
・約60%のスタンプが1万円未満の売上
・一般企業も加わっている
 スポンサードスタンプだと、費用がかかりすぎる為
 自社商品の宣伝目的に利用

LINEモール

LINEグループ購入

 ・LINE上の友人や知人とまとめ買いすると割引で商品を購入できる
 ・グルーポンなどの共同購入サイトに近い発想
 ・ユーザ同士が親密なLINEでは敷居が下がるのでは

LINEギフト

 ・LINE上の友人や知人にギフト商品を送れる
 ・送る側が相手の住所を知らなくても贈りものができる
 ・友人数人で購入費用を割り勘できる機能もある

その他

・決済/タクシー/デリバリー
 ・LINE Pay(決済)
 ・LINE WOW

pukiwikiで記事更新したら○○する

PHP pukiwiki

pukiwikiで記事更新したらメール通知する場合は下記設定をすればOK。
Wikiの更新をメールで通知する方法 - PukiWiki

だが、pukiwikiの基本機能にない記事更新したらチャット通知させたいや
ある特定の記事更新があった場合に通知したい等の場合に
どこに処理を追加すればいいのかで悩んだのでメモする。

方法としては下策だと思うけど、突貫でどうにかしなきゃいけないときの対処として。


/lib/file.php page_write関数
PukiWiki/関数一覧表/file.php - PukiWiki-dev

// Put a data(wiki text) into a physical file(diff, backup, text)
function page_write($page, $postdata, $notimestamp = FALSE)
{
	global $trackback;

	if (PKWK_READONLY) return; // Do nothing

	$postdata = make_str_rules($postdata);

        //-----------------------
        //ここに処理を入れ込む
        //-----------------------
        //page ページ名
        //postdata 更新内容

	// Create and write diff
	$oldpostdata = is_page($page) ? join('', get_source($page)) : '';
	$diffdata    = do_diff($oldpostdata, $postdata);
	file_write(DIFF_DIR, $page, $diffdata);

	// Create backup
	make_backup($page, $postdata == ''); // Is $postdata null?

	// Create wiki text
	file_write(DATA_DIR, $page, $postdata, $notimestamp);

	if ($trackback) {
		// TrackBack Ping
		$_diff = explode("\n", $diffdata);
		$plus  = join("\n", preg_replace('/^\+/', '', preg_grep('/^\+/', $_diff)));
		$minus = join("\n", preg_replace('/^-/',  '', preg_grep('/^-/',  $_diff)));
		tb_send($page, $plus, $minus);
	}

	links_update($page);
}