Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開！ -
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指
HTML の script タグ内にインラインで書かれた js をデバッグする方法 - Qiita
はじめに HTML の script タグ内にインラインで書かれた js をデバッグする方法を共有します 本来であれば外部ファイルとして *.js にすべきですが、ワケあって <script> タグ内に js が書かれている場合に有効です！ この方法は script タグに囲まれた js を、 あたかも外部ファイルの js として扱えるようになります やってみよう 例えば、以下のような html があるとします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Qiita</title> </head> <body> <div id="hello">Hello World!</div> <script> document.querySelector('#hello').addEventListene
TypeScript + React JSX + CSS Modules で実現するタイプセーフなWeb開発 - Qiita
はじめに 以前、React JSX with TypeScript(1.6)にて書いたことがありますが、TypeScript 1.6以降ではReact JSXを直接コンパイルできるオプションが追加されています。 一般的にクライアントサイドWebアプリ開発は以下の3言語が土台ですが、 JavaScript HTML CSS TypeScriptのお陰で、1.と2.についてはタイプセーフな世界を手に入れたことになります(HTMLの要素名や属性名まで含めて、コンパイル時のチェックがされる) JavaScript -> TypeScript HTML -> React JSX(.tsx) CSS -> ??? こうなると、3. におけるCSSについても、何とかできんものかと期待するのが人情です。 今回のエントリは、CSS ModulesをTypeScript JSX環境に統合することで、タイプセー
Chrome 48: Cast への表示、カスタム通知ボタン、ネットワーク予測など
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
ハイパフォーマンスなWebを実現するasm.js／WebAssemblyとは――Mozillaのルーク・ワグナー氏に聞く
Mozilla主催のフロントエンド開発者のためのカンファレンス「ViewSource Conference」が、北米・オレゴン州ポートランドにて11月2～4日に開催された。セッションのみならず、次世代Webに関するディスカッションも実施された。WebAssemblyの開発を担当し、ディスカッションのホストを務めたMozillaのルーク・ワグナー氏に、WebAssemblyやasm.jsの開発の目的について聞いた。 聞き手：近藤佑子（編集部）、矢倉眞隆氏 協力：清水智公氏（Mozilla Japan）、浅井智也氏（同） ルーク・ワグナー（Luke Wagner）氏 WebAssemblyに関するディスカッション情報「Discussion: WebAssembly」 ルーク・ワグナー氏のブログ パフォーマンス向上の他、JavaScriptでできない機能を実現するWebAssembly ――ルー
msgpack-lite メモリコピーを防いで高速化した話 - Qiita
バイナリ形式の軽量なオブジェクトのシリアライズフォーマットである MessagePack（以下、msgpack）のエンコード・デコードを行う JavaScript ライブラリ msgpack-lite を2015年7月にリリースしました。node.js v0.10 から最新の v5.3、またブラウザも含めて幅広い環境で動作するのが特徴で、fluent-logger ライブラリも、msgpack に替えて msgpack-lite を採用しています。 以下では、msgpack を実装した際に注意したポイントを、２つご紹介します。 C++ よりも高速なピュア JavaScript 実装 本題に入る前に、ベンチマーク結果を更新しておいたので、ここに載せておきます。 最新バージョン msgpack-lite 0.1.14 の node.js v4.2.3 におけるベンチマーク結果です。 msgpa
JavaScriptフレームワークに対する、あるGoogle社員の争い | ReadWrite Japan
JavaScriptフレームワークに対する、あるGoogle社員の争い 開発者は楽になる、しかしそれはユーザーの負担と引き換えだ ソフトウェアの専門家マット・アサイは、JavaScriptフレームワークに対し次のように語った。 GoogleはモバイルWebを重視している。 だが、彼らはこれまでHTML5にあまりにも資金を投じてきておらず、今になってこれをカバーしようとしているところだ。 また、GoogleはインドのFlipkartの様な立ち位置が微妙なアプリをWebに引っ張り戻そうと、宗教的とも言える熱意を上げている。このことから、モバイルWebのパフォーマンス向上を劇的に向上しようとする意識についてはいうまでもない。 GoogleのモバイルWebへの関心は隠しようも無い中、これまでのモバイルWebアプリを形作ってきたJavaScriptフレームワークに対する彼らの姿勢を、我々は信じて
PayPal社がバックエンドをJavaからJavaScriptへ移行
あなたにとって重要なトピックや同僚の最新情報を入手しましょう最新の洞察とトレンドに関する最新情報を即座に受け取りましょう。 継続的な学習のために、無料のリソースに手軽にアクセスしましょうミニブック、トランスクリプト付き動画、およびトレーニング教材。 記事を保存して、いつでも読むことができます記事をブックマークして、準備ができたらいつでも読めます。
HTML6 でも CSS4 でもない Web 技術のゆくえ - WCAN 2015 Winter に登壇してきました
@kazumich さんにお声がけいただき、WCAN 2015 Winter でおよそ 60 分ほどのセッションを登壇してきました。32:9 のスクリーンがあるという、TED でもやるんかオイという特殊な環境でした。普段はプロジェクター的な投影なので、スクリーンの前に立つのが微妙なんですが、ここはディスプレイが壁面に大量に並んでいて自ら発光するので、部屋を暗くしなくてもテレビのように十分に見えますし前に立っても平気です。 一緒に登壇したのが @yhassy さんと @Hidehisa さんということもあり、近年まれに見る胃痛を伴う緊張を味わいながらお話させていだきました。（リアルにセッション終了後、1時間くらい胃痛がズキズキしてました） 技術的なお話でした 参加されたみなさま、メインセッションや LT に登壇された各位、ならびに運営されたスタッフの方々、ひとまずお疲れさまでございました。貴
Mozilla の開発した asm.js と WebGL が 1 つの到達点へ達しました：ゲームエンジンである Unity が WebGL によるゲームの完全サポートを開始しました | Mozilla Japan ブログ
[この記事は、米国 Mozilla の Future Releases Blog に掲載された "Mozilla-pioneered asm.js and WebGL achieve milestone as the Unity game engine provides full support for WebGL titles" の抄訳です] とても良いニュースがあります。長年のパートナーである Unity が WebGL への出力を Unity 5.3 から正式にサポートする、と本日アナウンスしました。この技術を利用したゲーム開発を完全にサポートするために、Unity とブラウザベンダーは半年以上にわたって質とパフォーマンスに関する問題の解決に努めてきました。この記事では、Web におけるゲームを実現するために行った、Mozilla のさまざまな活動についてご紹介します。それを一言でい
GhostDriverでWebアプリケーションのテストを高速化する - CODESCRIBBLE
Seleniumを使ったテストは遅いという話をよく聞きます。理由として考えられるのは以下の3つです。 テスト対象のWebアプリケーションが遅いため 遅いテストを書いているため 実際にWebブラウザを動かしているため 1つ目と2つ目は、環境やコードの書き方を変えることで改善可能です。しかし、3つ目はどうでしょうか。実際のブラウザを高速化することなど、そのブラウザの開発者でもない限り不可能です。となると、できることは、可能な限り高速なブラウザを選択することです。 PhantomJSはヘッドレスブラウザです。ヘッドレスブラウザというのはGUIのないブラウザのことで、GUIの描画処理を行わない分、通常のブラウザに比べて高速に動作するという特徴があります。そのため、時間が掛かりがちなWebアプリケーションのGUIテストを高速化するためのソリューションとして注目されています。また、マルチプラットフォー
さらに多くのことが変化する – Fluxは新しい”WndProc”である | POSTD
たまたま今まで知らなかったという方のために言いますと、ReactはWebプログラミングにおける最先端の新技術です。そのアイデアはシンプルです。それは、Reactの各コンポーネントは、JavaScriptにおいて、ビューを冪等（べきとう）に描画します。ビューは、コンポーネントが内部に保持している少量のステートのみに基づいてレンダリングされます。同じステートにすれば、その状態におけるコンポーネントは常に同じようにレンダリングされます。これは、データが変われば、Reactは その変更のみを ブラウザのDOMに適用できるということでもあり、ページ全体の再レンダリングを省略できます。実際、何かを変更するかどうかという決定は 全て 、コンポーネントの内部状態に完全に左右されます。それが、なぜReactが非常に早いのかという根本的な理由です。 しかし実際のところ、React自体には、変更をどのように 伝
Chrome開発者ツールの小技集 | POSTD
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
これはWebマーケティングの世界が変わるかも！Web Pushを導入してみた。
今年に入ってGoogleが「Webブラウザでもプッシュ通知できるようになる」という驚愕の発表をしました。 Push Notifications on the Open Web Webのプッシュ通知について プッシュ通知は、スマホアプリの世界ではもはや必須のマーケティング手法ですが、Webでは使うことができませんでした。 それがこの技術によって可能になった！･･･ということで、今までメールやリターゲティング広告を使っていた、Webマーケティングのユーザー呼び戻し手法がガラリと変わる可能性も大きいです。 そういうわけで、さっそくこのWeb Pushの開発を支援するツールがいくつか開発されているようです。 Roost bpush 技術的にはなかなか複雑で、まだWebの情報量も多くないので、こういうツールを使って進めてしまうのがお勧めです。 Growth Pushも実は対応していた ところで、シロ
ESLint 最初の一歩
We're excited to announce that ESLint v6.0.0 has been released: https://t.co/EO4ZrZIMYM — ESLint (@geteslint) 2019年6月22日 ESLint は JavaScript のための静的検証ツールです。コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。同様のツールとしては JSLint, JSHint 等があります。 ESLint の特色は、 すべての検証ルールを自由に on/off できる 自分のプロジェクトに合わせたカスタムルールを簡単に作れる 豊富なビルトイン ルール (5.0.0 時点で 260 個) に加えて、たくさんのプラグインが公開されている ECMAScript 2015 (ES6), 2016, 201
次世代Webカンファレンスのstandardizationで話してきた
te = @teppeis wada = @t_wada con = @constellation vv = @vvakame 今JavaScript書く時に何で書いてます? vv = TypeScript + Babel? con = C++ばかり書いて テストはJavaScriptで書いてるのでES6 te = 趣味はES6、仕事はIE8で動くように書いてる IE8は来年1月に終わる wada = 趣味はES6+Babel、仕事はIE8 ES6の印象 vv = hoistingとか面倒な問題が減った wada = Arrow Function、Template Stringなどが便利 IE8対応 IE8対応してるひと = 半分 Babel、BrowserifyとかデフォルトのターゲットはES5以上 予約語の問題とかES3だと動かないことがある stefanpenner/es3-safe
clipboard.js
Why Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework. That's why clipboard.js exists. Install You can get it on npm. npm install clipboard --save Or if you're not into package management, just download a ZIP file. Setup First, include the script locat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[WebRTC] new RTCPeerConnection()を何回も呼ぶとメモリリークする - Qiita![[WebRTC] new RTCPeerConnection()を何回も呼ぶとメモリリークする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/4effc5a39e3827e841aada93452354ce778fec46/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTA2NzYwJTJGcHJvZmlsZS1pbWFnZXMlMkYxNDczNzEwMDM1P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTI3NjczNjgwMTYxNjQ0M2FjMTg0NmQyYTMwY2Q0ZGM5%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Da20672cbe4ba9aa0bb37457861a3f85f%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCV2ViUlRDJTVEJTIwbmV3JTIwUlRDUGVlckNvbm5lY3Rpb24lMjglMjklRTMlODIlOTIlRTQlQkQlOTUlRTUlOUIlOUUlRTMlODIlODIlRTUlOTElQkMlRTMlODElQjYlRTMlODElQTglRTMlODMlQTElRTMlODMlQTIlRTMlODMlQUElRTMlODMlQUElRTMlODMlQkMlRTMlODIlQUYlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz0wZWMxMzdjZDM2Zjg5MTRlMzQ3ZWFjNGFmOTVmODAzMg%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBhbnFvb3FpZSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWRhNGM0OWVkMWE1MzMzMWU2YTYwYjMyZmQ3N2E1NjZh%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dad1753e7f73feb0beaa672741bfa7164)
A-Frame – Building Blocks for the VR Web
滅び行くAndroid 標準ブラウザをサポート外にして悩みの種をなくす話
