はてなブックマーク

パパッと作る場合はWrite once Run anywhere類似技術を活かせるし、それでOKとなるのだけど、解像度の低い発注者(お金で時間を買う人)が最終的に求めてくる物が ・差別化要素が高く ・高速動作し ・非力な環境でも安定動作する物 の場合はリテイクが多発する事に それなら最初から素で書くか…となるね— うーぱーです (@uupaa) 2018年6月4日 事前に"これはできます。こういうのはできません"と説明しても、お金を出す側は(なぜか)速攻でこちらの説明を忘れ「アレもコレもしたい」「競合アプリの機能をうちにも」と、すぐに要求が跳ね上がるのが常なので、一度書けばドコでも動く系技術における開発の難しさはこの辺にあるという肌感です— うーぱーです (@uupaa) 2018年6月4日 2000年頃から人類はその時のプラットフォームに合わせたReact Nativeを発明し続けている

ツイート貼っただけですけども MozillaがHTTPSを前提とした機能追加を行うと宣言したように、今後はES Modulesを前提とした機能追加がありえるのだけど、ESMに対応する標準的な解が存在しないRailsはどうするんだろね。現状はjs系はバンドラの使用が大前提で、フルマネージドが足かせ状態になってる— コラーゲンたっぷりさん (@uupaa) 2018年1月22日 こちらです: www.publickey1.jp 今日リリース予定のChrome64でESMを無効化するフラグ chrome://flags#enable-module-scripts が無くなりESMが常時有効化されます。いよいよ<script type=“module”>を活用する時代に突入するため我々も変化しつつ前進ですよ— コラーゲンたっぷりさん (@uupaa) 2018年1月22日 jsを1つにバンドルして

最近 WebApp/2 というのを作ってます。 WebApp/2 は2012年頃から温めていた「ES6 + ESModules を使い、開発初期〜中期は Bundler や Transpiler を使用せずに開発を進められるようにしたい」というアイデアを具現化したものです(細かい仕様は wiki にあります)。 作り始めて20日ほどですが、昨日までの WebApp/2 には、以下の課題や疑問が存在しました。 WebApp/2 は一般的なトレンド [要出典] から大きくJUMPしている。世の中には webpack, babel, browserify を前提に書かれた ES5/ES6 なコードが大量にあるが、それらを ES6+ESModulesに変換するための シンプルで将来取り外しが効くマイグレーションパスが見つかっていない ファイルを事前結合しない場合の パフォーマンスのトレードオフがど

