Vim on Browser (short)emscripten night LT
phiary
先日書いた 『Electron の入門エントリー』 が好評だったので私の大好きな Riot.js の入門も書いてみました. AngularJS や React でもいくつか Web アプリケーション作ってきましたが, 私にとっては Riot.js が一番しっくりきました. なので今回は Riot.js について紹介します. とにかく詳しい説明はいいから触って試してみたいって方はぜひ読んでみてください. Runstant を使ったデモを並べているので, このページ上で実行したりコードをいじることができます. 実際に動かしながら, Riot.js がどれだけ使いやすいか体感してみてください♪ Riot.js とは？ 今のところ私にとって(使いやすさ, 手軽さ, 規模感総合して)最も優れた JavaScript フレームワークです. 主な特徴 個人的に Riot.js でいくつかサービス作ってき
LINE Bot を作るための Node.js ライブラリを作った - Qiita
ちなみに，ぼくはメンテナンスしなさそうなので，名前空けときました． 誰かちゃんとメンテナンスする人，もっといいライブラリ作ってください． コード 古い内容です．新しい使い方は https://3846masa.github.io/node-linebot/ を見てください． テキストのみをechoするbotの例です． const LineBot = require('@3846masa/linebot'); const bot = new LineBot({ channelID: 'xxxxxxx', channelSecret: 'xxxxxx', MID: 'xxxxxx' }); bot.on('message', (res) => { const content = res.content; if ( content.contentType === LineBot.CONST.CO
15分で分かったつもりになるAngular 2 概要/angular2
Angular 2 の特徴を美味しいところだけ凝縮してお届けします
物理サーバを選定する際のポイント – Eureka Engineering – Medium
Eureka EngineeringLearn about Eureka’s engineering efforts, product developments and more.
Node.jsのセキュリティ・チェックリスト | POSTD
(訳注：2016/1/5、いただいた翻訳フィードバックを元に記事を修正いたしました。) セキュリティ – 誰もが見て見ぬふりをする問題 。セキュリティが重要だということは、誰もが認識していると思いますが、真剣にとらえている人は少数だと思います。我々、RisingStackは、皆さんに正しいセキュリティチェックを行っていただきたいと考え、チェックリストを用意しました。皆さんのアプリケーションが何千人というユーザやお客様に使用される前にセキュリティチェックを行ってください。 ここに挙げたリストのほとんどは概略的なもので、Node.jsに限らず、全ての言語やフレームワークに適用することができます。ただし、いくつのツールは、Node.js固有のものとなりますので、ご了承ください。 Node.jsセキュリティ に関するブログ記事も投稿してありますので、こちらも是非読んでみてください。 構成管理 HT
【Swift】UIWebViewの中のJS関数を呼び出す方法 - あぷせめも
2015-06-12 【Swift】UIWebViewの中のJS関数を呼び出す方法 案外簡単でした。 UIWebView#stringByEvaluatingJavaScriptFromString 安定のメソッド名の長さこのメソッドにJSを書きます。 関数を呼び出す一文を文字列で渡します。 webview.stringByEvaluatingJavaScriptFromString("hogeFunction();") fuga.html(今回はローカルに配置) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
良く使うnpmパッケージの紹介 - Qiita
自分が良く使う npm パッケージを、雑に紹介し感想を述べる記事です 非 Noder さん用にもなるように、超有名ライブラリも載せました 個人的感想の羅列で、また 1年以上使ってない/調べてないものも含みます。申し訳ないのですが、参考程度でよろしくです Web アプリケーション作成 express 一番有名でたぶん利用者も多い、Node.js の Webアプリケーションフレームワーク function (req, res, next) { return next(); } のような middleware という概念のフィルターを重ねて処理し、どこかで res.send(content) 返したら終了という感じ シンプル、覚えることが少なく直ぐ動かせる。JSON保存する位ならほんとに直ぐ しかし、機能らしい機能が URL の Routing くらいしかない。特にバリデーション周りで決まったノ
[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height
1-3、4-6でエリアを指定、1-3と4-6が同じ高さに Right Heightの使い方 Step 1: スクリプトの準備 当スクリプトを外部ファイルとして記述し、初期化しておきます。 スクリプトは、これで完了。 <body> ... コンテンツ ... <script src="js/right-height.js"></script> <script> rightHeight.init(); </script> </body> Step 2: HTML HTMLのポイントは、2つ。 data-right-height 適用するエリアを指定 data-right-height-content 適用する要素を指定 <div class="row" data-right-height> <div class="grid-third" data-right-height-content> 1
![[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height](https://cdn-ak-scissors.b.st-hatena.com/image/square/6d7b12bef628f068421e02247872e8a530b7b5ee/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015091000.png)
React.jsチュートリアル【日本語翻訳】
フロントエンドの世界では今React.jsが注目されてきていて、自分もチュートリアルをやる機会があって、その際に日本語訳（和訳）を簡単に作っていました。まだこのチュートリアルに関して翻訳されたものがなさそうだったので、ちょっと手直ししてブログにアップすることにしました。誤訳などもあるかと思いますが、Google翻訳よりはマシだと思ってお使いいただければと思います。 当記事のチュートリアルは「React v0.13」当時の古い内容のものとなっています。最新の「React」の公式チュートリアルの翻訳記事は以下となります。 Reactチュートリアル: Intro To React【日本語翻訳】 – maesblog React.js React.jsReactはFacebookが開発しているJavaScriptのフレームワークです。MVCで言う所のViewの部分に特化したフレームワークとなってい
canvasでクロマキー合成っぽいことしてみる - Qiita
CMや映画でよく使われるクロマキー合成をcanvasで再現してみようと思った。 特殊な設備がなくてもいいように消す色を指定できるといいかもね。 やること 映像を取り込む canvasに描画する 描画されたcontextの指定された色の部分を透過にする 背景に画像を入れる ざっくりこんな感じ。 ファイルが別れると載せにくいのでstyleの設定はjsでやる。 とりあえずhtmlファイルに要素を置いておく 必要なのはvideoとcanvas。 あとはどの色を透過にするか指定できるようにinputも置いた。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Language" content="ja"> <meta name="viewport" content="wid
もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js
デモ：Googleマップ Googleマップもサポート。 Embed.jsの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.css"/> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.embed.js"></script> </head> Twitterを埋め込む時には「widgets.js」、コードのシンタックスハイライトには「highlight.min.js」を使用します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.
![[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7f1b78c4054290453044ec517a54e1f30348b63/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015041500.png)
Reactがなぜ素晴らしいのか
詳しくはこちらへ → https://www.facebook.com/groups/toretatech/
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
