やったー JS で LGTM ジェネレターできたよー！ #HTML5 #File_API - 鈴木うどんの横須賀おもしろ生活
http://ochinchin.org/~udonchan/lgtm_gen/ コードはこのへんにある。 いわゆる HTML5 っぽいプログラムで、File API 使ってローカルの画像ファイルを canvas 読み込んで編集するという練習課題的プログラム。 canvas をどうやってファイルに落とすかのやり方はいろいろ思案したのだけれども、 今のところ以下のような書き方をしている。 var type = 'image/png'; var url = $canvas[0].toDataURL(type); var link = document.createElement('a'); link.href = url; link.download = 'output.png'; var click = document.createEvent("Event"); click.initEve
軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog
Vue.jsは軽量なMVVMライブラリ。 vue.js http://vuejs.org/ 使ってみた感じ、かなり手触りがよいので、紹介する。 概要 handlebars風のテンプレートを書いて、DOMを展開する。普通のテンプレートエンジンと違い、$dataアクセッサを通じて値を書き換えることで、テンプレート展開後も値が同期する(!!!)。 一言で言うと軽量Angular。コード読んだ感じ、内部的にもAngularから大量にコードを持ってきた痕跡がある。$watchとdirective定義がキモなのは同じ。 とはいっても、軽量なのは使う側のAPI側だけで、内部実装はそれなりに重い。APIを軽量にすることで、Angularのデメリットである学習コスト部分を限りなく削ることを目標にしているんじゃないだろうか。 大雑把な使い方 テンプレートを書く。対応するデータ構造を書く。{foo: 'bar'
要するに DI って何なのという話 - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く
友人から「しんぺいさん DI について書いてほしい」みたいな話をだいぶ前からされてたんだけど書く気力ずっとなかった。でも仕事の気分転換にちょっとずつ書いたやつがいい量まとまったので公開するです。たいしたことは書いてないっていうか知ってるひとにはあたりまえのことしか書いてない。サンプルコードはわたしの趣味で Scala で書いてあるが、Java が読めればなんとなく読めると思います。 DI ってなに Dependency Injection、日本語で言えば依存性の注入です。おしまい。 で記事を終えてもいいんだけど、そもそも依存性とはなんなのか、それを注入するとはどういうことなのか、なぜ DI が必要となるのかみたいな話をこれからします。 そもそも依存性ってなあに 例を出します。入力された文字列をもとにおみくじをひいて、その結果を twitter に投稿するプログラムにしましょう。 まずは普通
配列のランダマイズ、出来ますか？（前編）
先日、When Random Isn't Random Enough: Lessons from an Online Poker Exploit（英文注意）という記事がタイムラインに流れてきて、同僚と少し配列ランダマイズの話になったので備忘録として書いておきます。 配列のランダマイズというのは、たとえば上の記事にあるようなトランプのシャッフルであるとか、音楽プレイヤーの再生リストのランダム再生とかで実装しますね。ゲームを作るときなどには実装することが多いでしょうが、記事を読む前に、自分だったらどのように実装するか是非少し考えてみてください。 自分が中学生の頃に書いた記憶のあるコードは、たしか次のようなものでした。 // 配列の初期化 var a = []; for(var i = 0; i < 1000; i++) { a[i] = i; } function swap(s, d) { v
配列のランダマイズ、出来ますか？（後編）
前回のエントリ、配列のランダマイズ、出来ますか？（前編）の続きです。 前回のエントリの最後では、次のようなコードを提示し、どこが問題なのかの疑問を提起しました。 // 配列の初期化 var a = []; for(var i = 0; i < 1000; i++) { a[i] = i; } function swap(s, d) { var t = a[s]; a[s] = a[d]; a[d] = t; } // ランダマイズ、その2 for(var i = 0; i < a.length; i++) { swap(i, (Math.random() * a.length) | 0); } ランダマイズのコードの厄介なところは、1回2回実行したところで問題がわからない点で、このプログラムもぱっと見た感じではきちんとランダマイズされているように見えます。ではどうやって問題があるかを判断す
AZSocketIOを使ってiOSアプリからnode.js+Socket.IOと双方向通信する | DevelopersIO
前回iOSアプリからnode.js+Socket.IOと双方向通信する ｜ Developers.IOではsocket.IO-objcを紹介しました。このライブラリは非常に優秀なのですが、接続に失敗した場合に別のトランスポートへの再接続処理を自動でやってくれませんでした（知ってたら教えてください！）。 で、今回紹介するAZSocketIOはその再接続処理も行ってくれるなんとも便利なライブラリです。AZSocketIOは使い方も非常に簡単です。というわけで早速使ってみませう。 サーバ側の実装 さて、サーバ側は前回に引き続き弊社うえじゅん氏が公開しているNode + Socket.IO で簡単なチャットアプリの作成 ｜ Developers.IOで作ったチャットアプリを使用しますので、先にチャットアプリを作っちゃっちゃってください。 プロジェクトの準備 チャットアプリの準備が終わったら、早速i
簡単実装でパララックスコンテンツを作成できるスクリプト -Parallax ImageScroll | コリス
ページをスクロールすると、パララックスのエフェクトで次々に画像とコンテンツをカーテンを引き上げるように表示するjQuerのプラグインを紹介します。 もちろんレスポンシブにも対応、またタッチデバイスではパララックスのエフェクトが重く感じることもあるのでオン・オフの設定もできます。 Parallax ImageScrollの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../jquery.imageScroll.js"></script> </body> Step2: HTML
jQuery不要でスクロールにあわせて要素をアニメーションで表示するスクリプト -WOW.js | コリス
ページ下部にもたくさんのアニメーションが！ アニメーションはAnimate.cssを使用しているので、さまざまなものが利用できます。 どのようなアニメーションががあるのか、実装方法など、当ブログで以前紹介した記事をご覧ください。 classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css WOW.jsはデモ以外にも、他のサイトで実際に使用されているさまざまな例があります。 どのサイトもアニメーションが楽しく、とても印象的です。 Stream Line Icons WOW.jsのつかいかた Step 1: 外部ファイル 当スクリプトを</body>の上、Animate.cssをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/libs/animate.css"> </
CentOS6.4+PHP5.5+Apache環境を一撃で構築するVagrantfileを公開します · DQNEO日記
https://github.com/DQNEO/vagrant-php55-apache やっていることは、下記記事の手順をVagrantfile化しただけです。 (PHP5.5はremiレポジトリからインストール) 3分でCentOS6にPHP5.5とApacheをインストールする方法 上記Vagrantfileを使う利点は、 コンパイルが一切走らないのでインストールがすぐ終わる Chefを使ってないので仕組みが単純。(カスタマイズも簡単。setup.shをいじるだけです。) PHPを自前ビルドしたい/php-fpmを使いたい人は phpenv + php-build + nginx + php-fpmで動かしたい人は下記のVagrantfileを使うとよいでしょう。 phpenv + php-build 環境を Vagrant で構築する - Shin x blog
<?phpタグが無くなる日 〜PHPの開発プロセス〜
PHPスクリプトを記述する際に使われる<?phpタグの利用をオプションで有効無効を切り替えるようにするという仕様がPHPの開発コミュニティでの議論に挙がっています。 この仕様変更が実装された場合、PHPスクリプトには必ず<?phpのタグがあるという前提条件が変わる事になります。 まずこの議論がどのような形で行われているのでしょうか？ご存知でない方もいるかと思いますが、PHPの文法や機能へどのような変更を加えたいか、という議論はRFC (Request For Comment)という形でパブリックに行われています。Wikiページに仕様や背景、実際のパッチなどを添付し、開発者やユーザーからの投票を行った結果を元に実際にPHP本体への変更を行うかどうかが決定されています。 過去に実装された機能の際の例などと一緒に見てみましょう。 Array Short Syntax # 従来の記述の場合 $a
AngularJSのForm Validationでカスタムバリデーションのやり方あれこれ(個人的にはui-validateが好き) - Qiita
AngularJSのForm Validationでカスタムバリデーションのやり方あれこれ(個人的にはui-validateが好き)JavaScriptAngular 最近はNexus7を使ってデュアルディスプレイ化している大橋です。 AngularJSでrequiredやng-maxlengthを使った定義済みのForm Validationはよく見るのですが、 そんなものだけじゃはっきり言って足りないと思う今日このごろ。 そこでカスタムバリデーションを組み始めたのですが 普通にやると色々面倒だったり、とりあえずui-validate使ってればいいんじゃないという感じがしたので まとめたいと思います。 結論的な 色んな所で使うカスタムバリデーションならDirectiveを作る 一箇所でしか使わないならui-validateを使うって感じがよいかなーと あと細かくイベント制御できるのはDi
ゲームサーバ開発現場の考え方
【Unite Tokyo 2019】Unityだったら簡単！マルチプレイ用ゲームサーバ開発 ～実践編～ 2019/9/25-6に開催されたUnite Tokyo 2019の講演スライドです。 小端 みより（株式会社ミクシィ） こんな人におすすめ ・Unityでより本格的なマルチプレイのゲームを作りたい方 ・そもそも通信や同期処理ってどうやって実装するの？という方 受講者が得られる知見 ・Unityで専用サーバを開発するメリットやその方法 ・Unityでサーバとクライアントを同時に開発するテクニック ・通信に関する知識、専用サーバを運用する方法 Unityのイベント資料はこちらから： https://www.slideshare.net/UnityTechnologiesJapan/clipboards
『nodeベースでGUIアプリを開発する「node-webkit」』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。Ameba事業本部の杉本と申します。 業務では「天下統一クロニクル」というチームでフロントエンドのディベロッパをしています。 今回は、「node-webkit」という一風変わったアプリケーションを紹介させていただきます。 私達は普段、gruntといったnode.js製のツールを使ってJavaScriptの結合や圧縮、画像の減色といった処理を自動化していますが、node-webkitはこれらnodeのモジュールを使ってGUIアプリケーションを作れるツールです。nodeの資産をそのまま利用できるので、私のようなディベロッパには嬉しいですね。
ログ集計システムを自前で作る - Y's note
Index ログ集計システムの要件 DB設計 データ保存方針 table設計 サーバ構成 Fluentd fluentd,fluent-plugin-mysql-bulk install td-agent.conf mysqlにデータが格納される事を確認する 集計用のバッチ その他 Table肥大化防止 可視化 ログ集計システムの要件 爆弾ログ処理班の@yutakikuchi_です。 ログ集計システムというものを作る時に皆さんはどのように対応していますか？ 以下の候補から要件のレベルで使い分けをしている人が多いと予想しています。ざっくりの評価ですが、導入難易度、正確性、可視化、リアルタイム、長期集計、スケール、運用費用という点で評価を書いています。 ツール 導入難易度 正確性 可視化 リアルタイム 長期集計 スケール 運用費用 リンク GA(スタンダード) ○ × ○ ○ ○ ○ ○ Go
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]モーダルウインドウの実装を検討する時はこのスクリプトもチェック！ -vex
プラグインやチュートリアル 25
デブハゲ
Node.js勉強会 Framework Koa
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function