async/await は Promise を置き換えない - Okapies' Archive
まとめ async/await 構文は、Promise で書ける処理のうち特定のケースしか表現できない 特定のケースとは、ある非同期処理の前処理と後処理がそれぞれ 1 個ずつの場合のみである async/await 構文は初心者に非同期処理を導入する際に適しているが、非同期処理を逐次処理として書けるという幻想を与えるので、どこかで知識をアップデートする機会を設けるべきである この記事はなに？ 少しバズったのでまとめておこうかと。 「async/await があれば Promise なんて難しいものは要らない！」とか言ってるウブな子に、複数の API に並列にリクエストを投げて一つ以上成功した時だけ先に進む、みたいな問題を与えて愛でてみたい。— Yuta Okamoto (@okapies) 2020年12月11日 async/await は Promise のネストを手続き的なコードに見え
carlo + parcelでお手軽デスクトップアプリケーション - Qiita
ウェブ技術でデスクトップアプリを開発するとなると、一番メジャーなのはやはりelectron/electronでしょう。ところがElectronは割と面倒です。配布ファイルのサイズ、セキュリティなど。 それとバンドラとして有名なWebpackですが、こっちも仰々しいです。 そこで今回はライトウェイトでゼロコンフィグな、carloとparcelの組み合わせについて書きます。 carlo GoogleChromeLabs/carloは先日登場したばかりの headful Node app framework です。headlessならぬheadfulです。 中身はぶっちゃけると puppeteer-core の薄いラッパーです。 普通のPuppeteerはオープンソースのChromiumをダウンロードしてきて動作しますが、puppeteer-coreは既にローカルにインストールされているChro
大きなディスプレイでPDFなどの文書を読むときは横スクロールが最強だと思うので実装してみた - このブログはURLが変更になりました
以前から、縦幅基準に1ページまるごと収めても十分読めるほどディスプレイが大きいのであれば、PDFビューアのページ遷移は水平方向にスクロールすべきだと思ってたんですね。 画面が広いとこういうの無駄だよね。 じゃあこうすればいいんじゃね？ 画面を縦にするって手もありますが、こういう風に横に並べると複数ページにまたいで確認できるのもメリット。ワイド液晶なら3ページぐらい表示できちゃうかも。 しかし… しかし既存のPDFビューアで水平方向にスクロールできるものは見当たらず、またPDFビューアを1から作るほどのスキルはないのでどうしたものか。 で、そういえばJavaScriptで実装されたPDFビューアがあったな、ということを思い出しました。 mozilla/pdf.js @ GitHub お、JavaScriptなら俺でも改造できるかも？ということで、水平方向にスクロールできるPDFビューアを作っ
gl.enchant.js 入門 – ざっくりと作る流れをまとめてみました!! | TM Life
ついに enchant.js の拡張プラグイン gl.enchant.js の β版が公開されました. これは内部的に WebGL を使っているので高速で豊かな 3D 表現が可能です. OpenGL や 3D プログラミングは仕事柄, 専門というか得意分野なので, ついにキターって感じです♪ さっそく使ってみて, ついでに簡単なプログラムを作る流れをまとめてみました. 以前書いてたくさんの方に見ていただいた『enchant.js を使ってゲームを作ろう!!』同様, step 形式で細かく区切っています. 参考になれば幸いです. Sample and Download 今回制作するサンプルはこちら. 球体を表示して, キーボードやマウスで回転できるようにしただけの単純なサンプルです. ジンバルロック対応は気が向いたらやります. また, クロスドメインの規制でローカルではテクスチャが使えないの
[JS]さまざまな動きが楽しくてかわいい、サークル状のナビゲーションを実装するスクリプト -Circle Menu
デモページ: Timing, Reversed 上のデモでの逆順です。 Circle Menuの使い方 HTML 各アイテムはリスト要素です。 <ul> <li><a href="#">+</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jQuery.circl
トップページ/JavaScriptゲーム/ライブラリ/enchant.js/サンプル - nakamura001 @ ウィキ
トップページ > JavaScriptゲーム > ライブラリ > enchant.js > サンプル サンプル キャラクターを右に移動 キャラクターを方向キーで移動 往復移動処理(キャラクターの画像反転) タップした位置にキャラクターを移動 ラベルの表示 当たり判定(ライブラリのメソッドを使わずに自前で判定) 当たり判定(ライブラリのメソッドで判定) キャラクターアニメーションの方法 キャラクターの追加方法 車の移動処理 レイヤーの前後関係を考慮したキャラクター追加方法 放物線状に物を投げる方法 プラグイン バーチャルパッドの使い方 付属のバーチャルパッドのプラグインが8方向入力に対応 enchant.js向けの全方向入力可能なバーチャルパッド 文字列(テキスト)描画のプラグインに文字列変更対応版のクラスを追加 ゲーム タップ・タップ・リンゴ(全てのリンゴをタップ) タップ・タップ・リンゴ
enchant.js ソースコード・リーディングを開催しました - hakobera's blog
enchant.js ソースコード・リーディング - [PARTAKE] 私の適当なtwitterでのつぶやきにid:nakamura001さんが反応してくれたので、脊髄反射的に上記の勉強会を開催しました。 なにげに初勉強会主催で、人があつまるかな、と不安だったのですが、蓋を開けてみれば、9名の方が参加してくれて、とても熱い会になりました。前半が説明、後半がハッカソンでした。ハッカソンは盛り上がりすぎて、予定時間を２時間ほどオーバーするほど楽しかったです。 以下簡単にまとめます。 enchant.js 概要解説 拙作ですが、enchant.js の概要解説をしました。 enchant.js source reading View more presentations from hakobera id:namakura001 さんによる enchant.js ゲーム開発入門 以下のサンプルペ
SNBinderと「混ざり物のないコンソメスープ」と
先日オープンソース化したSNBinder（参照）、たくさんの人たちから色々なフィードバッックをいただけてとても感謝している。ブログの記事として書かれたものは私が知る限り以下の三つ。 penultimate diary: SNBinderを試してみる js do.it: SNBinderを試したよ！ a2c.get.diary: SNBinderに目からウロコ 小さなMVCが今現実に 当初は、最新のjQueryと動かないというバグがあったり、READMEにタイポがあったりとご迷惑をおかけしてしまったが、こうやってフィードバックをいただくことによって、励みになったり改良したり、というのがオープンソースの醍醐味である。とてもありがたい。 ちなみに、SNBinderは原型のようなものは１年前以上前からあったのだが、ViewとControllerの切り分けに部分がなかなかすっきりせず、公開を控えてい
Chrome Extensions - Content Script - Playground of ours
ATNDのイベント情報をGoogleカレンダーに登録するChrome Extensionsを作ってみました。 atnd2GCal その時のメモです。 Content Script Webページ内でJavaScriptを実行して、そのページを拡張したりする様な場合はContent Script APIを使う。(FirefoxのGreasemonkey的な感じ) Content Scriptが出来ないこと Content Scriptを作るに当たっては、以下の制約がある。 クロスドメインでのXMLHttpRequestは生成出来ない chrome.extensionの一部を除く、chrome.* APIは仕様出来ない エクステンションのページで定義されている変数・関数へのアクセス Webページ、他のエクステンション内で定義されている変数・関数へのアクセス Content Script本体では、
WebSocketで目指せ“リアルタイムWeb”！第1回 node.jsの衝撃とWebSocketが拓く未来 - ＠IT
ご挨拶 こんにちは、ロンドンのNew Bambooという会社でWebエンジニアとして働いている@makoto_inoueです。ここのところ、PusherというWebSocketのクラウドサービスの開発に関わっています。今回から3回に渡ってWebSocketに関する短期連載を担当させていただきます。 私を含めたNew Bambooの面々（我々は自分たちのことをBambinoと呼んでいます）がWebSocketになぜ興味を持ったかということからはじまり、実際にクラウドサービスを始めるまでにいたったストーリーをお話ししたいと思います。そのストーリーを通じて、WebSocketが切り開く「リアルタイムWeb」な世界への可能性や技術的課題を皆さんと共有できればと思っています。
Cloud9: Node.js-powered IDE in the Sky - The Changelog - Open Source moves fast. Keep up.
Episodes Archives The Changelog - Open Source moves fast. Keep up. Latest episode Episode 0.3.6 - Django Dash Kenneth and Wynn caught up with Daniel, Christian, and Matt from Pragmatic Badger to talk about the Django Dash, Python, and Ruby. Go to episode The Changelog is a weekly podcast and blog that covers what's fresh and new in Open Source. September 25, 2010 View 8 The Ajax.org Team has fina
全部見て5つだけ選びました！ グーグルが公開した「Chrome Experiments」のみどころ
グーグルが公開を開始した「Chrome Experiments」は、グーグルが開発したWebブラウザの「Google Chrome」の高速さをアピールするのが目的ですが、同時に「JavaScriptでこんなことができるのか！」ということを体験できるアプリケーションが揃っています。 このサイトのアプリケーションで多用されているのが、JavaScriptで図形を描くことのできるcanvasタグです。canvasタグを使うと、アニメーションや写真の合成といった、いままでJavaScriptではほとんど不可能だった処理が可能になります。 論より証拠。3月23日時点でChrome Experimentに紹介されているアプリケーションを僕が全部試して、そこから厳選した5つのアプリケーションを紹介しましょう。 ■js touch つかみに持ってくるのはやはりこのアプリケーションでしょう。初音ミクの3Dフ
アナログ時計風のUIで時刻の入力ができるユニークなjQueryプラグイン「cantipi」:phpspot開発日誌
cantipi | Look like clock, work like clock! アナログ時計風のUIで時刻の入力ができるユニークなjQueryプラグイン「cantipi」。 インプットにフォーカスをあてると次のようなアナログ時計が現れ、内側をクリックで時刻の針を、外側をクリックで分数の針を変更することができます。 こういう入力のさせ方もあるのかと感心しました。 最初、一瞬使い方に戸惑う部分があるかもしれませんが、使い方によっては便利な使い方ができるかもしれません。 関連エントリ 時刻の入力に便利なJS入力補助ライブラリ「jquery.timepickr.js」 アナログ時計から簡単に時刻を指定できるJavaScriptライブラリ「Time Picker」
noVNC
VNC client using HTML5 (WebSockets, Canvas) with encryption (wss://) support. Notable commits, announcements and news @noVNC. HTML5 WebSockets and Canvas Online noVNC Client A version of the noVNC client is available online here. A convenient shortcut address is noVNC.com Videos and Screenshots It's not a real project until there are videos and screenshots. Online Demo This online demo plays back
InfoQ: HTML5のケーススタディ：WebSockets, Canvas そして JavaScriptで noVNCクライアントを作成
原文(投稿日：2010/07/01)へのリンク noVNC は、VNCクライアントで、 HTML5 WebSockets, Canvas そして JavaScriptを使って実装されている。InfoQ、は、 Joel Martin氏と、 noVNCと HTML5アプリケーションの開発経験について、少しばかり、Q&Aを持った: InfoQ: Joelさん、noVNCのアーキテクチャの全体像と様々なコンポーネントがどのように、いっしょになっているのか，教えてください。 Joel: noVNCのアーキテクチャは、６つの主要なコンポーネントからできています: コアの VNC/RFB実装: このコンポーネントは、すべてのRFBプロトコルの情報をカプセル化していて、他のすべてを動かす、主要なステートマシンです。 Canvas抽象層: このコンポーネントは、 HTML5 CanvasAPIを抽象化した層
SVG with a little help from Raphaël
First we create a table of values that add up to 100%. These are the values for each wedge in the pie chart. We can enhance the regular table if the browser supports it. <table id="nutritionFacts"> <caption>Nutritional information for product X</caption> <tr> <th scope="row">Calories</th> <td>45%</td> </tr> <tr> <th scope="row">Saturated Fats</th> <td>25%</td> </tr> <tr> <th scope="row">Protein</t
IEやiPhoneでも問題なく動作・ドラッグやスクロール等、多方面で応用出来るjsライブラリ・Dragdealer JS - かちびと.net
なかなか使い勝手が良さそう だったのでメモ。スクロールバー や、コンテンツスライダーなど、 多方面で応用の効くjsライブラリ、 Dragdealer JSのご紹介。 IE6、7、8や、iPhoneでも動作を確認しましたが、何の問題も無く動いてくれますよ。 ↑ 上図はスクロールバーに使用した例です。動作も凄くスムーズです。Flashでよく見かけますね。 ↑ 文字の拡大をドラッグで実装。 ↑ 斜めに移動するコンテンツスライダーにも応用できる。 ↑ こちらではコメント送信に使っています。ユニークですね。 iPhoneでは全てフリックで動作します。 IE6とか7がだいたいネックになるのでどのブラウザでも実装できるjsはいくつ覚えておいても損なさそうですね。加えてiPhoneなどでもスムーズに動いてくれるのでなかなか使えそうです。以下で動作をご確認下さい。 Dragdealer JS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
iUI - Google 検索
ChromeExtention版、Jetpack版のBibliwoをリリースしました(あとバグ修正) - やればできる子の日記