import { Component } from 'inferno-component';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    }
  }
  render() {
    return (
      <div>
        <h1>Header!</h1>
        <span>Counter is at: { this.state.counter }</span>
      </div>
    )
  }
}

<div {...props} />みたいに書けなかったり、微妙に違いはあれど、ほぼ違いを意識せずに書けるとは思う。ただ、今回はバグなのか使用方法が間違っていたのか、意図しない挙動に遭遇して、残念ながら早々にReactに戻してしまった。それでもほとんどimportとか.babelrcを直すくらいだったと記憶している。あと、（当然ながら）データ・描画数が少なくて、パフォーマンスの違いを感じられるようなことはなかった。これは、後述するが、（見つけられていないだけかもしれないが）国内にはオープンなslack teamが少なくてデータ数が数個だったからだ。サーバーサイドレンダリングなどは試せていない。近いうちにもう一回触ってみたい。

Bulma

FlexboxベースのモダンなCSSフレームワーク。と書いてある。自分はMaterial DesignやBootstrapがあまり好きじゃなくて、なんかシンプルなのがないかと模索していたところ、こいつが公開されていて使用してみることにした。Gridとかいい感じ。react-bulmaを作ろうと思ってリポジトリ作ったけど、あまり作業できていない。使用感としては悪くないけど、個人的にはCSSフレームワークは使わないにこしたことないという考えなので、今後使うことはすくないかも。

f:id:bokuweb:20160308152034p:plain

ただ、CSS以下を追加しただけなので採用としては成功していると思う。

.hero-content
  padding 120px 0 80px
  background #f5f7fa

.logo
  height 200px
  width auto

.card
  margin 0 auto

  p.title
    margin 0

.tag
  margin 0 5px 0 0

footer
  text-align center
  margin 40px 0 0 0

作ってみて

作ったあとに驚いたんだが、探してみても国内に全然オープンなslack teamがなかった。オリジナルのslack listは50〜60くらい？slack list jaにはまだ5つしか登録されていない。teamはslack-list-ja/teams.json at gh-pages · bokuweb/slack-list-ja · GitHubで管理してるので、追加・編集はプルリクエストいただけるとありがたい。「こんなのもある」だとか「これを追加して」っての歓迎。

最後に

リモートワークしている方、導入したい方以下より参加できます。

Join リモートワーカー on Slack!

まだ見ぬslack teamの追加は以下よりお願いします。

github.com

追記

公開日からPRをいただいて、リストが充実してきました。ご協力ありがとうございます。

2015-12-15

無料の電子書籍を検索できるWEBサービス作った

AngularJS Node.js WEBサービス

kindleなんかはゲリラ的に無料セールを行う上に情報が取りにくいので特化したものを作った。厳密には作ったまま放置していたのを最近動かしはじめた。

なにこれ？

f:id:bokuweb:20151212235631p:plain

Kindle, kobo, yahoo!ブックスから無料電子書籍を検索できます。

shelf.bokuweb.me

技術的な話

構成

その名を聴かなくなって久しい(?)MEANで学習用に夏くらいに作りました。 Openshiftで動かしてます。

主なパッケージ

サーバーサイド

名称	概要
apac	Amazon Product AdvertisingのNode.jsクライアント
cheerio-httpcli	HTMLパース付きNode.js用HTTPクライアントモジュール
config	設定用
cron	書籍データのフェッチを定期実行
ect	テンプレート
mongoose	MongoDB用object modeling tool
request	楽天APIリクエスト用

クライアントサイド

coffeeで書いてた。

名称	概要
angular	1.4.3使ってた
angular-resource	resource
ngInfiniteScroll	無限スクロール

やってること

node-cronで定期的に書籍データをとりmongoDBにつっこむ

node-cronで制限に引っかからない程度の周期で、書籍データの取得を行いmongoDBを更新していっている。無料電子書籍は期間限定のものなど無料から通常価格へ移行するものがあるので、走査後に更新がなかったものは削除している。

Kindleからの取得

kindleはapacでMaximumPriceを0にして取ってきている。昔は一つの検索条件で4000商品取得できたようだけど、現在は10件×10ページの100商品しか取得できないため、検索条件を変えながら走査している。

Kindleはカテゴリ毎にブラウザノードと呼ばれる番号があるのでそいつを指定しながら走査していった。具体的には以下。categoryはこっちで勝手に定義したもの。

