LINEスタンプがやっと承認された!!

勢いで作ったスタンプがやっとこさ承認されたぞー!忘れてたぞー!

作成経緯

  • 会社辞めて暇だった
  • 何しよう
  • LINEスタンプでも作るか!!
  • でも絵描けないしPhotoshopIllustrator使えない・・
  • 手描きの絵でどうにかして作れないかな・・
  • LINEスタンプ 手描き 検索!
  • どんぴしゃな記事に出会う!出来る!

参考

【超初心者向け!!】秒速でLINEスタンプを自作する方法!|合同会社チームサンタ

の記事を参考にして作っていった。
とてもわかりやすく書かれていて参考になりました。ありがとうございます!
絵を描いてスタンプにするのはとても簡単。
スタンプ2040個考えて絵にする時間・気力・体力があれば誰でも作れる。

申請〜承認〜販売まで

細かい日付は残していなかったので曖昧

  • 2014年9月某日
  • 2014年9月23日
  • 2014年11月末日
  • 2015年2月27日
    • LINE Creators Marketよりスタンプ承認のメールが!
    • マイページにアクセスしてリリースボタンをぽちっと
    • 2〜3時間でストアに反映されて購入可能に!

膨大なスタンプが申請されていると思うので、申請から承認まで半年位はかかりそう。
忘れかけてたよね・・・

リジェクトされずに一発で審査が通り、無事にストアに並んでいるので感動しました。
やり切れたので、自分で自分を褒めます。

作成したスタンプ

チュー犬 - LINE スタンプ | LINE STORE

私立恵比寿中学さん大好き大好きという気持ちのまま勢いで作ったもの。
なぜこの名前にしたのか、など殆ど覚えていないが、

  1. 私立恵比寿中学
  2. エビ中
  3. シリツエビチューTシャツあったなぁ
  4. チュー・・・チュー・・・チューケン!忠犬ハチ公
  5. 柴犬にシリツエビチューTシャツっぽいの着せよう!
  6. 字が入らない!チューが限界!
  7. (シリツエビ)チューが大好きな犬
  8. チュー犬!!

こんな感じ。アイドルが好きな柴犬が何かしてるスタンプ

私立恵比寿中学さんとは一切関係ありません。好きなだけです

公式でかわいいスタンプ出してくれないですかね〜
ロボサンのはあるけど・・・

形態素解析&マルコフ連鎖を使って文章をつぶやくTwitter botを作った

Rubytwitter botを作った。構想から完成まで約3ヶ月 何だかんだでものすごく時間がかかってしまった。。。

github.com

どうせなら使ったことのない言語で作りたかったので、Rubyに挑戦してみることに。
gitもまともに使ったことがなかったので、bitbucketでソースコードの管理をしながら作った。
完成するまでの流れを残しておく。

Rubytwitter botを作る方法を調べる

とにかくググる

どうせだったらHeroku使いたい(少しだけ使ったことあるから)

Herokuを使う方法を調べる

とにかくググる

調べていく中で、形態素解析マルコフ連鎖 という言葉を知る。
定期的につぶやくなら、決まった言葉をランダムにつぶやくだけじゃ面白くないので形態素解析マルコフ連鎖を使ってみることに!

形態素解析マルコフ連鎖について調べる

ググる

Mecabを入れてみる

を参考にしてrubyからMecabを使ってみる

require 'natto'

nm = Natto::MeCab.new

nm.parse('今日も100%スマイルサーブ。テニスの王女様。鈴木裕乃です。') do |n|
    puts "#{n.surface}\t#{n.feature}"
end
今日   名詞,副詞可能,*,*,*,*,今日,キョウ,キョー
も 助詞,係助詞,*,*,*,*,も,モ,モ
100 名詞,数,*,*,*,*,*
%   名詞,サ変接続,*,*,*,*,*
スマイル    名詞,一般,*,*,*,*,スマイル,スマイル,スマイル
サーブ   名詞,サ変接続,*,*,*,*,サーブ,サーブ,サーブ
。 記号,句点,*,*,*,*,。,。,。
テニス   名詞,一般,*,*,*,*,テニス,テニス,テニス
の 助詞,連体化,*,*,*,*,の,ノ,ノ
王女  名詞,一般,*,*,*,*,王女,オウジョ,オージョ
様 名詞,接尾,人名,*,*,*,様,サマ,サマ
。 記号,句点,*,*,*,*,。,。,。
鈴木  名詞,固有名詞,人名,姓,*,*,鈴木,スズキ,スズキ
裕乃  名詞,固有名詞,人名,名,*,*,ひろの,ヒロノ,ヒロノ
です  助動詞,*,*,*,特殊・デス,基本形,です,デス,デス
。 記号,句点,*,*,*,*,。,。,。
    BOS/EOS,*,*,*,*,*,*,*,*

