JavaScript– tag –
-
正規表現のグループ化で不特定の文字列を抽出する方法
正規表現で決まった文字列を検索・抽出するのはそんなに難しくないが、文字列が表示されるパターンは決まっていても、アルファベットや数字、日本語など、どのような文字列が入るかわからない場合に抽出する方法をご紹介します！今回はJavaScriptでの例で... -
Electronで公開中のWEBアプリをデスクトップアプリにする！
今回は、Electronというソフトを使い、HTMLやCSS、JavaScript等のWEB技術のみでWindowsやMacのデスクトップアプリが作れるというお話です。以前からそういった技術はあったようですが、知らなかったのは私だけ？中でも特に今回紹介したいのは、既に公開し... -
WordPressを高速化するプラグインとCSS・JavaScriptの見直し
前回ご紹介したPageSpeed Insightsの分析結果を受けて、WordPressを高速化したいと思います！ 課題に挙げた通り、WordPressを高速化するために、CSSやJavaScript、画像サイズの見直しを行いました。 WordPressを高速化するプラグインもご紹介しますので、... -
PageSpeed InsightsでWebページの読み込み時間を分析する
ページの読み込み時間には、SEOの観点からも非常に重要視されています。特に昨今では、スマホでWEBサイトを閲覧する機会が多くなっているため、利用者が待ち時間にイライラしたり、パケット代を気にするようにもなりました。まずは、自分のサイトの読み込... -
LaravelでSSE（Server Sent Events）を利用してサーバから通知する
皆さん、SSE（Server Sent Events）をご存知でしょうか？Node.jsが有名過ぎて隠れてしまっていますが、双方向通信が必要なく、サーバーからクライアントへ一方向通信するなら、SSEの方が断然簡単です！今回はそんなSSEをLaravelに導入したいと思います。 S... -
animate.css＋wow.jsで手軽にかっこいいスクロールエフェクトを！
近年のレスポンシブやフレキシブルデザインの流行と共に、すっかりお馴染みとなったanimate.cssとwow.jsの組み合わせ。スクロールする度にコンテンツがアニメーション付きで表示される手法です。しかもそのアニメーションはFlashや動画を使わず、CSSのみで... -
iOSにも対応したService Workerを使ってPWAの基礎を学ぶ
やっと、iOS 11.4（Safari 11.1）からPWA（Progressive Web Apps）に対応しました！簡単に何ができるかと言うと、WEBアプリをオフラインでも動作するネイティブアプリのように振る舞うことができるようになりました。これを利用すると、Appleに開発者の年... -
Web開発者必見！iMacrosでブラウザの操作を自動化する
Web開発者として、避けては通れない試験を如何に早く楽に、そして確実に行うかは永遠の課題です。例えば、会員登録フォームを試験するとしましょう。名前や住所、電話番号やメールアドレスなど、たくさんの入力項目を毎回入力するのはかなりの手間です。か... -
画像を自由にトリミングできるjQueryプラグイン「Cropper」
よくWEBサービスで、プロフィールなどを作成する際にアバター画像をアップロードすることがありますが、親切なサイトだとその場でトリミング（切り抜き）ができることもあります。いつもは利用する側なのですが、今回は作る側として画像を加工できるjQuery... -
JavaScriptで画像アップロード時にサムネイルを表示させる方法
<input type="file">で画像をアップロードする際、特に複数ある場合にサムネイルがないと、正直何をアップロードしようとしているのか確認できません。そこで、JavaScriptとWeb APIのFileReaderオブジェクトを使用して、画像をBase64エンコードして...