browserNodes = [
  {node : '漫画雑誌'                       , category : '雑誌'                   , id : 3386054051} # 14
  {node : '小説・文芸'                     , category : '文学・評論'             , id : 2292754051}
  {node : '歴史・時代小説'                 , category : '文学・評論'             , id : 2292767051}
  {node : '経済・社会小説'                 , category : '文学・評論'             , id : 2292768051}
  {node : 'ミステリー・サスペンス'         , category : '文学・評論'             , id : 2292724051}
  {node : 'SF・ホラー・ファンタジー'       , category : '文学・評論'             , id : 2292700051}
  {node : 'ロマンス'                       , category : '文学・評論'             , id : 2292725051}
  {node : 'エッセー・随筆'                 , category : '文学・評論'             , id : 2292701051}
  {node : '古典'                           , category : '文学・評論'             , id : 2292736051}
  {node : '詩歌'                           , category : '文学・評論'             , id : 2292788051}
  {node : '戯曲・シナリオ'                 , category : '文学・評論'             , id : 2292753051}
  {node : '伝承・神話'                     , category : '文学・評論'             , id : 2292726051}
  {node : '全集・選書'                     , category : '文学・評論'             , id : 2292727051}
  {node : '評論・文学研究'                 , category : '文学・評論'             , id : 2292769051}
  {node : '哲学・思想'                     , category : '人民・思想'             , id : 2292103051}
  {node : '倫理学・道徳'                   , category : '人民・思想'             , id : 2292096051}
  {node : '宗教'                           , category : '人民・思想'             , id : 2292172051}
  {node : '心理学'                         , category : '人民・思想'             , id : 2292260051}
  {node : '文化人類学・民俗学'             , category : '人民・思想'             , id : 2292272051}
  {node : '言語学'                         , category : '人民・思想'             , id : 2292324051}
  {node : '女性学'                         , category : '人民・思想'             , id : 2292166051}
  {node : '教育学'                         , category : '人民・思想'             , id : 2292640051}
  {node : '本・図書館'                     , category : '人民・思想'             , id : 2292281051}
  {node : '政治'                           , category : '社会・政治'             , id : 2293175051}
  {node : '外交・国際関係'                 , category : '社会・政治'             , id : 2293164051}
  {node : '軍事'                           , category : '社会・政治'             , id : 2293255051}
  {node : '法律'                           , category : '社会・政治'             , id : 2293195051}
  {node : '社会学'                         , category : '社会・政治'             , id : 2293229051}
  {node : '福祉'                           , category : '社会・政治'             , id : 2293247051}
  {node : 'コミュニティ'                   , category : '社会・政治'             , id : 2293151051}
  {node : '環境・エコロジー'               , category : '社会・政治'             , id : 2293228051}
  {node : 'NGO・NPO'                       , category : '社会・政治'             , id : 2293150051}
  {node : 'マスメディア'                   , category : '社会・政治'             , id : 2293154051}
  {node : '参考図書'                       , category : '社会・政治'             , id : 2293163051}
  {node : 'ノンフィクション'               , category : 'ノンフィクション'       , id : 2291791051} # 9
  {node : '歴史学'                         , category : '歴史・地理'             , id : 2293141051}
  {node : '日本史'                         , category : '歴史・地理'             , id : 2293114051}
  {node : '世界史'                         , category : '歴史・地理'             , id : 2293077051}
  {node : '考古学'                         , category : '歴史・地理'             , id : 2293142051}
  {node : '地理・地域研究'                 , category : '歴史・地理'             , id : 2293103051}
  {node : '地図'                           , category : '歴史・地理'             , id : 2293098051}
  {node : '参考図書'                       , category : '歴史・地理'             , id : 2293097051}
  {node : 'ビジネス・経済'                 , category : 'ビジネス・経済'         , id : 2291905051} # 81
  {node : '投資・金融・会社経営'           , category : '投資・金融・会社経営'   , id : 2292576051} # 13
  {node : '科学読み物'                     , category : '科学・テクノロジー'     , id : 2293350051}
  {node : '数学'                           , category : '科学・テクノロジー'     , id : 2293312051}
  {node : '物理学'                         , category : '科学・テクノロジー'     , id : 2293321051}
  {node : '化学'                           , category : '科学・テクノロジー'     , id : 2293268051}
  {node : '宇宙学・天文学'                 , category : '科学・テクノロジー'     , id : 2293286051}
  {node : '地球科学・エコロジー'           , category : '科学・テクノロジー'     , id : 2293279051}
  {node : '金属・鉱学'                     , category : '科学・テクノロジー'     , id : 2293358051}
  {node : '生物・バイオテクノロジー'       , category : '科学・テクノロジー'     , id : 2293291051}
  {node : '工学'                           , category : '科学・テクノロジー'     , id : 2293291051}
  {node : 'エネルギー'                     , category : '科学・テクノロジー'     , id : 2293264051}
  {node : '電気・通信'                     , category : '科学・テクノロジー'     , id : 2293359051}
  {node : '農学'                           , category : '科学・テクノロジー'     , id : 2293351051}
  {node : '海洋学'                         , category : '科学・テクノロジー'     , id : 2293318051}
  {node : '参考図書'                       , category : '科学・テクノロジー'     , id : 2293275051}
  {node : 'コンピュータ・IT'               , category : 'コンピュータ・IT'       , id : 2291657051} # 22
  {node : '写真'                           , category : '趣味・スポーツ・美術'   , id : 2291492051}
  {node : '絵画'                           , category : '趣味・スポーツ・美術'   , id : 2291531051}
  {node : '彫刻・工芸'                     , category : '趣味・スポーツ・美術'   , id : 2291520051}
  {node : '芸術一般'                       , category : '趣味・スポーツ・美術'   , id : 2291538051}
  {node : 'コンテンポラリーアート'         , category : '趣味・スポーツ・美術'   , id : 2291483051}
  {node : '作品集'                         , category : '趣味・スポーツ・美術'   , id : 2291491051}
  {node : '建築'                           , category : '趣味・スポーツ・美術'   , id : 2291497051}
  {node : '住宅建築・家づくり'             , category : '趣味・スポーツ・美術'   , id : 2291490051}
  {node : 'インテリアデザイン'             , category : '趣味・スポーツ・美術'   , id : 2291482051}
  {node : 'デザイン'                       , category : '趣味・スポーツ・美術'   , id : 2291486051}
  {node : '日本の伝統文化'                 , category : '趣味・スポーツ・美術'   , id : 2291526051}
  {node : '古美術・骨董'                   , category : '趣味・スポーツ・美術'   , id : 2291496051}
  {node : '美術館・博物館'                 , category : '趣味・スポーツ・美術'   , id : 2291537051}
  {node : 'モード'                         , category : '趣味・スポーツ・美術'   , id : 2291489051}
  {node : '参考図書'                       , category : '趣味・スポーツ・美術'   , id : 2291495051}
  {node : '趣味・実用'                     , category : '趣味・スポーツ・美術'   , id : 2292479051} # 133
  {node : 'スポーツ・アウトドア'           , category : '趣味・スポーツ・美術'   , id : 2292480051} # 81
  {node : '資格・検定・就職'               , category : '語学・学習・教育・資格' , id : 2293536051} # 2
  {node : '暮らし・健康・子育て'           , category : '暮らし・健康・子育て'   , id : 2292803051} # 110
  {node : '語学・辞事典・年鑑'             , category : '語学・学習・教育・資格' , id : 2292799051} # 88
  {node : '教育・受験'                     , category : '語学・学習・教育・資格' , id : 2292600051} # 55
  {node : '絵本'                           , category : '絵本・児童書'           , id : 2293383051}
  {node : '読み物'                         , category : '絵本・児童書'           , id : 2293384051}
  {node : 'ノンフィクション・伝記'         , category : '絵本・児童書'           , id : 2293368051}
  {node : '学習'                           , category : '絵本・児童書'           , id : 2293370051}
  {node : 'お絵かき・うた・音楽'           , category : '絵本・児童書'           , id : 2293364051}
  {node : '実用・工作・趣味'               , category : '絵本・児童書'           , id : 2293381051}
  {node : 'クイズ・パズル・ゲーム'         , category : '絵本・児童書'           , id : 2293365051}
  {node : 'スポーツ'                       , category : '絵本・児童書'           , id : 2293367051}
  {node : '図鑑・事典・年鑑'               , category : '絵本・児童書'           , id : 2293369051}
  {node : '超能力・不思議・占い'           , category : '絵本・児童書'           , id : 2293395051}
  {node : '学習まんが'                     , category : '絵本・児童書'           , id : 2293380051}
  {node : '少年コミック'                   , category : '少年コミック'           , id : 2430812051} # 72
  {node : '青年コミック'                   , category : '青年コミック'           , id : 2430869051} # 75
  {node : '少女コミック'                   , category : '少女コミック'           , id : 2430765051} # 13
  {node : '女性コミック'                   , category : 'レディースコミック'     , id : 2430737051} # 5
  {node : 'ラノベ'                         , category : 'ラノベ'                 , id : 2410280051} # 61 
  {node : 'ボーイズラブノベルズ'           , category : 'ボーイズラブ'           , id : 2293148051} # 17
  {node : 'ボーイズラブコミックス'         , category : 'ボーイズラブ'           , id : 2293147051} # 50
  {node : '写真集'                         , category : '写真集'                 , id : 2291790051} # 1
  {node : '映画'                           , category : 'エンターテイメント'     , id : 2291605051}
  {node : '音楽'                           , category : 'エンターテイメント'     , id : 2291622051}
  {node : 'ステージ・ダンス'               , category : 'エンターテイメント'     , id : 2291589051}
  {node : 'テレビ'                         , category : 'エンターテイメント'     , id : 2291594051}
  {node : 'タレント本'                     , category : 'エンターテイメント'     , id : 2291593051}
  {node : '落語・寄席・演芸'               , category : 'エンターテイメント'     , id : 2291621051}
  {node : '演劇・舞台'                     , category : 'エンターテイメント'     , id : 2291617051}
  {node : 'サブカルチャー'                 , category : 'エンターテイメント'     , id : 2291583051}
  {node : '漫画雑誌'                       , category : '雑誌'                   , id : 3386054051} # 14                          
  {node : '雑誌'                           , category : '雑誌'                   , id : 2825265051} # 54

これでも、小説などはパブリックドメインのものが大量にあり、走査しきれていない。全書籍を取得したかったらブラウザノード + 著者名などで検索するなどの工夫がいりそうだけど、面倒でやってない。

あとリクエストの制限は2000request/hourなんだけど、1request/5secくらいでもちょくちょく弾かれるので注意。

Koboからの取得

シンプルにURL組み立ててrequestで取ってきてる。Amazonより高速で件数もとれるのでいいんだけど、キャッシュのせいか突如商品の順序が入れ替わる問題がある。例えば、あるカテゴリの商品を1〜１０ページを走査しているときに５ページ目走査後順序が入れ替わり、6ページ目移行に1〜５ページで走査完了済の商品が登場したりする。走査回数を増やしたりして、網羅性を高めているんだけど、取りこぼしは発生していて根本対策にはなっていない。

Yahoo!ブックストアからの取得

cheerio-httpcliでのんびり取ってきている。cheerio-httpcliは記事にしたこともあるけど、かなり便利。例えば以下でyahoo!のニュース一覧をとってこれる。 ※ coffeeです。

client = require('cheerio-httpcli')
client.fetch 'http://www.yahoo.co.jp/', {}, (err, $, res)->
  $('ul.emphasis > li > a').each ()-> console.log $(this).text()

作ってみて

あくまで自分にとってはだけど、ノイズが多く感じた。各カテゴリでfeed吐くようにして興味のあるカテゴリだけ購読すると便利かも。
重複を放置しているとはいえ15000点以上の無料書籍が登録されており、まじか、ってなった。
他にも電子書籍サービスはいくつもあるんだけど、ほとんどKindleで網羅されており、Kindleすごいってのと他のサービス大丈夫か？って感想が同時によぎった。やはりkindle最強では。
洋書も対応したほうがよいかも。

2015-09-08

2015年8月に見つけたWEBサービス等作ってみた記事まとめ

WEBサービス

8月分です。Electronなど多め。

Raspberry PiとOpenCVでスプラトゥーンの勝敗を自動記録する仕組みを作ってみた

hogesuke.hateblo.jp

つくったもの

ikashot.net

どんなもの？

スプラトゥーンではバトルの履歴を見れないようになっているので、勝率がわかりません。自分の勝率がどの程度なのか知りたいなーと思ったので、勝敗を自動記録する仕組みを作ってみました。

使用技術・環境

Raspberry Pi
OpenCV
sinatra
Ruby

Electron と Polymer と TypeScript でリッチなマークダウンプレビュアー Shiba つくった

rhysd.hatenablog.com

つくったもの

github.com

どんなもの？

結構前ですが，mattn さんが小さい markdown ライブプレビューアプリ mkup をつくっていて，そういえば僕も合う markdown ライブプレビューアプリが無いなぁと思っていたのを思い出したので，オレオレ markdown プレビューアプリ Shiba をつくってみました．

使用技術・環境

Electron
Polymer
TypeScript

Qiitaっぽいメモアプリをつくってる話

torigoya.hatenadiary.jp

つくったもの

github.com

どんなもの？

身も蓋もない言い方をすればQiitaクローンです。と言っても、用途がQiitaとは違うのでフォロー機能が無かったり、ちょこちょこ機能が違います。

使用技術・環境

Ruby 2.2.2
PostgreSQL

Mithril.jsでがっつりSPAを作った話 - コード譜共有サイト「ChordKitchen」

つくったもの

chordkitchen.net

どんなもの？

コード譜をweb上で作成して共有できるサービスを作りました。

使用技術・環境

TypeScript（version1.4）
Mithril.js
nginx
Node.js
Express
MongoDB

Webデザイナーが独学でWebサービスを作って公開するまで

design-spice.com

つくったもの

sket.in

どんなもの？

Facebookアカウントでの登録をベースとした実名制のクラウドソーシング。また、一般のクラウドソーシングのような依頼と受注の「クライアントと制作者」という関係性だけでなく、フリーランスの方が自分に足りないリソースを補うために協力者を探す「制作者と制作者」の関係で利用できるのも特徴のひとつです。

使用技術・環境

Nginx
PHP
MySQL
CakePHP
Sass

Rails - ノンプログラマーが8ヶ月でWebサービスを作ってみた

qiita.com

つくったもの

rubbishbook.net

どんなもの？

失敗を共有するクチコミサイト

使用技術・環境

Rubymine
Bootstrap
Heroku
PostgreSQL
AWS
Redis

最強のTwitterクライアント作り始めた

最強のTwitterクライアント作り始めた - 9mのブログ

つくったもの

github.com

どんなもの？

本当に欲しかったデスクトップTwitterクライアント以下の様な機能を予定している。 - 1クリック or ショートカットでリストや検索タブを切り替えられる - Twitter API で出来ることは一通り実装したい - パソコン買い換えた時に複数アカウント入れなおすの辛いから、クラウドな感じで勝手に復元して欲しい - 画面は Slack っぽい感じがいい - Mac, Windows, Linux 対応 - 自分の過去ツイート全部検索したい（twisave連携)

