JavaScript

1/3ページ

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()を […]

Bootstrap4製のマテリアルデザインのダッシュボード

Material Dashboardは、MITライセンスのBootstrap4製マテリアルデザインのダッシュボード用フレームワークです。 Demo サイドメニューやカードデザインが主な機能ですが、一覧画面や詳細画面なども作成可能です。 もちろん、Bootstrapベースなので、Bootstrapを使った構築も可能です。 管理画面などにおしゃれなサイドメニューを使えるだけで激アドだと思いました。 使 […]

select2を画面サイズ変更に対応させる

Select2は、セレクトボックスで沢山の項目を表示するときにかなり便利にしてくれるライブラリで好きなのですが… 生成されたフォームが最初に読み込んだ時の幅で固定されてしまいます。 CSSでwidth: 100% !important;と指定してもいいんですが、これだと長めの項目が入ってきたときにはみ出してしまったりしてしまうので 画面がリサイズされたときにJSで幅の調整をさせてやらないといけませ […]

1 3