JavaScript

1/3ページ

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()よりもユーザー邪魔にならずに情報を表示することができます。 サンプルコード [crayon-5c422283 […]

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

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

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で幅の調整をさせてやらないといけませ […]

JSでスマホのジャイロセンサーを扱う

スマホのジャイロセンサーは、JSで簡単に取得することができます。 対応状況 スマホは、ほぼ対応していますが、iOSはiframe越しに使用できないので、CodePenなどのサイトでは動作しない点に注意が必要です。 ソースコード ジャイロセンサーの変化はdeviceorientationイベントで取得できます。ジャイロセンサーの値を取得後、何かしらイイ感じの処理を設計してあげましょう。 [crayo […]

最小構成のPWA

最小工数でPWAに対応する設定です。 HTML manifest.jsonの読み込み [crayon-5c42228365aaa466814807/] iOSが完全にPWAに対応していないので、iOS用の設定が必要です。 [crayon-5c42228365ab1749738723/] Service Workerに対応していれば、Service Workerを読み込む設定。 [crayon-5c […]

ポルポテストを作ってみた

ジョジョの奇妙な冒険は見たことなんですけど、Twitterで見かけてアイディアとして面白いと思ったので、自分でもポルポテストを作成してみました。 デモ こちらで動作確認できます。 See the Pen jojo-polpotest by mizusawa (@webty_mizusawa) on CodePen. ポルポテストの主な機能 ポルポテストの主な機能は、以下の4つがあげられます。これら […]

1 3