使用技術・環境

Electron
CoffeeScript
Jade
IndexedDB

ElixirとPhoenixとMithrilのFFスタックでChatアプリを作った

2015/08/22/ElixirとPhoenixとMithrilのFFスタックでChatアプリを作った - ヽ（´・肉・｀）ノログ

つくったもの

github.com

どんなもの？

FFスタックで作ったChatアプリ

使用技術・環境

Elixir
Phoenix
Mithril

ElectronでYoruFukurou風のTwitterクライアントを作った

k0kubun.hatenablog.com

つくったもの

github.com

どんなもの？

最近デスクトップでLinuxを使い始めたんだけど、YoruFukurouみたいな感じで使えるTwitterクライアントがなくて困っていた。なので、YoruFukurouを再実装した。Mac環境で本家を置き換えようとは思ってなくて、あくまでWindowsとかLinuxとかでYoruFukurouを使いたい人向けに作っている。

使用技術・環境

Electron
CoffeeScript

最強のTwitterクライアント戦争にこっそり参戦してみた

blog.bokuweb.me

つくったもの

github.com

どんなもの？

Electron + Mithrilで作る自分好みのTwitterクライアント

使用技術・環境

Electron
CoffeeScript
Mithril

BMSをブラウザで遊べるWEBサービス『bmsjs』のα版を公開いたしました

