WEB制作

1/7ページ

ES2015(ES6)をすべてのブラウザで使えるようにコンパルする

JSでletやconst、class構文などが使えるようになったES2015(ES6)ですが、IEなどの一部ブラウザでは、まだ対応されていません。 ES2015(ES6)対応状況 主要ブラウザで未対応なのは、IEぐらいですが、日本ではまだIEユーザーが多く存在するので、class構文など使用したい場合は、ES2015(ES6)がすべてのブラウザで使えるようにコンパルして上げる必要があります。 Ba […]

CSSとJSをAtomで自動的に圧縮する

こんにちわ、ライブラリとかを使用する際とかに「style.min.css」と言った圧縮されたファイルをよく見かけますよね。 「.min」は、minifyのことで改行やスペースなどの不要なものを削除してファイルを圧縮する手法のことです。 CSSやJSを圧縮するには、WEBツールやサーバーサイドで行う方法がありますが、今回はエディタで自動圧縮する方法をご紹介したいと思います。 エディタで自動圧縮するメ […]

PWA VS ネーティブアプリ

  • 2018.12.28

PWAとネーティブアプリについて、いい感じにプレゼンされている動画があったので、シェアしたいと思います。リスニングができなくても、パワポだけでおおよその内容は分かるかと思いますので、PWAに興味がある方は一度視聴されたら良いと思います。 ネーティブアプリのメリット ネーティブアプリがWEBに優っている項目は以下の3点です。 動作が速い 一貫したUIを オフラインでの動作 ネーティブアプリのデメリッ […]

危険なXSS対策

ネットで見かけたXSS対策 最近ネットで、次のようなコードでXSS対策を行なっているサイトを見かけました。 皆さんはこの実装を見てどう思いましたか? 正直、僕はゾッとしました。 今回は、一部サンプルコードなので、ごく一部のタグしか置換していませんが、 皆さんは全ての危険なタグを消去する完璧な正規表現を書く自信はありますか? 僕はないです。 仮に<scriptのような形で全てのタグを置換できた […]

なぜXSS対策が大事なのか?

最近ネットでは、XSS攻撃がし放題のSNS(?)があり話題となていますが、なぜXSS対策を怠ってはいけないのでしょうか? XSS攻撃とは XSS(クロスサイトスクリプティング) は、JavaScriptをサイト内に埋め込み、任意のコードを実行してユーザーを攻撃する手法です。 XSS対策を行っていないと任意のJSをサイト内に埋め込むことができてしまうので、ユーザーを任意のサイトに飛ばすだけではなく、 […]

Bootstrapで通知を表示するライブラリ【Bootstrap Notify】

Bootstrap Notifyは、Bootstrap製の通知用ライブラリです。画面四隅に加え画面真ん中下、真ん中上の計6カ所にBootstrapのalertを簡単に表示することができます。 DEMO Bootstrap Notifyは、AjaxなどのJSの処理の結果やエラーをalert()よりもユーザー邪魔にならずに情報を表示することができます。 サンプルコード [crayon-5c422198 […]

canvasを軽量な画像として保存する

canvasの保存は下記のようなコードで簡単に画像として保存できますが、 canvasを全画面での表示等を行っていた場合、 canvasの容量も大きくなり、保存する際にかなりのファイル容量になってしまい 場合によっては、保存に失敗することがあります。 これらの問題を解決するために保存する画像を軽量化しなくてはいけません。 [crayon-5c422198cb577935361839/] [cray […]

Pixi.jsの画像がSafariで上下反転する

Safariで画像が上下反転する canvasの画像をbase64として取得するtoDataURL()で画像を取得しようとするとSafari(iOS,MacOS)だけ取得した画像が上下反転してしまいます。 この問題はissuesにも投稿されており、app.view.toDataURL()ではなく、WebGL固有の問題らしくPixiのAPIapp.renderer.extract.base64()を […]

Djangoでページをキャッシュ化して爆速で表示するための設定

Djangoでページをキャッシュ化し、爆速でサイトを表示する方法です。 ページごとキャッシュするので、ブログやポータルサイトなどの静的なコンテンツ向きの設定になります。 1. settings.pyの設定 settings.pyに下記のコードを追加します。 settings.py [crayon-5c422198cbb8e021809975/] 「my_cache_table」は、キャッシュを保存 […]

ChromeとSafariでaudioタグを自動再生するための対策

以前までは、audioタグにautoplay属性を付与することで音声の自動再生が可能でしたが… [crayon-5c422198cc099737677680/] ChromeとSafariのメディア要素(<video>, <audio>)の自動再生におけるポリシーの変更され、下記のコードのようなclickイベントを使用しないとaudioタグの自動再生ができなくなりました。 […]

1 7