JavaScript

1/3ページ

JSで画像やCSVを保存させるのにクロスブラウザ実装で悩みたくない

JavaScriptで画像やCSVなどを生成してユーザーに保存させる際にIE・EdgeだとmsSaveOrOpenBlob(),Chromeはリンクタグをbodyにdownload属性付きのaタグを追加しなくてもいいがFirefoxは追加しないとならないし、iOSはセキュリティ対策で独自の仕様を取り入れていたりと各ブラウザ毎に様々な対応が必要となって完璧にクロスブラウザの実装するのは結構骨の折れる […]

脱jQueryにおすすめのJavaScriptライブラリ

脱jQueryにおすすめのjQueryレスなJavaScriptライブラリを紹介します。 autoComplete 入力中の内容から自動で候補となるテキストを表示してくれるライブラリ Github デモ Usage Choices.js セレクトボックス内に選択肢の検索機能を追加するSelect2ライクなライブラリです。jQueryを使わずにSelect2を導入したいときに役に立ちます。 Gith […]

Safariなどのmanifest.jsonに非対応ブラウザに

PWACompatは、manifest.jsonの対応していないブラウザをサポートすることができるGoogle製のライブラリです。 このライブラリを使用すれば、iOSのためにメタタグを羅列したり、スプラッシュスックリーン用の画像を準備する作業から開放されます。 デモ Google Developers デモサイト 実装方法 各ブラウザへの効果 iOS Safari apple-mobile-web […]

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ツールやサーバーサイドで行う方法がありますが、今回はエディタで自動圧縮する方法をご紹介したいと思います。 エディタで自動圧縮するメ […]

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

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

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

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

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

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

1 3