blog.bokuweb.me

つくったもの

bmsjs.net

github.com

どんなもの？

bmsjs(α版)というWEBサービスをリリースしました。 bmsjsはブラウザ上で動作するBMSプレイヤーとSNSの機能を持つWEBサービスです。

使用技術・環境

CoffeeScript
cocos2d-JS 3.6
Wordpress

2015-08-17

BMSをブラウザで遊べるWEBサービス『bmsjs』のα版を公開いたしました

cocos2d-JS WEBサービス wordpress bmsjs

f:id:bokuweb:20150815235942p:plain

概要

bmsjs(α版)というWEBサービスをリリースしました。 bmsjsはブラウザ上で動作するBMSプレイヤーとSNSの機能を持つWEBサービスです。

<a href="http://bmsjs.net/">bmsjs</a>bmsjs.net

BMS?

元々は、KONAMIの音楽ゲーム『beatmania』を模したシミュレータにあたる『BM98』用の譜面データフォーマットとして開発されたため、現在では同様のシミュレータ（BMSプレイヤー）に用いる譜面データ（曲データ）、あるいはゲームシステム全体を指す場合が多い。2000年代中盤頃までは、「ネットユーザーのPCには何かしらのBMSプレイヤーが入っている」と言われるほどの一大ムーブメントを巻き起こしていた。[要出典]現在はブームが沈静化しているものの、未だに新作BMS楽曲が作られるなどの根強い人気を保っている。かつてのBMS作曲家の中には、プロに転向した者や著名なボーカロイドプロデューサーも多い。

wikipediaより

どんなサービスか

先にも述べましたが、BMSプレイヤーとSNSの機能を持ったWEBサービスです。具体的には以下のような機能を有しています。

BMSプレイヤー
フォーラム
アクティビティ(twitterライクなつぶやき機能)
グループ
フレンド機能

プレイヤーだけでなくフォーラムやグループなどでユーザ間でコミュニケーションが取れるようになっています。 SNS機能の需要は正直不明ですが、Javascriptで作成したBMSプレイヤーのみのサービスの場合、SEO面で非常に苦しく検索流入が望めない状態となりますし、スタンダードなコミュニティサイトも存在しない(?)ようなので合わせて設置しています。

使用方法

http://bmsjs.netにアクセスします。 twitter、googleのアカウントでログイン可能で、ログインすることでプロフィールの編集やフォーラムでのトピック作成や発言、アクティビティストリームでのつぶやきなどが可能となります。将来的にはユーザ登録することでランキングに参加できるようにする予定です。

もちろん、ユーザ登録なしにプレイすることも可能です。その場合はメニューの「Play BMS」をクリックするかhttp://bmsjs.net/bms/にアクセスしてください。選曲後、プレイが開始されます。現在はPCのキーボードのみ対応しており、ターンテーブルがShiftキー、白鍵が左からZ、X、C、V、黒鍵が左からS、D、Fに対応しています。（将来的にはGamapadAPIで専用コントローラに対応する予定です。）。

遊び方についてはこちら(http://bmsjs.net/how-to-play/)も合わせて参照してください。

推奨ブラウザはchromeです。楽曲の再生がカクつく場合は、お手数ですが、「他のタブをすべて閉じる」、「ブラウザを再起動する」などを試してみてください。パフォーマンスについては随時改善していく予定です。

現在の登録曲の中のお気に入りは「AVALON」です。ぜひ遊んでみてください。（少しまだバグってますが）

なぜ作ったのか

「ハード屋だけどソフトをバリバリできるようになりたい」ってのがスタートでした。が、最近は「趣味グラミング楽しー」ってなってて何が動機なのか分からなくなりつつあります。ただ、本業にフィードバックできるものも非常に多く、やってみてよかったという思ってます。（趣味グラミングでCoffeeScriptを書いたあと本業でCを書くとゲンナリするときもありますが・・。）最近はElectronやNW.jsを使って、USBやRS232C通信をするデスクトップアプリケーションもさくっと作れちゃうのでWEB技術を仕様した趣味グラミングは組み込みハード屋さんにもおすすめです。

少し話しがそれましたが、そんな状況のなかBMSを題材にしたのは、ふと「enchant.jsでブラウザで動くBMSプレイヤー作れそうだなー」とぼんやり思ったのと、ブラウザで動くプレイヤーができれば以下のような問題を解決できるのではないかと考えたからです。

BMSプレイヤーのデファクトスタンダードであるLR2(LunaticRave2)がmacで動かない　※1
曲データの管理先が一元化されていない
曲データはローカルに展開するのでマシンのストレージを圧迫する
これ！といったコミュニティサイトがない？（あったら教えてください)

※1 wineで動くけど

ちなみに自分の中ではBMSって5腱の「BM98」で完全に止まってたんだけど、もう一度遊んでみたいと思ったのも理由の一つです。 (なので腕前はひどいですし、界隈のこともこれから勉強しなければなりません。)

製作について過程や技術的なところ

構成

サーバ：さくらレンタルサーバスタンダード
CMS ：wordpress
DB ：MySQL
ゲーム : cocos2d-JS

ゲーム側の実装

まずはenchant.jsで簡単なプレイヤーを作ってみました。これは思いの外、2週間くらいでさくっとできて一番シンプルな譜面は動くようになりました。

