PWA（プログレッシブウェブアプリ） PWA（プログレッシブ・ウェブ・アプリ）をオフラインで表示する(Part1)
PWA（プログレッシブ・ウェブ・アプリ）をオフラインでも表示できるようにするためには、サービスワーカーを利用してアプリのリソースをキャッシュし、ネットワークに接続できない場合でもそのキャッシュを利用してアプリを表示するようにします。プロジェ...
2024-07
PWA（プログレッシブウェブアプリ） 
JavaScript(ジャバスクリプト) 【JavaScript】要素が下からふわっと表示するアニメーションを実装する方法｜Intersection Observer API
Webサイトのコンテンツをより魅力的にするために、アニメーションを使用するのは効果的です。今回は、JavaScriptとCSSを使用して、要素が画面に入ってきた時に下からふわっと表示されるアニメーションを実装する方法をご紹介します。HTML...
jQuery（ジェイクエリ） 【jQuery】外部リンクを無効化して内部リンク化する（すべてのアンカー要素の target 属性を空の文字列に変更する）
外部リンクを無効化して内部リンク化するためには、すべてのアンカー要素の href 属性を変更し、かつ target 属性を空の文字列に設定する必要があります。コード以下の例では、外部リンクを無効化するために、href 属性の値を # に変更...
AppSheet（アップシート） 【AppSheet】時刻の表示を「mm:ss」形式に替える方法
AppSheetで日付の表示を「mm:ss」の形式に切り替える方法は次のとおりです。データのカラム設定を変更するAppSheetアプリのエディタで、表示を変更したいテーブルに移動します。該当する日付フィールドのカラム設定にアクセスします。T...
JavaScript(ジャバスクリプト) 【JavaScript】リンクをクリックしたときにローディングアニメーションが表示されるようにしたい
ウェブサイトのユーザビリティを向上させる一つの方法として、ユーザーがリンクをクリックした際にローディングアニメーションを表示することがあります。これにより、ユーザーは次のページがロードされていることを認識でき、操作が反応していることが明確に...
JavaScript(ジャバスクリプト) 【JavaScript】ブラウザの戻るボタンと進むボタンを設定する
ブラウザの戻る・進むボタンをHTMLのボタンで表示し、画面の下部に固定したスマホ風UIを作成してみます。HTML部分以下のように実装します。<!-- ページコンテンツ --> <div class="navigation-buttons">...
GoogleSpreadsheet(スプレッドシート) Googleスプレッドシートで仕事・作業の業務効率化をする５つの活用方法
Googleスプレッドシートは多くの業務で活用できる汎用的なツールです。以下、具体的な活用事例の一例です。売上管理商品ごとの売上実績を記録し、グラフ化して視覚的に分析できる支店別や営業担当者別の売上を一覧で管理できる【商品別売上実績の記録と...
WordPress(ワードプレス) Google SpreadsheetとWordPressを連携できるSheets to WP Table Live SyncプラグインでWEBページにデータ表示する
Google SpreadsheetのデータをWordPressサイトに表示したい場合、「Sheets to WP Table Live Sync」プラグインがおすすめです。プラグインの主な機能【プラグインの主な機能】Google Spre...
