フロントエンドのパフォーマンスチューニングを俯瞰する - 30歳からのプログラミング
去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。 知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった。何となく「パフォーマンスに効果がある」と言ってしまうが、それが何を指しているのかは実は曖昧だった。 このような状態では新しい知識を得ていくのが難しいというか、効率的に行えないように思えた。議論の背景が分からないし、文脈や問題意識を上手く掴めないから。何の話をしているのかよく分からない、という状態になりがち。書かれてあることの意味は分かっても論旨を掴めているわけではないから、自分のなかに定着しない。 そこで、現時点で自分が知っていることを整理して、自分なりに分類しておくことにした。 当たり前だが、どのテクニックがどの程度有効なのかは、状況によって違う。
HTML5のLocal Storageを使ってはいけない（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
ブラウザ毎のリリースノートや実装状況はどこを見ればいいかをまとめました
最近、Microsoft、Mozilla、Google、Appleといったブラウザベンダーが積極的に情報を発信するようになったのもあって、公式の情報でもどこを見ればいいのかがわからないという状況が起きてる気がします。 (主にSNSで流れてくるものを見るのがメインストリームになってるので、そういうことを気にしなくなったというのもあると思いますが) なので、ブラウザ毎にリリースノート(Changelog)、実装状況、公式のブログ、バグ報告の場所などをまとめました。 azu/browser-javascript-resource 更新がしやすようにGitHubのREADMEとして置いてるので、継続して見たい人はWatchをするなり、付け足したい情報や訂正したほうがいいものはPull RequestやIssueを送ってくださるといいと思います。 まとめてみると、Microsoft Edgeは一本道
フロントエンド(webブラウザ)でPythonを使いたい時の選択肢を調べてみた
普段ブラウザまわりのjavascriptが必要な時にはCoffeeScriptで書いているけど、最近ではHaskellでもかけるしPythonでもかけるようになってきているので調べてみた。尚、Fayに関しては「Introduction to Fay」がわかりやすい。 見つかったのは次の5つのプロジェクト。最初の2つはjavascriptで実装されたPython実行環境で残りの3つはPythonコードをJavascriptに変換するトランスレータ。 Brython Skulpt PythonScript Pyjaco Pyjs Brython ゴールが非常にわかりやすい。 Brython's goal is to replace Javascript with Python, as the scripting language for web browsers. CoffeeScriptなん
JavaScriptにsleepを実装しようとして気づいたら新言語を作ってた話 - aike’s blog
あのですね、JavaScriptにsleep()とかwait()みたいなのってほしいじゃないですか。で、調べてみると標準にはなくて作れるには作れるけどブラウザ依存だったりビジーループだったりJava Applet併用だったりしてがっかりするじゃないですか。 ぼくは1年半くらい前に「竹内関数で音楽生成」っていうエントリーを書いたんですが、当然これをJavaScriptで計算しながら音を鳴らすページを作りたくなりますよね。ですよね。こう見えても昔はN88-BASICでCMD PLAYとかばりばり使ってたくちなんで、そのくらい簡単だと思うじゃないですか。そしたらもう当時はAudio APIも出たばかりで情報もすくなくてブラウザ依存で、しかもJavaScriptでsleepできないしふんだりけったりで最初の一歩も踏み出せない状態。 そんなわけでなんとか手はないかとこの1年以上ずっと試行錯誤してきて
［GDC 2013］Webブラウザで「Unreal Engine 3」がヌルヌル動く!? ゲームエンジンを5日でHTML5へ移植した驚きの技術とは
［GDC 2013］Webブラウザで「Unreal Engine 3」がヌルヌル動く!? ゲームエンジンを5日でHTML5へ移植した驚きの技術とは ライター：米田 聡 Game Developers Conference 2013（以下，GDC 2013）の2日めとなる米国時間3月26日，Webブラウザ「Firefox」の開発で知られる米Mozilla Foundation（以下，Mozilla）が，「Fast and Awesome HTML5 Games」（高速かつ驚愕のHTML5ゲーム）と題するセッションを開催した。 HTML5はそのポテンシャルが高く評価されてはいるが，実際にそれで作成されたゲームを見ると，「Webブラウザ上のゲームならこんなものか……」と落胆させられるものが多い。そのため正直に言えば，筆者はあまり期待せずに参加したのだが，蓋を開けてみれば，たしかにタイトルどおり「
HTML5をすぐハイブリッドアプリとして試せる無料のツール「Monaca」を使ってみた
HTML5/JavaScriptで作成したアプリケーションをラップし、ネイティブアプリケーションとして扱える「ハイブリッドアプリケーション」は、高い生産性でモバイルアプリケーションを開発できるといったメリットから注目されています。 しかし実際に自分でハイブリッドアプリケーションを開発しようとすると、例えばiOS用ならMacOSのマシンを用意してPhoneGapの環境を整え、ビルドしたアプリケーションをいちいちiPadやiPhoneに転送して試すなど、それなりの手間がかかります。Publickeyでは以前からハイブリッドアプリケーションに注目して紹介してきたため、時間があれば自分でもHTML5とJavaScriptで作ったアプリケーションをハイブリッド化しみてみようと思いつつ、なかなか開発環境を整備するに至りませんでした。 そこで思い出したのが「Monaca」です。Webブラウザ上でHTML
shuraba.com - JavaScript: 任意のオブジェクトまでスクロールする
どういうスクリプトか 任意のオブジェクト (ID で指定する) までヌルヌルと動く JavaScript を考えよう。どうして「ヌルヌル」という動作条件が出てくるのかといえば、単にジャンプするだけなら HTML のアンカーを使えば良いからである。例えば、 <a href="#hoge">Go HOGE</a> <p id="Hoge"><a name="hoge"></a>HOGE HOGE</p> と記述すればよろしい。しかしそれでは面白くない。ここで JavaScript を使って作りたいのは、「Go HOGE」をクリックすると id="Hoge" まで滑らかにスクロールするスクリプトである。 必要な値 このスクリプトを組むにあたって必要な値は以下の通り。 オブジェクトの x, y 座標 (objX, objY) スクロールされた（ウィンドウの左上に表示されているドキュメントの）x,
スクロールバーの座標を取得するscrollTop | alt
スクロールバーの座標を取得するscrollTop Published by alt on 12 月 26, 2008 02:14 pm Category[ サンプル ] Tag[ Javascript ] Javascriptでスクロールバーの上端の座標を取得するとき、 こちら の記事を参考にすると、 document.body.scrollTop document.documentElement.scrollTop window.scrollTop の３つのどれかで値がとれます。 onLoadのタイミングで取得すると、 大概のブラウザではスクロールバーが初期値に戻ってしまうため 0 が返ってきます。 ボタンアクションなどの任意のタイミングなら IE、Firefox、Operaはdocument.documentElement.scrollTop Safar
ブックマークレット／Bookmarkletの作り方 - catch.jp-wiki
Photo by Gayatri Krishnamoorthy via Flickr Bookmarklet(ブックマークレット)は、Webブラウザに追加できる小さなプログラムです。 ブックマーク(お気に入り)に置いといて、そこから呼び出す小さなプログラムなので、こんな名前になってます。 たとえば、Wikipediaや英和辞書で調べたり、今見ているWebページをちょっと加工したり、なんてことができます。 Webブラウザを使っていると、自分専用でちょっとした便利な機能が欲しくなることがありますよね。 解決する方法は色々あるけれど、とりあえずBookmarklet(ブックマークレット)が簡単なんじゃないか。 ということで、作り方を調べてみました。 ちなみに、ドラッグで選択した文字を検索するのは、ブックマークレットを使わなくても、右クリックすればOK >>オススメのJavscript解説書 確か
ブラウザをテキストエディタっぽく使うサンプルを作ってみたら意外に単純にできますた
なんだかidea*ideaさんの たった一行でブラウザをシンプルなメモ帳に変える方法 という記事が話題になってまして、ブラウザをメモ帳代わりにするっていうお話なんですが…いろいろ調べてるうちにブラウザ上で動作するエディタができちゃいました。 contenteditableとは 件の記事ではWebブラウザのURL欄に data:text/html, <html contenteditable> というのを入力して開くと、ブラウザ自体がメモ帳のようにテキスト入力できるようになるよ！というネタでして、確かにテキスト入力すると書き込めるようにはなってるんですが残念ながら保存はできません。 ブラウザの【保存】でもhtmlとしてしか保存できないしなんだかテキストは実態参照になって（chromeで保存した場合）たり…といった感じなのです。 そもそもこのコードの【contenteditable】っての自体
reduce関数は結構有用っていうお話 - あと味
JavaScriptに限った話ではないのですが、reduce関数を持つプログラミング言語がいくつかあります。 JavaScriptに関しては、一応、ECMAScript5の仕様に登場するようで、将来的にはどのブラウザでも使えるようになりそうな気配はあります。 Standard ECMA-262 また、MDCではreduceのアルゴリズムが掲載されているので、これを利用すれば現時点でもどのブラウザでもreduce関数を利用することができます。 reduce関数とは？ MDCに掲載されている文章を引用します。 配列の（左から右へ） 2 つの値に対して同時に関数を適用し、単一の値にします。 JavaScriptのreduceは、配列のメソッドです。左ら右へとありますが、右から左へ関数を適用するreduceRightという関数もあります。*1 どういう時に使えるか 元となる配列があって、それを累積
モバイルアプリ向けJavaScriptフレームワーク「Junior」、Backbone、Zeptoなどを採用し、ネイティブのルック＆フィールを持つ
Juniorは、Justin Martin氏が開発したフレームワーク。Martin氏は“My holiday project”としてJuniorを開発したとツイートしています。 Juniorの特徴は、モバイルに最適化したCSSトランジションによるスムーズな画像効果、zeptoやbackbone.jsなど多数のライブラリに依存していることなど。UIコンポーネントはRatchetを利用しているようで、モバイルネイティブのルック＆フィールを備えていると説明されてます。 modernizr、zepto、backboneなどに依存 Juniorが依存しているライブラリは以下。 modernizr（ブラウザごとに異なる実装を調べて、対応するコードを書きやすくする） zepto（jQuery互換のミニマルなライブラリ） zepto flickable（zeptoのタッチ対応プラグイン） lodash（U
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのコードフローを視覚化するTraceGL
rvl.io
Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報*ホームページを作る人のネタ帳