プロトタイプがさくっとできたので「簡単じゃーん」と思ったんですが、実装を進めると躓きまくりでした。まずは仕様理解が困難であったこと、BM98で時代が止まっていた自分にとっては「えー！そんな動きすんの？！」ってのが結構ありました。仕様も増改築を繰り返した老舗温泉旅館のような佇まい。

<a href="http://hitkey.nekokan.dyndns.info/cmdsJP.htm">BMS command memo (JP)</a>hitkey.nekokan.dyndns.info

とか

BMS仕様書(もどき)

を参考にしながら進めました。更に実装が進むにつれパフォーマンス面での問題が出てきました。描画スプライトや再生音源が増えると自身のマシン(MBA 11-inch, Mid 2011 4GB core-i5)ではカクカクになることが多くなり、GCを極力抑えるなど工夫はしましたが今後のことを考えenchant.jsからcocos2d-JSに乗り換えました。

以前も紹介しましたが、GCについてはこのへんが勉強になりました。

<a href="http://www.html5rocks.com/ja/tutorials/speed/static-mem-pools/">オブジェクトプールを使った静的メモリ JavaScript - HTML5 Rocks</a>www.html5rocks.com

あとcocos2d-JSとenchant.jsのパフォーマンス比較を載せときます。

Cocosjslite vs enchant by bokuweb

※ coscos2d-JSではWebGLが使用可能なブラウザで、cc.spriteBatchNodeを使用すればもっと差がでるかと思います。 cc.spriteBatchNodeを使用すると「一度の描画命令で子ノードが全部描画できる」らしいです。バッチ描画という仕組みらしいですが詳しいことはわからんです。

またこういったリッチな表現が簡単にできるのもメリットです。

Cocos2d-html5 Hello World test

coscos2d-JSにすることでパフォーマンスはかなり改善しましたが、再生音源の多い曲ではまだカクつきが見られますので要改善です。とはいえ、簡単な曲であれば比較的安定するようになったので一旦ここでα版としています。

ゲーム側のテスト

”スプライトやレイヤーを作ったらテストを書いて動かす”というのを繰り返しました。（テストをさぼってるとこも多いですが・・。）趣味グラミングだと本業が忙しくなったり、モチベーションが低下したりで放置した際、前回まで何をやっていたのかさっぱり分からなくなるので小さく作ってテストするよう意識しました。趣味グラミングに限らず当たり前かもですが・・。

テストにはmochaアサーションにはchaiを使用しています。どうするのがベストか分かりませんでしたが、テスト毎にテストシーンを作りテスト対象を配置し、挙動を確認しています。以下はnoteスプライトのテスト一例です。

ビルド後test/runner.htmlをブラウザで開くと以下のようにnoteスプライトがテストできます。

f:id:bokuweb:20150815234633g:plain

また、TravisCIからはphantomjs上でテストを実行するようにしており、(gulp-mocha-phantomjsを使用。)gulp test※でテストが走るようにしました。mocha-phantomjsではキャプチャすることができるので、今回の場合以下のようなキャプチャが取れます。

※ gulpfileについては後述

f:id:bokuweb:20150815235421p:plain

キャプチャの差分を自動で検知するようにできれば効率のよいテストができるかもしれません。

デザインについて

Design Templates - Fonts - Logo - Icons | Customizable | GraphicRiverで素材を買ってPixelmatorでごにょごにょしました。素人にはデザインはきついです。移植したいスキンがある方や、オリジナルスキンを作りたい方いませんかね。大歓迎です。

サーバー選定

最初はVPSにする予定でしたが、それらを０から勉強してる内にモチベーションが枯渇する気がしたので、今回はさくらのレンタルサーバスタンダードにしました。BMSファイルが一曲数十MBになるので転送量が一番ネックになると思いましたが、さくらのレンタルサーバスタンダードの場合転送量の目安が80GB/日なので、ひとまずは大丈夫かと思います。もし転送量が上限を超えそうな場合はCloudFront等検討しようと思っています。

サーバー側の実装

サーバー側はwordpressを使っています。SNS機能はbuddypressというプラグインで実現しています。 buddypressについては最近公開された以下の記事が参考になります。

最新版BuddyPress2.0.xの導入と使い方

「サーバー側もNode.jsで実装して・・・」とも思いましたが、今回のメインはそこではないので、極力手を抜いてゲーム側を触る時間をつくりました。

なのでサーバー側はほとんどコーディングしていません。デザインも「KLEO」という有料テーマを使用しています。（高かったですがそれに見合うクオリティだったと思います。）

参考までに自分で入れたプラグインは以下のような感じです。

Akismet
Gianism
Jetpack by WordPress.com
PHP Code Widget
WP-DBManager
WP Social Bookmarking Light
WP Super Cache

α版のリリース

プロトタイプを作ったのが去年の12月末だったので丸8か月が経過してしまいました。現状でもメニュー画面などガタガタですし、課題が山積みで生煮えですが、α版として公開いたします。なぜなら僕のモチベーションが0になりかかってるからです。

ゲーム側のソースはこちらで公開しています。ライセンスは最終的に画像データ(resディレクトリ以下)を除いて※AGPLなどにする予定ですが、現状はCC BY-NC-ND 4.0にしています。※画像データは購入した素材から作成したものであるため。

<a href="https://github.com/bokuweb/bmsjs/">bokuweb/bmsjs</a>github.com

余談

Gulpfileについて

