JavaScript

テクノロジー

正規表現のグループ化で不特定の文字列を抽出する方法

正規表現で決まった文字列を検索・抽出するのはそんなに難しくないが、文字列が表示されるパターンは決まっていても、アルファベットや数字、日本語など、どのような文字列が入るかわからない場合に抽出する方法をご紹介します!今回はJavaScript...
テクノロジー

Electronで公開中のWEBアプリをデスクトップアプリにする!

今回は、Electronというソフトを使い、HTMLやCSS、JavaScript等のWEB技術のみでWindowsやMacのデスクトップアプリが作れるというお話です。以前からそういった技術はあったようですが、知らなかったのは私だけ?中で...
テクノロジー

WordPressを高速化するプラグインとCSS・JavaScriptの見直し

前回ご紹介したPageSpeed Insightsの分析結果を受けて、WordPressを高速化したいと思います! 課題に挙げた通り、WordPressを高速化するために、CSSやJavaScript、画像サイズの見直しを行いました。 W...
テクノロジー

PageSpeed InsightsでWebページの読み込み時間を分析する

ページの読み込み時間には、SEOの観点からも非常に重要視されています。特に昨今では、スマホでWEBサイトを閲覧する機会が多くなっているため、利用者が待ち時間にイライラしたり、パケット代を気にするようにもなりました。まずは、自分のサイトの読...
テクノロジー

LaravelでSSE(Server Sent Events)を利用してサーバから通知する

皆さん、SSE(Server Sent Events)をご存知でしょうか?Node.jsが有名過ぎて隠れてしまっていますが、双方向通信が必要なく、サーバーからクライアントへ一方向通信するなら、SSEの方が断然簡単です!今回はそんなSSEを...
テクノロジー

animate.css+wow.jsで手軽にかっこいいスクロールエフェクトを!

近年のレスポンシブやフレキシブルデザインの流行と共に、すっかりお馴染みとなったanimate.cssとwow.jsの組み合わせ。 スクロールする度にコンテンツがアニメーション付きで表示される手法です。 しかもそのアニメーションはFlashや...
テクノロジー

iOSにも対応したService Workerを使ってPWAの基礎を学ぶ

やっと、iOS 11.4(Safari 11.1)からPWA(Progressive Web Apps)に対応しました!簡単に何ができるかと言うと、WEBアプリをオフラインでも動作するネイティブアプリのように振る舞うことができるようになり...
テクノロジー

Web開発者必見!iMacrosでブラウザの操作を自動化する

Web開発者として、避けては通れない試験を如何に早く楽に、そして確実に行うかは永遠の課題です。 例えば、会員登録フォームを試験するとしましょう。 名前や住所、電話番号やメールアドレスなど、たくさんの入力項目を毎回入力するのはかなりの手間です...
テクノロジー

画像を自由にトリミングできるjQueryプラグイン「Cropper」

よくWEBサービスで、プロフィールなどを作成する際にアバター画像をアップロードすることがあります。その時に、そのサイトが指定する幅や高さに合わせるために、縦横比を合わせて強制的にカットする場合もありますが、親切なサイトだとその場でトリミン...
テクノロジー

JavaScriptで画像アップロード時にサムネイルを表示させる方法

<input type="file">で画像をアップロードする際、特に複数ある場合にファイル名だけでは、正直何をアップロードしようとしているのか確認できません。そこで、JavaScriptとWeb APIのFileReader...
タイトルとURLをコピーしました