webpackを使ったサイト、極端にデバッグしずらい (外部ライブラリが eval(文字列) の形で埋め込まれる)ので、はっきり言って大キライだったりする— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 見知らぬコードが minifyされ、さらに eval されているのをデバッグしろとか、暴力にも等しい要求なんだよね。そりゃキライになるよ— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 「環境Aの言語Bで書かれたコードを言語Fに変換した、環境C/D/Eで動くと思うのでデバッグしろ」というのも極端にデバッグしづらいという理由から避けるようにしている。 デバッガビリティに問題がある環境は、心がすり減るのでイヤ(時給1万円なら頑張る— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 js minifyあるある A「パフォーマンスに問題があるので

先ごろ、github-pages として公開するディレクトリを masterブランチの docs に設定することが可能になりました。 (これまでは gh-pages と呼ばれる別ブランチを用意し、そちらに必要なファイルを都度 publish する必要がありました) そこで (〜・◇・)〜 github シンボリックリンクをある程度理解してくれるから、もしかしてリンク作れば、master や develop ブランチに追加したファイルを docs から参照可能できたりしないかなぁ? と考えた (ε・◇・)з ← コイツがおったそうな。 github-pages で /docs を作成+公開し /lib/a.js を /docs/index.html から参照しようとリンクを作成( ln -s ../lib lib )し <script src=“lib/a.js”> するとエラーになる。 さ

iOS 10 Safari から video のインライン再生が可能になります。 iOS 9 までは <video webkit-playsinline> を指定することでインライン再生が可能でした(WebView のみ) iOS 10 からは <video playsinline> を指定することでMobile Safari でもインライン再生が可能になります ご注意 注意すべき点が１つあり、webkit-playsinline ではなく playsinline を指定してください。 webkit-playsinlineだけを指定するとフルスクリーン再生になってしまいます。 webkit-playsinline と playsinline を指定しない → フルスクリーン再生になる webkit-playsinline を指定する → フルスクリーン再生になる iOS 10β3頃まではイ

WebKit をデバッグビルドすると、UnitTest用と思われる隠しAPIが利用可能になります。 window.internals.xxx() を実行することで… 一時停止できないはずのKeyFrameアニメーションを一時停止したり 各種ハードウェア/ソフトウェアの状態を取得したり メモリキャッシュ/ページキャッシュをクリアしたり スタイルを強制的に再計算したり(リフロー) GC 発生を知ることができたり(GC observe) などが可能になるようです。 隠しAPIは250個以上あるようなので、寝れない夜に眺めると良いかもしれません。

SHA-1サーバ証明書の発行禁止と2017年1月1日からの相互利用禁止に伴い、2009年以前に発売されたガラケーの大半でSSL通信(≒ログイン,課金)ができなくなります。こちらが機種ごとの対応状況の一覧です SHA-2各種プラットフォーム対応状況 Node.js などのサーバサイドで判別する場合はこちらのリストを使うと良いでしょう。CERT_SHA1 とマークされている機種が SHA-2 に対応できない機種です。 https://github.com/uupaa/Spec.js/blob/master/lib/SpecCatalogFP.js JSON版 つまり、2017/01/01 以降は、FlashLite1.x しか対応していないガラケーは存在しないものとして扱う事が可能になります 。残りは FlashLite2.0が少々, 大半はFlashLite3.0と3.1です。時代の流れです

ポエムです。 npm unpublish --force kik and unpublished all my packages. いわゆる left-pad 問題の続報です。 npm が unpublish の運用ポリシーを変更するそうです。 The npm Blog changes to npm’s unpublish policy New policy Going forward, if you try to unpublish a given package@version: If the version is less than 24 hours old, you can unpublish it. The package will be completely removed from the registry. No new packages can be published

ScreenOrientationEvent.js 書きました。 画面の回転方向を取得する 画面の回転時のイベントでコールバックする 画面の回転をロックする なんてことができます。 モバイルなブラウザ(Chrome, Firefox, Edge, Safari)で動きます、PCでも動きますが余り楽しくないです。Safari だと画面ロックはできないです。

source(gist)

Web Speech API を使えば、ブラウザ上で音声合成と音声認識が出来る時代らしいです。 Safari と Chrome で音声合成が利用できます。Chrome ならさらに音声認識も利用できます。 手軽に利用できるように、WebModule ベースの Speech.js Module を作ってみました。 iOS Safari Chrome for Android PC Chrome Electron NW.js 音声合成 OK OK OK OK OK 音声認識 OK OK OK OK こんな感じで使います (ボイスコマンド部分は3分で実装した感じのアレなコードです) var speech = new Speech().load({ name: /Kyoko/i, lang: /ja/i }); // ボイスのロード var recognizer = new Speech().crea

確定情報ではないので、ポエムとして書きます(確定情報などは Qiita に書いてます) https://github.com/uupaa/LatestLog/blob/master/2016-01.md#list-of-changes-in-the-browser-and-runtime-environment-which-is-scheduled-in-2016 2016-09 - 次期 Mac OS から Flash Lite 用の swf をビルド出来なくなります Java SE 6 サポート終了 → Adobe CS 6 起動不能 → Flash Lite 用 swf ビルド不能の流れです El Capitan の次期OS は Java SE 6 をサポートしません Adobe CS 6 は Java SE 6 が無いと起動しません(Adobe CS 5.5, 5 も同様に Jav

ブラウザでバイナリを扱うのが辛すぎて、何とかしたいと作りこんでいた冶具(HexDump.js) がだんだん極まってきたの図。 ただの Hex Dump 機能として作ってたハズが、気がついたらこんな感じに。 冶具: 作業の効率を改善するために自分でクリエイトする道具 HexDump(source, { style: { "packet_start_code_prefix(00 00 01)": { values: [0x00, 0x00, 0x01], css: "font-weight:bold;color:green" }, "stream_id(1 byte)": { begin: 3, end: 4, css: "font-weight:bold;color:blue" }, "PES_packet_length(2 byte)": { begin: 4, end: 6, css:

自分の会社に「新ツール導入の際はCTOの許可が必要」というルールを生やして居心地を悪化させたり、後輩のやる気を削りたくなかったら、ツールの将来性を考えて行動したほうが… SI等のアレな現場にその手のルールが存在するのは何故なのか?という事と、自分達もその歴史の一節にならないように— コラーゲンたっぷりさん (@uupaa) November 20, 2015 必要な物は生まれる(創れば良い)ので、どんな問題がありどのような解決方法があり、状況の変化にどう対応するかなど、大人はツール導入前に織り込んでおくし、”勉強会の人が流行ってるって言ってたし”ですぐ廃れるツールを導入するなんて事を繰り返してると、あっという間にデストピアな職場に。な— コラーゲンたっぷりさん (@uupaa) November 20, 2015 “ツール導入で劇的に効率や抱えている問題が改善される”なら導入すればいいし、

ForceClick.js は force click によるリンクの先読み機能を無効化するライブラリです。 iPhone 6s Safari で <a href="..."> をクリックすると、3通りのアクションが発生することはご存知でしょうか? 軽くタッチすると、リンクを現在のタブで開く (open link) 長めにタッチすると、コンテキストメニューが開く (longpress, open contextmenu) 強く押すとモーダルダイアログが開き、リンク先のページをプレビュー (force click on link navigation) 3番目の機能は iPhone 6s で新たに追加された機能です 普段使いには便利な機能なのですが、問題を誘発するケースがいくつか見つかっています。 WebGame における問題 「レイドボスと戦う!」と書かれたボタン状のリンクがあり、リンク先

追記: このエントリを投稿してから3日後に Google から AMP が発表されました。AMP は 既存の HTML/CSS/JavaScript の機能を制限することで、ページの表示パフォーマンスを改善するものです。AMP で書かれたページは Google 検索ランキングにおける特典が受けられるといった情報もあります。AMPの実装方法

結構な割合で必要となるビット演算系の関数をまとめた WebModule ベースのライブラリ Bit.js を追加しました。 こんな関数があります。 // make bit mask Bit.mask(2) // -> 0x03 Bit.mask(4) // -> 0x0f // bit split by bit-pattern Bit.split(0xffff1234, [16,4,4,4,4]) // -> [0xffff,0x1,0x2,0x3,0x4] // With ES6 Destructuring Assignment // ES6 Destructuring Assignment と Bit.split を併用すると以下のように簡便に記述できます var [u16, u8a, u8b] = Bit.split(0x00001234, [16, 8, 8]); // u16 =

Chrome DevTools の Timeline タブにフレーム毎のスクリーンショットを記録/再生する機能がついています。 Canvas パーティクル 3万個 の結果です。 youtu.be Canvas/WebGL を使ったカジュアルゲームの開発やQAに活かす事ができるステキ機能ですね。 CreateJS を使っている方々は、是非試してみると良いかと。 1ヶ月ほど前から存在した機能なのですが、インパクトの割に話題になっていないようなので書いてみました。Chrome Canary で試せます。

イノベーティブなプロダクトだと、チャレンジ成分の多さに応じてエッジな技術を投入できる可能性が高まるという観測ができた。 さて上記の状況で、QAチームがなぜか突然IE7,IE8対応を求めてきました。その時の僕はどうなったでしょう? A1. 徹夜になった A2. 二徹して対応した— コラーゲンたっぷりさん (@uupaa) 2015, 9月 3 強い心で「古いIE対応なんてありえない」と宣言すればよかったし、それができなかったのが僕の落ち度だ— コラーゲンたっぷりさん (@uupaa) 2015, 9月 3 プロダクトのターゲットユーザをQAと共有できていない場合に、不幸が起こりえるので、今後は特に気をつけたい。— コラーゲンたっぷりさん (@uupaa) 2015, 9月 3 QAにも、良く訓練されたプロQAと、ユーザと同じ程度のアマQAが居て、練度が全く事なる。 よく訓練されたQAは、不具

SIMフリー Android 端末を販売する各社様へ。少々困ってる事があります。ぜひ、ご協力いただければと思っています。 私は github で Spec.js という JavaScript ライブラリを公開しております。 このライブラリは、端末の UserAgent から情報を収集/分析し、WebApp が使いやすい形で各種の情報を提供しているのですが、このライブラリがうまく機能するためには、鍵となる UserAgent の情報が不可欠となっています。 大手キャリア様(docomo, au, softbank)におかれましては、端末発売とほぼ同じタイミングで、端末のハードウェア情報と共にブラウザに関する情報も公開されております。ただ、SIM フリー端末を発売の各社に於かれましては、開発に役立つ情報の公開が限定的で、大変難儀しております。 「売ってるらしい」「噂では聞いたことがある」といっ

ボタン１つで、text-align: right がこのように。 すばらし

iOS 9.0 に入るかもしれない機能をまとめてみました。公式なものではないため参考程度にお願いします。 WebKit 公式の Feature Status もご覧ください。 (ε・ ワ ・)з 40〜50時間ぐらいドブに捨てて書いている気がしますが、2分で読めます via https://github.com/uupaa/WebKitChangeLog/wiki/iOS9.x.x.changesets WebKit 600.1.4 以降の変化をまとめました。 WebKit の Changeset から読み取れる情報を元に構成されており、検証中のものが多く含まれています。あくまで予想です。 HTML/DOM node.style.webkitFontFeatureSettings が実装されました DocumentFragment に getElementById が実装されました Doc

Spec.js の機能が増えてきたため、UserAgent 部分だけを分離した UserAgent.js を書きました。Edge への対応と WebView 判別部分などなど、多用する機能だけに絞って入れてあります。 var ua = new UserAgent(); var result = { OS: ua.OS, OS_VERSION: ua.OS_VERSION, BROWSER: ua.BROWSER, BROWSER_ENGINE: ua.BROWSER_ENGINE, BROWSER_VERSION: ua.BROWSER_VERSION, USER_AGENT: ua.USER_AGENT, WEB_VIEW: ua.WEB_VIEW, AOSP: ua.AOSP, }; console.dir(result); { "OS": "Mac", "OS_VERSION": "