できた!
(鈴木/裕乃にするためにMecab辞書に名前追加してます)

色々調べてなんとなくわかったので、実装の方針が固まる

実装方針決定

  • エビ中さん大好きなのでエビ中さん関連で
  • フォロワーさんのツイート+歌詞の一部を合わせたリストを形態素解析
  • 解析したものをマルコフ連鎖を使って文章組み立て
  • つぶやく&リプライの作成
  • 生徒の名前が含まれていたら、該当生徒がよく使う顔文字(アメブロより拝借)をランダムで付与

と、方針が決まったので実際にコーディング

問題発生and回避

  • Mecabでやろうとしたけど、herokuには入れられない!!
  • okura使う???試してみたけどwakati書きに時間がかかりすぎぃい(やり方が悪い?)
  • 形態素解析は YahooのAPIを使うことに
  • API制限があるが、24時間で50000回制限&1リクエストで100kbだったから大丈夫
  • 1時間に1回ツイートを取得→形態素解析して辞書を作り直す
  • 取得するツイート数は最大600にすれば制限に引っかからない

実装の参考に(ほぼ丸写しに)させて頂いたコードなど

Twitter Streaming APIRubyのクラス分け

形態素解析マルコフ連鎖

Heroku関連

  • branchをHerokuにpushしたい
    • https://devcenter.heroku.com/articles/git

      Branches pushed to Heroku other than master will be ignored by this command. If you’re working out of another branch locally, you can either merge to master before pushing, or specify that you want to push your local branch to a remote master. To push a branch other than master, use this syntax:
      $ git push heroku yourbranch:master

  • ローカルでの動作確認/foreman/.env
    • https://devcenter.heroku.com/articles/procfile

      Config vars saved in the .env file of a project directory will be added to the environment when run by Foreman. For example we can set the RACK_ENV to development in your environment.
      echo "RACK_ENV=development" >>.env

いろいろあったが何とか完成!他のエビ中関連botさんと会話しつつ、全く役に立たないbotは元気に稼働しています。内容は意味不明・・・

キングオブ学芸会bot (@kogakugeeeekai) | Twitter

これお気に入り

参考にさせていただた皆様に感謝!

プログラムはなぜ動くのか ― 知っておきたいプログラミングの基礎知識をやっと読んだ

数年前に買ってちらっと見て本棚の片隅に置いてあったのをやっと読んだ。

まだまだ理解できない部分もあったが、今までこんなことも知らずにプログラマとして働いていた自分恐ろしい((((;゚Д゚))))

読んでよかった。第2版を電子書籍で買ってた事を思い出したよ・・・

第1章 プログラマにとってCPUとはなにか

  • プログラム→コンピュータに実行させる処理の順番を示すもの→命令とデータ
  • プログラムはメイン・メモリに
  • 命令やデータはメモリのアドレスに格納される
  • CPUがプログラムを実行
  • CPU→制御装置+演算装置+クロック信号+レジスタ
  • レジスタ→アキュムレータ・インデックスレジスタ・フラグレジスタ・プログラムカウンタ・汎用レジスタ
  • アセンブリ!!!

第2章 データを2進数でイメージしよう

  • ICのピンは1本で2つの状態を表す
  • 32ビット・マイクロプロセッサは情報を入出力するためのピンを32本持っている!(衝撃
  • 一度に32桁(32ビット=4バイト)の2進数の情報を処理できる!(衝撃
  • シフト演算
  • 補数(よくわかってない
  • 論理右シフト、算術右シフト
  • 論理演算

第3章 コンピュータが少数計算を間違える理由

  • 0.1を100回加えても100にならない(えっ
  • 小数点数を2進数で表すには、整数と同様に重みを掛けて結果を加える(ついていけない
  • 浮動小数点数(もうダメだ
  • 正規表現とイクセス表現(もう許してください

この章は全然わからなかった・・

第4章 四角いメモリーを丸く使う

  • メモリーの実態はICと呼ばれる電子部品
  • アドレスを指定してデータを読み書き
  • アドレスはデータを格納する場所を示すもの
  • メモリーの論理的なイメージはビルディング
  • ポインタ→データの値そのものではなく、データが格納されているメモリーのアドレスを持つ変数のこと。
  • 配列
  • スタック→LIFO(Last In First Out)
  • Push, Pop
  • キュー→FIFO(First In First Out)
  • Put, Get
  • リングバッファ
  • リスト要素
  • 2分探索木(聞いたことある

第5章 メモリーとディスクの親密な関係

  • プログラムは記憶装置に格納されていて順次読み出されて実行される
  • フォン・ノイマン
  • パソコンにおける記憶装置→メモリー、ディスク
  • ディスクに記憶されたプログラムがメモリーにロードされてから実行される
  • ディスクアクセスを高速化→ディスクキャッシュ(メイン・メモリー内の領域)
  • ディスクをメモリの一部として使う仮想記憶→ページング方式、セグメント方式
  • ディスクの物理構造
  • 一般的なパソコンではセクター方式

うーん。

第6章 自分でデータを圧縮してみよう

  • ファイルにはバイト単位で記録
  • ランレングス法(?
  • ハフマン法(???

ここもよく理解できず

第7章 プログラムはどんな環境で動くのか

  • 動作環境 = OS + ハードウエア
  • AT互換機とかx86とか

うーん?

第8章 ソース・ファイルから実行可能ファイルができるまで

10年前の新人研修でC言語の上っ面をかすっただけなので全く理解できず。。。

インタプリタの実行イメージがわからん。

実行時にネイティブコードに逐次変換したネイティブコードがメモリにロードされてから実行されるのかな??

第9章 OSとアプリケーションの関係

流し読み

第10章 アセンブリ言語からプログラムの本当の姿を知る

アセンブリ言語面白かったから、もう少し勉強する(予定

第11章 ハードウエアを制御する方法

  • ハードウエアとの入出力を支えるのはIN命令とOUT命令
  • 周辺装置の割り込み
  • DMA

流し読み

第12章 コンピュータに「考え」させるためには

  • 人間の考え方をプログラムで表す(YES!
  • 人間の癖をプログラムで表す(ほぅ
  • 記憶を生かすことで、より人間らしい判断を行う(なるほど

第2版買っていたのでそっちも読みます。

コンピュータともう少し仲良くなったら今からでも成長できるかな!!!

jQueryのeachを読む

コードリーディングの第一歩として自分が読みやすいJavaScriptを読むことに。

jQueryのソースコードを読むための参考サイト20選 - DQNEO起業日記

を参考にして、よく使うeachメソッドを読んでみる。

ソースコードビューアあったから、古いバージョンとメソッドの内容を比較するのにいいかもしれない。

jQuery source viewer

よく使う方法

このようなhtmlがある時に、liを1つずつ取り出す。

<ul>
    <li>(・∀・)</li>
    <li>(*´Д`)</li>
    <li>(・∀・)</li>
    <li>(*´Д`)</li>
    <li>(・∀・)</li>
</ul>
$('li').each(function(i, elm) {
    // elm == this
    console.log(i + $(elm).text()); // 0(・∀・) のように表示される
});

eachメソッド

// args is for internal usage only
each: function( obj, callback, args ) {
    var value,
        i = 0,
        length = obj.length,
        isArray = isArraylike( obj );

    if ( args ) {
        if ( isArray ) {
            for ( ; i < length; i++ ) {
                value = callback.apply( obj[ i ], args );

                if ( value === false ) {
                    break;
                }
            }
        } else {
            for ( i in obj ) {
                value = callback.apply( obj[ i ], args );

                if ( value === false ) {
                    break;
                }
            }
        }

    // A special, fast, case for the most common use of each
    } else {
        if ( isArray ) {
            for ( ; i < length; i++ ) {
                value = callback.call( obj[ i ], i, obj[ i ] );

                if ( value === false ) {
                    break;
                }
            }
        } else {
            for ( i in obj ) {
                value = callback.call( obj[ i ], i, obj[ i ] );

                if ( value === false ) {
                    break;
                }
            }
        }
    }

    return obj;
}
eachメソッドについての疑問
  1. eachの第3引数argsは何か?使うの?
    第3引数argsがある場合はapply、ない場合はcallを使っている。applycallって何だっけ?
  2. $.each($('li'))$('li).each 両方使えるよね?

1. eachの第3引数argsは何か?使うの?

applyとcall

全く読んでいなかったサイ本の出番!第5版しかもってないからそれを引っ張り出して読む。サイ本、いい本ですよね。

JavaScript 第6版

JavaScript 第6版

P.138 8.6.4 apply()メソッドとcall()メソッド の部分より引用

2つのメソッドを利用すると、あるオブジェクトのメソッドであるかのように関数を呼び出すことができます。call()メソッドとapply()メソッドの最初の引数は、これから呼び出す関数の対象となるオブジェクトで、関数の本体のthisキーワードの値になります。call()メソッドの2番目以降の引数は、これから呼び出す関数に引数として渡されます。

apply()メソッドとcall()メソッドの違いについては、

apply()メソッドもcall()メソッドと同じような働きをします。ただ、関数に渡す引数を配列形式で指定する点が異なります。

なるほど。第3引数のargsは配列形式で渡してあげると。

第3引数argsを試す

試しに第3引数を渡してeachを実行してみる。

// callback関数の引数に第3引数で渡した配列の値が入る。
$.each(['a', 'b', 'c'], function(a, b) {
    console.log(this); // String {0: "a", length: 1}
    console.log(a); // 1
    console.log(b); // 2
}, [1, 2]);

$('li').each(function(a, b) {
    // elm == this
    console.log($(this).text() + ':' + a + ' :' + b); // (・∀・):3 :5 
}, [3, 5]);    

// 第3引数は配列形式じゃないといけないので、以下はエラーになる
$('li').each(function() {
    console.log(this);
}, 'test');

ここまで見て思ったのは、eachに第3引数を渡して使ったことないこと。

使い方としては以下のような感じ?うーん・・・

// こういう使い方は出来るのか?
$.each([1, 2, 3], function(x, y) {
    console.log(this + ':' + x + ':' + y); // 1:5:10
    console.log((this + x) * y); // 60
}, [5, 10]);

// わざわざ引数で渡すならこうするかな?
$.each([1, 2, 3], function() {
    var x = 5, y = 10;
    console.log(this + ':' + x + ':' + y); // 1:5:10
    console.log((this + x) * y); // 60
});

まて。eachメソッドにコメント書いてあった。

// args is for internal usage only

argsは内部利用のためにのみ使う??よくわからなかった。。

第3引数なしの場合はcallback.call()が実行される

argsがない場合のコメント

// A special, fast, case for the most common use of each

eachの一般的な使い方ってことかな??

配列じゃなくてオブジェクトもOK

// オブジェクトもいける
// callback関数の引数には`key`と`value`が入ってくる
$.each({'test': 123, 'test2': 'あいうえお'}, function(key, value) {
    console.log(key, value); // test 123, test2 あいうえお
    console.log(this); // Number {}, String {0: "あ", 1: "い", 2: "う", 3: "え", 4: "お", length: 5}
});


// `i`にはindex, `v`には値が入ってくる
// この場合は this == v
var obj = $.each([1, 2, 3, 4, 5], function(i, v) {
    console.log(i + ':' + this); // 0:1, 1:2, 2:3, 3:4, 4:5
    console.log(i + ':' + v); // 0:1, 1:2, 2:3, 3:4, 4:5
});
// each関数はobjをreturnするのでこうなる
console.log(obj); // [1, 2, 3, 4, 5]

2. $.each($('li'))$('li').each 両方使えるよね?

$('li').each(function(i, elm) {}); の場合は以下が呼ばれる。

// Execute a callback for every element in the matched set.
// (You can seed the arguments with an array of args, but this is
// only used internally.)
each: function( callback, args ) { // callbackにfunction(i, elm) {} が入る
    return jQuery.each( this, callback, args ); // eachメソッドを呼ぶ。thisは$('li')
},

jQuery.eachを呼んでいるので、 $.each($('li'), function(i, elm) {}); となる!

DayOneに投稿するブックマークレット

DayOneの使い方を見直そうと思い検索していて見つけた記事

DayOneをWebクリップに変えるブックマークレット DayOneClip - W&R : Jazzと読書の日々

素晴らしい!
普段はChromeを使っているので、Chromeブックマークレットを登録して実行!
便利だわー。

DayOneのURL schemeはこちらに

Mac Guide – DAY ONE / SUPPORT

DayOneはYouTubeの動画も再生出来るらしい。

DayOneにYouTubeの動画もクリップできるようにしました DayOneClip - W&R : Jazzと読書の日々

YouTube動画貼り付け版を試してみたが、画像が表示されるだけで再生出来ず><
ブックマークレットのコードを見てみると、

if(/m\.youtube\.com/.test(url))

youtubeのurl判断が m.youtube.com になっていたので、この部分を変更することに。
元のブックマークレットはモバイル版のリンクを使っている模様。

自分の使い方だと、

  1. PCのブラウザで https://www.youtube.com/watch?v=xxxx のようなurlの動画を見る
  2. これ保存しとこ
  3. プラウザブックマークレット実行!
  4. DayOneに投稿

がいいので、以下のようにブックマークレットを変更させてもらった。

javascript:title=document.title;url=location.href;clip=title+"\n";if(/.+\.youtube\.com/.test(url)){id=url.split("v=")[1];clip+=url+"\nhttp://youtube.com/watch?v="+id}else{text="";p=document.getElementsByTagName("p");for(k in p) text+=p[k].innerText;text=text.replace(/\n/g,"").replace(/undefined/g,"").substr(0,100);clip+=url+"\n<img src=http://capture.heartrails.com/300x200/?"+url+" style=\"border-radius:10px;margin:1px 15px 1px 1px;box-shadow:1px 2px 3px gray;\">\n"+text+"...\n"}location="dayone://post?entry="+encodeURIComponent(clip);

このブックマークレットを登録して実行するとDayOneにリンク情報が転送されて。。。

f:id:gawao:20140515133420j:plain

Done をクリックすると http://youtube.com/watch?v=xxxxxx のurlの動画が表示されて再生出来る!

f:id:gawao:20140515133434j:plain

出来ました!

winerosesさんありがとうございます!!

Webサービスのつくり方ー「新しい」を生み出すための33のエッセイを読んだ

Webサービスのつくり方 ~「新しい」を生み出すための33のエッセイ (Software Design plus)

Webサービスのつくり方 ~「新しい」を生み出すための33のエッセイ (Software Design plus)

Webサービスの過程を考慮してエッセイ風に語っている本。
各章を読んで印象に残った事と感想をメモ。

取り敢えず何かつくろう

第1章 心構えと下準備

  • ぐだぐだ言ってないでコードを書けよ、ハゲ
  • 実現していない、カタチになっていないことにはあまり価値がない
  • 唯一重要なものはコードなんだ。
  • Mac一つあれば開発出来る!
  • なければつくる
  • ブログは自分自身を成長さえるよい鍛錬の場
  • 勉強会は面白くて、いい仲間ができる場所
  • 3回繰り返すことがあれば共通化を考える

コード書く前に色々調べて時間だけが過ぎて結局何もできてない。。って事ばかりなのではっとさせられた。

第2章 企画

  • 次の7つの項目を決めること
    1. 哲学
    2. イデア
    3. テーマ
    4. コンセプト
    5. 名前
    6. デザイン
    7. 内部設計
  • 哲学
    • 個々人が持っている、特定の興味に関する揺るがない気持ちのこと
  • イデア
    • 哲学を叶えるための個別の具体的なアイデア
  • テーマ
    • 哲学をより具体的にした、勝負する領域のこと
  • コンセプト
    • テーマに沿った、アイデアを形成するための骨格
  • デザイン
    • コンセプトやアイデアを洗練させていくと無駄なものが削ぎ落され、サービスやアプリに対する最低限の機能が抽出されます
    • 紙にUIのイラストを書くような作業を、何度も繰り返すとよい
  • 内部設計
    • ユーザーから見たシステムの振る舞いを書いてから作業に移るとよい
  • イデアは新しい組み合わせ

哲学!!!
イデアは組み合わせ!これは自分も思っていたこと。

第3章 設計

  • ユースケースとは、大まかに定義すると、ユーザーから見たシステムの振る舞いを指す
  • ぼんやりとしているシステムの機能を明確化するために書かれる
  • ユースケースを元に実装計画を立てられる
  • ユースケースごとに実装をしていくと考えると、現在の実装段階が分かって効果的
  • ユースケースシナリオ
  • ユースケースは実装の目標
  • 内部設計の肝はデータベースの設計

今までユースケースって書いたことがなかったが、これから書いてみよう。
抜けがなくなって手戻りしなくなりそうだし、実装方針を固めるのに役に立ちそう。

第4章 開発

  • モック作ったりWeb API使ったり
  • MVC
  • WAF
  • perlでのコード
  • CSS Framework達

ここあまりついていけなかった。。実際にコードを書きながらもう一回読んでみよう。
perlやってみようかな。。

第5章 プロモーションと運用

  • そのサービスが何を目標としていて何ができるのかだけでも最低限文章として書けるようにしておく
  • プレストか拡散とか
  • システム運用とコンテンツ運用
  • サーバ構成
  • キャッシュ
  • スケールアップとスケールアウト
  • やり方は一つじゃない

ここもついていけていない・・><
サーバ構成とか超苦手部分だ。
運用していてもサーバ構成や負荷について全く気にしたことなかったからなー。
一人で運用までやってみると、こういう事も経験するからやるしかないと思った。