gulpfileはこんな感じ。 gulp watchしておくとsrc/*.coffeeに変更があった場合、watchifyで差分ビルドし、ディレクトリのトップにmain.jsを生成します。（cocos2d-JSはmain.jsがエントリポイントのため）

あとgulp testでphantomjs上でテストが走るように設定しています。

Androidアプリについて

cocos2d-JSを使用する利点としてはAndroid/iOS向けビルド※ができることが挙げられるんですが、実際にビルドして自分のスマホ(XperiaZ)でプレイしてみるとカックンカックンで話になりませんでした。音源の再生がないとヌルヌル動くんですが、音源の再生を伴う場合、複数の音源のロードと解放を繰り返すことでGC発生しまくってるんじゃないかと思います。たぶん。iOSはシミュレータでは試しましたが実機では試していません。シミュレータではいい感じに動いていました。

※現在のバージョンはAndroid/iOS向けビルドできない状態です。

TODO

残作業は山のようにあるけど、必須で優先度高いのは以下。意見を取り入れながらプチプチつぶしていきたいです。その他「先にこれやってくれ」ってのがあったら、twitterや楽曲追加要望・仕様変更・提案フォーラムなどでご連絡お願いいたします。

ランキングの実装
専用コントローラ対応（GamePadAPIでなんとかなる？）
AutoPlayの切替(AutoPlay動作は実装完了しておりAutoPlayボタンの配置)
ロングノート対応
ランク判定
ハイスピード対応
パフォーマンス改善
スキンの移植・改善

思ったこと

デザインもうﾏﾁﾞ無理。
ロジックが大方実装できてデザインやらなんやらに差し掛かった時点でモチベーション八割減だけどそこはなんとか気合で乗り越える。
LR2(LunaticRave2)すごい。
cocos2d-JSいいよ！(v3.8?(3.7だっけ？)でcocos2d-xに統合)
あちこちで言及されていることだけど、個人でのサービス開発はモチベーションとの勝負。完璧を求めすぎず、ゆるーいくらいがいいと思う。
あれもこれもと風呂敷を広げすぎると挫折してリリースできなかったりリリース後に機能追加・修正する気力がなかったりするけどそれは本末転倒。

さいごに

改善点やご意見・ご要望など、何かあればtwitter(@bokuweb)やbmsjsのメールフォームやフォーラムでご指摘いただけると嬉しいです。引き続き（飽きなければ）いずれはLR２レベルのプレイヤーまで持っていきたいと思いますのでよろしくお願いいたします。最後に再度リンクを張っておきます。

<a href="http://bmsjs.net/">bmsjs</a>bmsjs.net

2015-08-04

2015年7月に見つけたWEBサービス等作ってみた記事まとめ

WEBサービス

2015年7月に見つけた分。

railsとangularjsとbootstrapでwebサービスを作ってみた

<a href="http://qiita.com/chiku_/items/bfbe5a4f17dd4ab85069">railsとangularjsとbootstrapでwebサービスを作ってみた - Qiita</a>qiita.com

つくったもの

<a href="https://apps-work.com/">アップスワーク[apps-work.com] | 無料クラウドソーシングサイト</a>apps-work.com

どんなもの？

railsとangularjsとbootstrapでアップスワーク (AppsWork)というクラウドソーシングサービスを作ってみました。下記記事のように現状のクライアントが圧倒的に強い、Win-Winになりにくい既存のクラウドソーシングの仕組みをなんとかできないかと考えたのが始まりです。 http://kosuke.cc/column/impression-of-lancers/

使用技術・環境

rails 4.2.0
angularjs 1.3.14
twitter-bootswatch-rails-3.3.4.0
mysql 5.5?

アニメの名言を簡単に引用できるChrome extension『Kotoha』作りました

<a href="http://konifar.hatenablog.com/entry/2015/07/24/014613">アニメの名言を簡単に引用できるChrome extension『Kotoha』作りました - Konifar's WIP</a>konifar.hatenablog.com

つくったもの

<a href="https://github.com/konifar/kotoha">konifar/kotoha</a>github.com

どんなもの？

イケてるアニメの名言を簡単に引用できるようになるExtensionです。名言をキーワードで探せます。

使用技術・環境

Heroku
Javascript
Rails

PCが入るバッグを検索するWEBサービスを作りました

<a href="http://yuzutas0.hatenablog.com/entry/2015/07/16/070000">PCが入るバッグを検索するWEBサービスを作りました - 下町柚子黄昏記</a>yuzutas0.hatenablog.com

つくったもの

HileSearch

どんなもの？

持ち運びたいノートPCを選ぶと、そのPCより大きいバッグを一覧表示します。名前は「PCが入る（ハイル）バッグを検索（サーチ）する」という語感決めです。

使用技術・環境

さくらVPS
CentOS
Apache
Passenger
MySQL
Ruby on Rails

X動画Sの視聴履歴を管理するChrome拡張機能『XHISTORYS』

<a href="http://kuroeveryday.blogspot.jp/2015/07/xhistorys.html">X動画Sの視聴履歴を管理するChrome拡張機能『XHISTORYS』 | Black Everyday Company</a>kuroeveryday.blogspot.jp

つくったもの

<a href="http://bcrikko.github.io/XHISTORYS/">XHISTORYS</a>bcrikko.github.io

どんなもの？

X動画Sの視聴履歴をライフログとして残し、お気に入り管理やオススメ動画を紹介してくれるChrome Extensions。とりあえず「視聴履歴を保存する」ところまではできたので、アルファ版としてリリースした。

使用技術・環境

TypeScript
Vue.js
BootStrap
Indexed Database API

2chまとめサイトを横断して検索できるWEBサービス『2chy』を公開してみました。

<a href="http://blog.bokuweb.me/entry/2chy">2chまとめサイトを横断して検索できるWEBサービス『2chy』を公開してみました。 - bokuweb.me</a>blog.bokuweb.me

つくったもの

<a href="http://2chy.bokuweb.me/">2chまとめをまとめて検索 - 2chy</a>2chy.bokuweb.me

どんなもの？

2chまとめサイトを横断して検索できるWEBサービスです。

使用技術・環境

OpenShift
MongoDB
Express
AngularJS
Node.js

2015-07-14

増田（はてな匿名ダイアリー）からブックマーク数とキーワードで検索できるWEBサービスを公開してみました

Android Node.js WEBサービス

以前途中まで作って停止していたWEBサービスを公開しましたので紹介します。

7/15 21:40

修正しました。

7/14 20:15

うわー。すみません。サーバ落ちてます。何ですぐ死んでしまうん？

作ったもの

WEB

masuda -増田検索-

Androidアプリ

masuda -増田検索- - Google Play の Android アプリ

なんぞこれ？

「はてな匿名ダイアリー」の記事からキーワード・はてブ絞り込み検索ができるアプリです。以前書いた以下の記事のものです。

<a href="http://blog.bokuweb.me/entry/mean_masuda">MEANで増田を使ったWEBサービス作りはじめたけどアウトでした - bokuweb.me</a>blog.bokuweb.me

本当はトラックバックはてブコメントをまとめてスレッドとして表示したかったのですが、転載NGにつきスレッドとしての表示はあきらめました。

MEANで増田を使ったWEBサービス作りはじめたけどアウトでした - bokuweb.me
検索のみサービスすればいいんじゃね？(検索結果でタイトルのみ表示→本文読む用のリンク設置的な)
2015/06/24 12:21

が、こんなコメントをいただき、一応公開してみました。
暫定公開ですので需要がなさそうだったり、問題があったら公開停止します。そもそも需要があるのかが全然読めてません。

使い方

特に説明は不要かと思いますが、検索ボックスでキーワード検索、スライドバーではてブ数の絞りこみができます。あとはスクロールしていくと自動でロードされます。

動機

増田が見づらいのでさくさく見れるサービスを作りたかった。
Node.jsでなんか作ってみたかった。

Node.jsでなんか作ってみたくて始めたのですが、結果的にTanaoroshiの方が先に完成しました。

作製再開にあたって

はてなにお伺いを立ててみました。回答は以下のような感じでした。

転載についてははてなはノータッチ、著作権法守ってね。
スクレイピングするんだろ？サーバー落とすなよBOY。

ひとまずタイトルと本文の抜粋という形にしています。

構成

構成は以下。Tanaoroshiと同様OpenShiftを使用しました。

OpenShift
Node.js
Express
MongoDB
AngularJS

技術的なところ

サーバーサイド

使用したモジュールは以下。

body-parser
cookie-parser
debug
express
jade
morgan
serve-favicon
express-session
xml2js
q
mongodb
lodash
cron
ect

この書籍を参考にしました。

シングルページWebアプリケーション ―Node.js、MongoDBを活用したJavaScript SPA

作者: Michael S. Mikowski,Josh C. Powell,佐藤直生,木下哲也
出版社/メーカー: オライリージャパン
発売日: 2014/05/24
メディア: 大型本
この商品を含むブログ (1件) を見る

MongoDBのドライバは書籍の通りmongodbを使用したんだけど、mongooseの方が便利そう。次はmongoose使ってみる。

フロント

angular
angular-resource
angular-sanitize
ngSmoothScroll
ngInfiniteScroll
jQuery

デザインとか

ロゴはやっぱりこれ。便利。これで作ったあちとpixelmatorで手直ししてる。

<a href="http://blog.bokuweb.me/entry/2015/05/27/215809">ノンデザイナーでも簡単にイイ感じのロゴを作る方法を紹介するよ - bokuweb.me</a>blog.bokuweb.me

テンプレートもTanaoroshiと一緒。

<a href="http://tympanus.net/codrops/2014/07/14/freebie-halcyon-days-one-page-website-template/">Freebie: "Halcyon Days" One Page Website Template</a>tympanus.net

ローディングアイコンはこれ。

<a href="http://tobiasahlin.com/spinkit/">SpinKit</a>tobiasahlin.com

Androidアプリについて

この記事と同様、Monacaを使用。WEBページに飛ばしているだけ。

<a href="http://blog.bokuweb.me/entry/tanaoroshi_app">webサービス『tanaoroshi』のAndroidアプリを公開した話しとか - bokuweb.me</a>blog.bokuweb.me

さいごに

冒頭にも述べましたが暫定公開です。予告なく停止します。ただ、「はてな匿名ダイアリー」の検索使いにくいなーって方は使ってみてフィードバックいただけると喜びます。

2015-07-12

webサービス『tanaoroshi』のAndroidアプリを公開した話しとか

Android WEBサービス

以前記事にしたwebサービス『tanaoroshi』のAndroidアプリを公開したり、いただいたフィードバック等を反映したりしました。

Tanaoroshi.

<a href="http://blog.bokuweb.me/entry/tanaoroshi">はてブとpocketから一括検索できるwebサービス『tanaoroshi』を作ってOpenshiftで公開しました - bokuweb.me</a>blog.bokuweb.me

Androidアプリ

こちらからダウンロードできます。

環境など

今回はCordovaを内包したHTML5ハイブリッドアプリ開発プラットフォームMonacaを使用しています。

<a href="https://ja.monaca.io/">Monaca - HTML5ハイブリッドアプリ開発プラットフォーム</a>ja.monaca.io

Monacaはプロジェクトのセットアップなども簡単で無料で利用できますが、無料の場合「プロジェクト数が最大３まで」や「ビルドは24時間で３回まで」などの制約がつきます。ちなみに無料のBasicプランの上は9800円/年のPersonalプランです。

Monacaはデバッガなど結構いい感じですが、「ビルドは24時間で３回まで」など結構煩わしかったりします。

なので、これらの制約が煩わしい方は「Adobe PhoneGap Build」をオススメします。

Adobe PhoneGap Build

こちらはオープンソースアプリケーションであればプロジェクト数は無制限です（無料の場合プライベートアプリは1つまで）。プロジェクト管理にはGitHubを使用します。Monacaのほうが若干機能は上ですが、基本的にやれることは一緒です。

アプリの中身など

Cordovaは基本的に内蔵のWebviewでHTMLやCSSを表示したり、Javascriptを動かしています（いわゆるハイブリッドアプリ）。なのでAngularJSも使えますし、「Tanaoroshi」のフロント側をもってくるだけでほぼほぼ動作するはずですが、今回はそれすら面倒臭かったので、アプリ起動と同時にhttp://tanaoroshi.bokuweb.me/に飛ばしています。なのでアプリというか、実態はただのショートカットです。具体的には中身はこれだけです。

inAppBrowserという内蔵ブラウザプラグインを使えばブラウザ内にCSSやjavascriptを挿入するなどいろいろできるようですが、今回は採用しませんでした。

前回からの変更点など

Pocketの記事かはてブの記事かを判別できるようにしました。

リボンを付けて記事の判別をできるようにしました。この記事が参考になりました。

<a href="http://coliss.com/articles/build-websites/operation/css/css-tutorial-ribbon-tags-by-inserthtml.html">[CSS]画像やパネルに斜めにしたリボンを重ねるスタイルシート</a>coliss.com

ログイン後、ボタンを消したりアイコンを小さくしたり

無駄なスペースの削減。

検索キーワードをwebstorageで保持

検索キーワードをwebstorageで保持するようにしました。

formタグの削除

検索ボックスのinputを無駄にformタグ内に設置していましたがこの場合キーワード入力後エンターキーを押すとsubmitmされ、ページがリロードされるという残念な動作になっていたため修正しました。

既知の問題

複数クライアントからのはてなログイン

おそらくですが、複数クライアントからはてなにログインすると401エラーを返すっぽいです。これっぽい。ステータス「OPEN」ですし、治ってないっぽいです。

<a href="https://github.com/hatena/Hatena-Bookmark-iOS-SDK/issues/40">複数クライアントで発生する認証の問題 · Issue #40 · hatena/Hatena-Bookmark-iOS-SDK</a>github.com

これについてはどうしようかなーって感じです。お手数ですが、複数クライアントからログインしてしまった方は一度ログアウトし、再ログインしてください。

さいごに

Pocketとはてブを使用する方は是非使ってみてください。よろしくお願いいたします。

2015-07-04

はてブとpocketから一括検索できるwebサービス『tanaoroshi』を作ってOpenshiftで公開しました

WEBサービス Node.js

最近Node.js + AngularJSでこそこそ作ってたWEBサービスを公開しましたので紹介します。

お詫び(7/4 7:25追記)

ちょくちょくクラッシュしているようです。申し訳ありません。セッションをメモリで管理しているため、クラッシュした場合再ログインしていただく必要があります。ごめんなさい。

あとconnect.session() MemoryStoreはメモリリークがあるっぽいです。production環境での使用は非推奨っぽいですね。connect-mongo等を使用する必要がありそうです。順次対応いたしますのでよろしくお願いいたします。

作ったもの

http://tanaoroshi.bokuweb.me/

Tanaoroshi.

なんぞこれ？

「はてなブックマーク」と「pocket(旧read it later)」のデータから一括検索・閲覧するためのシンプルなWEBサービスです。

名前

「棚卸し」です。自分は保存した記事を見返すことが少ないので、記事をもう一度確認する機会ができればよいなと思い、この名前にしました。

使い方

「 Login with Hatena」「 Login with Pocket」のボタンよりログインしてください。両方でのログインは必須ではありません。片方でのみログインした場合、ログインしたサービスのデータのみ検索・閲覧できます。

ログイン後最新のデータが表示されます。検索して目的の記事を探してもいいですし、スクロールすることで記事がどんどん読み込まれますのでぼーっと眺めるのもいいかと思います。

動機

自分は後で読み返す可能性のある記事を「はてなブックマーク」「pocket」で保存していますが、保存ルールに一貫性がなく気まぐれで保存しているため、いざ読み返そうと思ったときにどちらに保存されているか分からず探しだすのに苦労することがちょくちょくあります。

なので両方のサービスから一括で検索し、さくさく読めるサービスを作りたいと思いました。

構成

構成は以下。PaaSはHerokuの料金体系が変わってしまったためOpenShiftを使用しました。MEANからMongoDBをぬいたNode.js + Express + AngularJSで構成しています。すべてCoffeeScriptで書きました。

OpenShift
Node.js
Express
AngularJS

技術的なところ

概要

OpenshiftでNode.jsアプリケーションとして動かしています。はてなとpocketの認証、データの取得にはnode-passportを使用しています。サーバー側では取得したデータを整形してjsonを吐きます。フロントではngResourceでjsonを受け取ってng-repeatで描画しています。

Openshift?

<a href="https://www.openshift.com/">OpenShift by Red Hat</a>www.openshift.com

Herokuの影に隠れている感がありますが、いいサービスです。無料、広告なし、独自ドメイン対応、Git でデプロイできます。
こちらはサーバ機能を「ギア」という単位で提供しており、３ギアまで無料で使用することができます。自分の解釈が間違っていなかればですが、一番低スペックの環境であれば３アプリまで無料で運用できます。それ以上になると以下の料金表にしたがって料金を支払う必要があるようです。

f:id:bokuweb:20150704202900p:plain

セットアップはNode.jsの例ではありませんが以下が参考になりました。ちなみにOpenshiftならばwordpressの無料運用が可能なようです。

PaaS で動かす WordPress ＋ OpenShift 入門 | CYOKODOG

Node.jsアプリケーションも簡単に動作させることができますが、少し注意が必要です。ブログに書いときました。

<a href="http://blog.bokuweb.me/entry/2015/07/04/000151">expressアプリをopenshiftで公開する際に注意すること - bokuweb.me</a>blog.bokuweb.me

あと注意するのは以下くらいでしょうか。

nodeモジュールはpackage.jsonに書いておけば勝手に入れてくれます。(Herokuも一緒？)
アプリがクラッシュした場合は自動的に再起動がかかるっぽい？foreverが不要？

サーバーサイド

使用したモジュールは以下。

body-parser
cookie-parser
debug
express
morgan
serve-favicon
passport
passport-hatena
express-session
config
q
ect
lodash

基本的にはpassport以外はおまけなような気がしますが・・。テンプレートエンジンは最近はectを使用。あと、Qとlodash無しには何もできなくなりつつあります。

あと、はまったところといえば、passportの公式の情報が古かったり(expressからsession周りが分離されたようでexpress-sessionを入れる必要があったり、とか)、passport-pocketの使い勝手が悪く、ちょくちょく手をいれたとこ等でしょうか。

この書籍が参考になりました。

シングルページWebアプリケーション ―Node.js、MongoDBを活用したJavaScript SPA

作者: Michael S. Mikowski,Josh C. Powell,佐藤直生,木下哲也
出版社/メーカー: オライリージャパン
発売日: 2014/05/24
メディア: 大型本
この商品を含むブログ (1件) を見る

フロント

AngularJS 1.4.1使ってます。使用モジュールは以下。

jQuery
angular-resource
angular-sanitize
ngInfiniteScroll
angular-animate
ngSmoothScroll

ngInfiniteScrollでスクロールにより記事読み込みを実装しています。おかげ様で自分で書いたコードは50行程度でした。「AngularJS好きー」ってわけではないですが、自分のような素人がさくっと作るのにはいいと思います。

理解できてないけど、この辺で勉強しました。

<a href="http://qiita.com/armorik83/items/5542daed0c408cb9f605">JavaScript - AngularJSモダンプラクティス - Qiita</a>qiita.com

デザインとか

ロゴは相変わらずこれで作っています。便利。

<a href="http://blog.bokuweb.me/entry/2015/05/27/215809">ノンデザイナーでも簡単にイイ感じのロゴを作る方法を紹介するよ - bokuweb.me</a>blog.bokuweb.me

テンプレートはこれをベースに使用。かっこいい。適当にカスタマイズ。

<a href="http://tympanus.net/codrops/2014/07/14/freebie-halcyon-days-one-page-website-template/">Freebie: "Halcyon Days" One Page Website Template</a>tympanus.net

ローディングアイコンはこれ。

<a href="http://tobiasahlin.com/spinkit/">SpinKit</a>tobiasahlin.com

なおサムネイルの取得はwordpressの非公式API(非公式だが使用は問題ない模様)を使っている。表示スペースを圧迫するため、サムネイルの表示は迷ったけど、あったほうがサイトの記事の概要を掴みやすいかな？と思い導入。

今はcssでmasonaryレイアウトを実現可能ならしい。びっくり。

.masonary-row {
    -moz-column-count:3;
    -moz-column-gap: 2%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 2%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 2%;
    column-width: 30%;
    border-bottom:solid 1px #e5e5e5;
    margin : 0 0 60px;
}

.masonary-row > div {
    display: inline-block;
    width: 100%;
    float:none;
    word-wrap: break-word;    
}