[B! js] syo-sa19820615のブックマーク

Nuxt.js + phina.js でブラウザゲーを作るためにやったことまとめ - Qiita

まず初めに phina.jsだけで完結できるところを、あえて Nuxt.jsをかぶせて作ってます。できたクリッカーゲームがこちら↓ 鬼姫無双-ONIHIMEMUSO- 最終的に使ったモノゲームライブラリ：phina.js フレームワーク：Nuxt.js データ：Firebase「Cloud Firestore」サーバー：Heroku CDN：Cloudinary WebPush：OneSignal ドロワーソフト：Sketch App 画像編集：Photoshop 作成環境：phina-ts-seed + create-nuxt-app 作った手順ゲームデザインまずコンパイルが早いparcelで、phina.jsを使いゲーム自体を作る中だるみを避けるためにここでキャラデザする Nuxt.jsを乗せてデータ連携・phinaとのつなぎ込み細かい描写を入れていくゲームデザイン

syo-sa19820615 2019/04/22

リンク

クライアントサイドのモデルとは何か前編 ~ クライアントサイド MVC の死 - mizchi's blog

前置きこの記事、本来はFlux には Model がないのではないかと思った覚書 - ナカザンドットネットとFlux の Store が ViewModel かって話からの MVW とかどうでもいいって話 - 猫型の蓄音機は1分間に45回にゃあと鳴くのアンサーとして書き始めた記事だが、前置きだけで別テーマとなったので、前後編に分割する。僕は元々がゲームクライアント屋だったときの発想を引きずってるのと、既存の Web の開発の文脈に対して距離を置いていることを明言しておく。あとこういうテーマでとある原稿書いていたので、頭の整理も兼ねて。 ActiveRecord の功罪を振り返るこのテーマを語るにあたって、まず Rails の MVC について述べなければならない。なぜなら、フロントエンドのアーキテクチャとは、サーバーサイドの MVC の模倣に始まり、破綻し、結果として

syo-sa19820615 2018/05/16

リンク

Flow練習した - hitode909の日記

Flowはfacebookが作ってるJSに型を書けるやつ．今日ちょっと練習してみたところ良かった．練習に手頃なところから型でも書いてみるかとやっていたところ，FormDataにFileをappendするところで，それはFileじゃなくて?Fileで，nullになる場合もあるのでおかしいよって教えてもらったりした．型をつけるだけで不具合が見つかって，こういう世界もあるのか，という感じだった．fileがなかったらreturnする処理を足しておいた．ちょっとずつ書いていけるのがよくて，このファイルは難しいことをしていて型が付くと恩恵を受けられそう，とか，このあたりはこれからがっつり開発するので先に型を付けておこう，といった進めかたができる．最初はちょっと慣れない部分もあったけど，ちょっと練習したら普通に書けるようになった．シンタックスがちょっと増えるので，どこまでJSのシンタックスで，どこ

syo-sa19820615 2017/04/13

リンク

Cocos2d-JS（HTML5）Lite版の使い方まとめ - Qiita

Cocos2d-JS Lite版とはスマホアプリ用ゲームの開発によく使われるCocos2d-x。これをJavaScriptで書けるようにしたのがCocos2d-JS︵Cocos2d-HTML5︶。そこから更にWebアプリに特化したのがLite版。もちろん、PhoneGap BuildとかMonacaとか使えば普通にLite版でもスマホアプリが作れてしまう︵正確にはハイブリッドアプリだけど︶。 Cocos2d-JS Lite版の使い方 Cocos2d-JS liteはCocos2dエンジンである、ひとつのJavaScriptファイルを読み込むだけなのでとてもシンプル構造だ。ただシンプル過ぎて拡張しにくい。HTMLファイルにコード直書きだし、シーンにそのまま画像やら文字列やら表示させてるし…。なので自分なりの使い方を解説してみる。 1. Lite版のLite版をダウンロードする Coc

syo-sa19820615 2017/01/24

cocos2d
js

リンク

この1年、Webのパフォーマンスで変わったことは？──HTML5 Conference 2016

この1年、Webのパフォーマンスで変わったことは？──HTML5 Conference 2016 川田寛︵ピクシブ株式会社︶こんにちは、ふろしきです。HTML5 Conference 2016の当日は、38度近くの熱があり、発表時はろれつが回ってませんでした。しかし、伝えたいことは伝えられたと思っています。その内容とは… ﹁この1年でWebのパフォーマンスの技術にどんな動きがあったのか﹂というダイジェスト。ここで話した3つのテーマについて、本記事でもご紹介。 1. レイアウト処理を減らす HTML5がバスワードするよりもずっと前から、CSSでアニメーションさせることはごくごくあたりまえ。JSが扱えないデザイナーであっても手軽にアニメーションできる良い世界になりました。しかしそこに、モバイルが出現したことで、JSだけで満足という人たちもCSSの機能を活用しなくてはいけなくなりました。モ

