webpackで共通HTMLをテンプレート化
JavaScript 2020.08.07 kito 今回はwebpack導入から共通HTMLのテンプレート化を実装していきたいと思います。 webpackとは webpackとは、複数のモジュールを1つにまとめて出力することができる、モジュールバンドラのことです。 webpackを導入することによって jsファイル間での依存関係の解消 コード記述量の減少 サーバーへのリクエスト数の減少 などのメリットがあります。 ディレクトリの構成 今回はこちらのディレクトリ構成で進めて行きます。 dist/以下は、ビルドした後に生成されるファイルです。 webpack-sample/ ┗dist/ ┗bundle.js ┗html/ ┗index.html ┗sample.html ┗src/ ┗js/ ┗index.js ┗html/ ┗index.html ┗sample.html ┗common
モバイル向けWebページでiFrameを使用する際のスクロール問題 | infoScoop開発者ブログ
infoScoopをタブレット対応させる際に、iFrame絡みのクロスブラウザ対策でハマったので、そのあたりの対策について紹介したいと思います。 サポートブラウザ 今回サポート対象となったブラウザ（OS）は以下になります。 Safari（iOS） Android Browser（Android） IE（Windowsタブレット） DOCTYPE宣言 HTMLの記述の前に、まずはDOCTYPE宣言です。 以下はHTML5のDOCTYPE宣言になります。 <!DOCTYPE HTML> 現状では何も宣言しないとブラウザのレンダリングモードは互換モードが選択されます。 また、互換モードに比べて標準モードの場合は記述が厳格になることもあり表示速度の向上も期待できます。 なので、モバイル向けにWebページを作成する際にはHTML5のDOCTYPE宣言をするようにしましょう。 iOSのiFrameにお
Webサイトに必要なfaviconが21個になっていた - IT探検の追憶
久しぶりにWebサイトのfaviconを変えようと思い、調べてみると、必要なfaviconが大幅に増えていることがわかりました。 その数、何と21個！ そんなに増えていたとは。 一応、以下にリストアップしてみます。 faviconのリスト favicon.ico: IE用 favicon-16x16.png: タブ表示用 favicon-32x32.png: Mac版Safari用 favicon-96x96.png: Google TV用 favicon-160x160.png: Opera 12 までのスピード・ダイアル用 favicon-196x196.png: Android版Chrome用 mstile-70x70.png: Windows 8 用 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-31
网络加速—雷霆加速器
佛跳墙app安卓版 佛跳墙app安卓版 / 2024-08-27 06:57 坚果加速器吧 坚果加速器吧 / 2024-08-27 06:57 如何破解黑洞加速器 如何破解黑洞加速器 / 2024-08-27 06:57 starvip邀请 starvip邀请 / 2024-08-27 06:57 优途vp加速器ios 优途vp加速器ios / 2024-08-27 06:57 国内翻国外墙app 国内翻国外墙app / 2024-08-27 06:57 socket5客户端破解版 socket5客户端破解版 / 2024-08-27 06:57 网络加速器加速软件 网络加速器加速软件 / 2024-08-27 06:57 绿叶 破解版 绿叶 破解版 / 2024-08-27 06:57 浏览器怎么挂海外代理服务器 浏览器怎么挂海外代理服务器 / 2024-08-27 06:57
requestAnimationFrame ＜ よーしおまえらー、アニメーションにsetInterval使うなよー - くろまほうさいきょうでんせつ
より適切なものが追加されたのでそっちを使いましょう。 setInterval/setTimeout → requestAnimationFrame; これまでは setInterval function render(){ // アニメーション 1フレーム分の処理 } setInterval(render, 1000 / 60); これはもう古い。 これからは requestAnimationFrame function animationLoop(){ render(); requestAnimationFrame(animationLoop); } animationLoop(); こうすべし。 requestAnimationFrameにすると何がいいの？ 複数のアニメーション描写処理を一つにまとめて最適化してくれる 同じ用に動かしている物体A,Bの動きが次第にずれていくとかがなくな
iOS・Androidのハイライト表示の指定について。
今回は iOS・Androidのハイライト表示の設定について 紹介します。 （以下 iOS→iOSのMobile Safari、Android→Androidの標準ブラウザ） リンクをタッチした時に出る(iOSでは)影だったり、(Androidでは)枠。 その色が設定出来るんです。 今回はCSS３を使った方法とjsを使った方法を紹介したいと思います。 iOS・Androidのハイライト表示の設定について まず初めに。 今回CSS３とjsを使う方法を紹介しますが、iOSとAndroid同じ記述で同じ動きをするものはｊｓを使用するもの、のみになります。 CSS３を使用する方法では、iOSとAndroid別々の方法を紹介しています。 それでは。 CSS３を使ったハイライト表示の指定 まず、CSS３でハイライト表示の設定をするにはこの記述をします。 -webkit-tap-highlight-co
アンドロイド用画像保存禁止
画像保存禁止(Android) (control Contextmenu(Android)) ▼『head』用のコード <script type="text/javascript"><!-- addEventListener('touchstart', function(e) { if(.e.target.tagName == 'IMG') e.preventDefault(); }, false); // --></script> by JavaScript Note
これはすごい! フォーム最適化に役立つグーグル提案のautocomplete新仕様 | 初代編集長ブログ―安田英久
※2012-04-07 セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる（可能性を秘めた）、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html-webpack-plugin/examples/template-parameters/webpack.config.js at main · jantimon/html-webpack-plugin
TechCrunch | Startup and Technology News