ボクココ

サービス開発を成功させるまでの歩み

JavaScript

ContentEditable のハマりどころと対処法

ども、@kimihom です。 前回の記事で、ContentEditable についての概要をざっと書いた。ContentEditable の持つ魔力については以下の記事を参照いただきたい。 www.bokukoko.info さて、本記事では実際に ContentEditable を使って実装しようと思った際に気…

拡張テキストエリアを ContentEditable で実現しよう

ども、@kimihom です。 今回は ContentEditable という知る人ぞ知る HTML5 で導入された HTML 属性についてご紹介する。 まず始めに、 大いなる力には大いなる責任が伴うということを伝えておこう。ContentEditable を本気でやろうとすると確実にどハマりし…

Node.js Express で非同期処理を next で対応する方法

ども、@kimihom です。 今回は Node.js の Express を使った場合の非同期処理のスマートな対応方法をご紹介する。 Node.js の非同期処理の重要性 簡単な比較をすると、Ruby では非同期処理をほとんどしない代わりに、それぞれのリクエストの一連の処理がが終…

Heroku の Papertrail でログからコードを実行する方法

ども、@kimihom です。 今回は Heroku アドオンの Papertrail の活用方法についてご紹介。 このアドオンが単なるブラウザ上で綺麗にログを見れるだけのアドオンかと思っていたら、それは Papertrail の 3分の1の魅力しか知っていないことになる。Papertrail …

WebRTC の Media, Stream, Track について

ども、@kimihom です。 最近の週末は Twilio Video を使ってビデオ通話アプリケーションを作成している。Twilio Video は今どんどん進化していて、単なる2,3 人でのビデオ通話をするにとどまらず、面白いことができるようになっている。特にスクリーンシェア…

Rails assets 内の JavaScript のメソッドを View 内から呼び出す方法

ども、@kimihom です。 Rails で開発していると、assets/javascripts 内で定義したメソッドを View 内に書かれた <script>タグから呼び出したい時がある。Rails は基本的に assets/javascript 内のコードを全てひとまとめにして一つのapplication.jsってのを作るから…

独学での Web プログラミング学習まとめ

ども、@kimihom です。 自分で何かサービスを出したいという方は多いかと思う。今回はそんな方へ最低限知らなければならないリストを上げようと思う。ターゲットとしては Web アプリケーションということにしたい。 UNIX コマンド 最初は黒い画面に慣れる必…

Cookie とログインと remember_me のカラクリ

ども、@kimihom です。 Cookie のすごい基本的なところなんだけど、どハマりしたのでメモ。何時間もかけて原因を探って解決した先に、成長ってのはあるものだな。いい経験をした。 デスクトップアプリで発覚した問題 んでどういう話なのかっていうと、運営し…

クラウドを活用した WebRTC コールセンターの最前線

ども、@kimihom です。 掲題のタイトルで Open Cloud Innovation Festa 2016 で発表してきた。資料は以下。補足的な資料も含めたらめちゃ多くなってしまったw speakerdeck.com 発表の裏話的な 今回は参加者がエンジニアだけじゃなくて一般の方も来るってこと…

Rails の render で部分的に動的な HTML を生成する

ども、@kimihom です。 Rails で CSS フレームワークとかを使っていると、例えばモーダルウィンドウを出すためにヘッダやフッタで共通の HTML を使うことになるだろう。これらは大抵の場合、共通の UI となる。それでも当然、モーダル内の body の部分はそれ…

Service Worker でスマホ Web 通知を実現する

ども、@kimihom です。 Service Worker といえば、最近出てきたバックグラウドでごにょごにょできて通知できるアレでしょ?程度にしか思ってなかったが、思いもよらず使う場面が出てきたのでメモ。本記事はおそらく Service Worker の中でも最もシンプルなサ…

JavaScript SPA 周りの議論で出た私なりの答え

ども、@kimihom です。 ここ最近、ずっと React.js か jQuery かみたいな話題が定期的に持ち上がってきている。事実、私も最近の JS ライブラリの人気に疑問を呈した人物の一人である。この記事を書いたのも1年前か。 なんだかんだで SPA から jQuery に戻っ…

AWS Lambda の Node.js で連続で外部APIを叩く作法

ども、@kimihom です。 今回は AWS Lambda における Node.js のコードの書き方について。 実装したいこと 例えば、id を複数持った配列があるとして、その配列を 一個一個 HTTP リクエストで叩きたい、ということがあるだろう。id単位でしかリソースを削除で…

JavaScript で画像をリサイズする方法

ども、@kimihom です。 前回の記事で画像のリサイズはサーバーサイドでって話だったんだけど、調べてみると Canvas でリサイズまでできてしまうという衝撃の事実が判明し、それで簡単にリサイズを実装できてしまった。 またもや HTML5 の技術に驚かされるこ…

画像の縦横比を合わせてアップロードするまで

ども、@kimihom です。 前回の記事で、画像ファイルのドラッグ&ドロップの手法を紹介した。これで File オブジェクトを取得することができる。 www.bokukoko.info さて、今回はその持ってきた画像の縦横比を合わせてS3にアップロードしてみよう。 画像の縦横…

HTML5 時代のファイルアップロード方法

ども、@kimihom です。 今までファイルのアップロードといえば、 input type="file" な要素を作って、 multipart なフォームで送信、というやり方が一般的だった。が、最近はAWSやHTML5の登場により、よりクールで使いやすいファイルアップロードを実現でき…

今更ながら jQuery の trigger の魅力について語らせてもらう

ども、@kimihom です。 今更ながら jQuery で搭載されている機能の紹介。その名も、trigger。 これはあまりメジャーではないけど、クールな Web アプリケーションを作りたい場合にかなりよく使う便利なメソッドだ。 trigger って何? trigger は主に2つの使…

はてなブログで記事下に関連記事を出すカンタンな方法

ども、@kimihom です。 今回ははてなブログのカスタマイズについて。色々なブログで、記事の下に「関連記事」だとか「合わせて読みたい」だとか、そういう記事リンク集がある。これは、記事を読んだ後に同じブログ内を回遊してほしいからやっているわけだ。…

Node.js(JavaScript) でのクラスの定義について考え直してみた

ども、@kimihomです。 毎度 JavaScript でオブジェクト指向プログラミングをやろうとすると、どうやって書けばいいか悶々としていたが、最近ようやく定まってきたのでまとめてみる。調べるとnewを使ったり、prototypeを使ってメソッドを定義したりする方法も…

JavaScript で状態管理から部分更新にしたらハッピーになれた

ども、@kimihomです。 今回はプログラミングにおける考え方について。 JavaScript による状態管理について JavaScriptを用いたリッチな Web アプリケーションを作ろうとすると、状態管理が結構難しくなってくる。「Aという部分が更新されると、BとCが変わる…

Twilio x AWS Lambda と API Gateway の連携

ども、@kimihom です。 このブログでは初登場の Twilio の話。 どんなことができるかは Twilio のリンク先に任せるとして、今回は実際に Twilio を利用している方のための TIPS を紹介しようと思う。 電話の可用性を高める プログラムと連携した TwiML を書…

リストのドラッグアンドドロップの決定版 - html5sortable -

ども。@kimihom です。 JavaScriptによるドラッグアンドドロップは、何か難しそうでとっつきにくい雰囲気があるかもしれない。そんな不安を一気に跳ね除けてしまうライブラリを紹介しよう。 voidberg/html5sortable · GitHub html5sortable を使えば、table…

私のRails と jQuery のフロントエンド開発指針

Railsでの基本的な開発スタイルといえば、ページはリンクとフォーム送信、そしてリダイレクトの基本構成だろう。確かにこれでWebアプリケーションを作ることができる。 ただ今回はよりリッチなWebアプリケーション、具体的にはAjaxを駆使した開発について、R…

自動電話応答サービスを作ってリリースした話

自動電話応答(IVR) を誰でも簡単に作れるサービスを目指してコールコネクトをリリースした。 CallConnect(コールコネクト)www.callconnect.jp 自動電話応答(IVR)とは 自動電話応答(IVR)とは、例えばどこかの企業に電話をかけた時、「お電話ありがとうござい…

なんだかんだで SPA から jQuery に戻った話

最近は SPA とか React といった話題が尽きないが、自分は結局 フロントエンド JavaScript は jQuery が最もいいと感じている。それはそれら SPA の JavaScript をいじった経験を踏まえての感想。 理由としては、「 やりたいことができにくい 」これに尽きる…

Canvas を容易に扱えるプラグイン jCanvas

以下のようなハッカソンに参加した。 Salesforceハックチャレンジ2014 | Salesforce World Tour Tokyo ここで、自動コールセンターを作成するコールクラウドを提出した。コールクラウドで分岐を手軽に作成できるようなユーザーインタフェースにこだわった。…

Express + ejsで i18n

Node.js ネタ。 Heroku でシンプルなんだけどちょっと動的なサーバサイドを持つwebサイトを作りたいといったときに Node.js は便利。 こういう時 PHP とか Ruby なら Sinatra とか選択肢があると思うけど、Node.js のアクセスを捌く力を知ってからはできるだ…

組み合わせを再帰で作るときの考え方

CodeIQで組み合わせを作らなきゃいけない問題があって、その問題がJavaScriptで解かなきゃいけないから、それを考えていた。 前に、ハノイの塔のプログラムを作ったおかげで、再帰についての考え方はなんとなくわかった。要は「数学的帰納法」。これの考え方…