syo-sa19820615 2016/10/28

リンク

d3.jsで作ったバーンダウンチャート - Qiita

概要 d3.jsを使ってバーンダウンチャートを作ってみました。短いコードでデータをビジュアル化できるd3.jsは素晴らしいですね!!　いろいろ試した結果、出来上がったJavaScript部分のコードをこちらに掲載します。機能概要サーバサイドからJSONデータを受け取りd3.jsを使ってSVG領域にバーンダウンチャートを描画します。予定線をグレー、実績線をオレンジ、工数合計線をグリーンとして折れ線グラフを作ります。各データのポイント部はマウスオーバー時に数値を表示します。動作イメージフィルタ条件に対応したJSONをAjaxで出力し、d3.jsによりSVG領域を再描画します。d3.jsの処理が高速なので、ストレス無く快適に操作できます。 JSONデータの例データベースにはチケット毎に以下の項目を時系列に格納しています。各項目を日付毎にサマライズしたJSONを生成しd3.jsに渡します

syo-sa19820615 2016/05/16

あとよみ

リンク

全てのJSライブラリはTypeScriptで書かれるべきである | POSTD

私はJavaScriptプログラマで、ライブラリをいくつか作っています。しかし最近では RxJS version 5 のために TypeScript を書いています(RxJS version 5は Angular2の内部で使われていますが、Angular2もTypeScriptで書かれています)。現在私は Cycle.js をTypeScriptで書きなおしているところです。静的型付けと動的型付けの優劣の話はやや議論を呼ぶ話題なので、その議論をすべて再発させるつもりはありません。しかし、私は、沢山の開発者に使われることを意図した全てのJavaScriptライブラリはTypeScriptで書かれるべきだと信じています。これはアプリケーションやウェブサイトをTypeScriptで書くということの話ではなく、ライブラリに関する話です、ライブラリはTypeScriptで書かれるべきで、

syo-sa19820615 2016/03/30

あとで読む

リンク

Riot.js 2.2 情報まとめ - Qiita

Riot.js 2.2 情報まとめとりあえず、気付いたものをメモしていきます。随時更新。本家公式ドキュメント(英語) 公式ドキュメント(日本語) GitHub リポジトリ From React to Riot 2.0 - 背景説明のブログ記事 Gitter 公式フォーラムサンプル集(準備中) 開発情報インストール riotはツールごとにリポジトリが分かれていません。ブラウザ用のライブラリコンパイラ CLIツールの3つが一緒くたになっています。各人のスタイルに合わせて、インストールしましょう。(追記・次のv2.3に向けて、サブモジュール化が進んでいます) ライブラリとして CDNから最新版。他のパターンはこちら。コンパイラなし: https://cdn.jsdelivr.net/riot/2.2/riot.min.js コンパイラあり: https://cdn.jsdeli

syo-sa19820615 2015/07/06

js
Riot.js

リンク

もう逃げない。HTMLのviewportをちゃんと理解する

syo-sa19820615 2015/06/17

リンク

HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］

Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないものこうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細

syo-sa19820615 2015/03/13

リンク

100行で書けるブラウザで動作するyoutube音ゲーの作り方 - undefined

はじめに︻WEBサービス︼youtubeを使った音ゲー×タッチタイピングサービスを作ってみた︻つくってみた︼ - ぼくのかんがえたさいきょうのうぇぶさーびす上記の記事で書いた﹁typebeats﹂のゲーム部を簡素化して説明してみます。削っていくと100行に入りそうだったので詰め込んでみました。かなり簡素化していますが、基本的な考え方は共通です。ゲーム概要リズムに合わせて降ってくるアイコンをタッチ/クリックするゲームです。画面をタッチ/クリックするとゲームが開始します。こいつがこいつに重なるくらいがタッチ/クリックするタイミングです。スマホでの動作は確認していません。たぶん動かない気がします。言語はCoffeeScript、フレームワークはenchant.jsです。触れたことのない方はどっとインストールも参考にしてください。 CoffeeScript入門 (全13回

syo-sa19820615 2015/01/21

リンク

はてなブックマーク

タグ

関連タグで絞り込む (9)

jsに関するsyo-sa19820615のブックマーク (11)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス