JumborinProject https://d31ng0gsvjvi0o.cloudfront.net Welcome to Jumborin Project Site Tue, 28 Apr 2026 23:00:54 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://d31ng0gsvjvi0o.cloudfront.net/wp-content/uploads/2022/02/cropped-JumborinProjectLogo-32x32.png JumborinProject https://d31ng0gsvjvi0o.cloudfront.net 32 32 Linuxサーバ保守時にやっておくと便利な設定(Bash編) https://d31ng0gsvjvi0o.cloudfront.net/2026/01/30/779 Thu, 29 Jan 2026 23:00:00 +0000 https://d31ng0gsvjvi0o.cloudfront.net/?p=779 導入

RHELやAmazonLinuxなどのLinuxサーバのメンテナンス作業を行う際に、事前に仕込んでおくだけでトラブル対応力が大きく変わる設定があります。今回はその中でも、地味ながら効果の大きい
「コマンド履歴にタイムスタンプ(年月日時分秒)を残す設定」を整理しました。

設定内容

コマンド履歴の年月日時分秒がわかるようにする。

概要

メンテナンス中に障害が発生した場合、調査で最も重要なのは以下です。

  • 「いつ」何をしたのか
  • 「どの操作」がトリガーになったのか

しかしデフォルトのBash履歴(history)は、時刻情報を持たないため、「このコマンド、いつ実行したっけ?」という状況に陥りがちです。

そこで、Bashの履歴機能(.bash_history)に対して設定を追加し、実行日時を記録するようにします。

これにより、ログ(/var/log系)との突き合わせや時系列分析が一気に楽になります。

設定手順

  1. viコマンドで「.bashrc」を編集
    • vi ~/.bashrc
  2. 以下の設定を記述
    • export HISTSIZE=500000
    • export HISTFILESIZE=500000
    • export HISTCONTROL=””
    • shopt -s histappend
    • export HISTTIMEFORMAT=’%F %T ‘
  3. sourceコマンドで「.bashrc」を読み込む。
    • source ~/.bashrc
  4. viコマンドで「.bash_logout」を編集
    • vi ~/.bash_logout
  5. 以下の設定を記述
    • history -a

確認手順

  1. 「history」コマンドを実行し、実行コマンドの履歴を時系列で出力
    • history

実運用でのメリット

この設定が効いてくるのは、以下のような場面です。

  • 障害発生時の原因調査(ログとの突き合わせ)
  • 複数人運用時の操作トレース
  • 作業証跡の簡易ログ代替
  • 「あの時何やった?」問題の解消

特に本番環境では、「ログ × コマンド履歴(時刻付き)」の組み合わせが、調査速度を大きく左右します。

まとめ

事前に設定しておくことで、安心のメンテナンス作業を行いましょう。

]]>
テレビ局の売上をまとめてみた https://d31ng0gsvjvi0o.cloudfront.net/2025/12/31/772 Tue, 30 Dec 2025 23:00:00 +0000 https://d31ng0gsvjvi0o.cloudfront.net/?p=772 導入

2025年末を迎えたこのタイミングで、主要テレビ局の売上高を改めて整理しました。
放送業界は広告収入の変動や配信サービスの台頭など、大きな構造変化の渦中にあります。

まずは各社の売上高を横並びで確認し、現在のポジションを定量的に把握します。

売上高(2025年3月期・連結)

テレビ局保有会社売上高(百万円)備考
フジ・メディア・ホールディングス(4676)550,7612025/3連
日本テレビホールディングス(9404)461,9152025/3連
TBSホールディングス(9401)406,7002025/3連
テレビ朝日ホールディングス(9409)324,0562025/3連
テレビ東京ホールディングス(9413)155,8372025/3連
NHK612,5002024年度(令和6年度)決算・事業収入

まとめ

売上規模は以下の順となりました。

  • フジHD > 日テレHD > TBS HD > テレ朝HD > テレ東HD

NHKは受信料を主な財源とする特殊な事業構造のため単純比較はできませんが、規模感としては民放最大のフジHDを上回っています。

こうして見ると、民放各社の規模感やポジションの違いが改めて浮き彫りになります。
今後は売上高だけでなく、利益構造やコンテンツ戦略の違いにも注目していきたいところです。

]]>
Redmineのアンカーリンクでの画面遷移時の表示不具合の原因と対策 https://d31ng0gsvjvi0o.cloudfront.net/2025/10/01/749 Tue, 30 Sep 2025 23:00:00 +0000 https://d31ng0gsvjvi0o.cloudfront.net/?p=749 導入

RedmineのWikiを運用していると、アンカーリンクの遷移位置がズレるという現象に遭遇することがあります。
特に、画像を多用したナレッジページでは再現しやすく、「リンク先に飛んだはずなのに少し下にズレている」という違和感が発生します。

本記事では、この現象の原因と、実務で取り得る対策を整理します。

環境

Redmine:5.0.0~6.1.0(執筆時点最新)

用語の定義

アンカーリンク:見出しなど、ページ内の特定位置へジャンプするリンク

遅延表示:画面表示時にすべての画像を読み込まず、必要になったタイミングで読み込むことで、初期表示速度を向上させる技術

概要

RedmineのWikiでは、見出しごとに自動でアンカーリンクが生成されます。
しかし、遷移先より上部に画像が配置されている場合、別ページからアンカーリンクで遷移すると表示位置がズレることがあります。

原因

Redmine 5.0.0以降では、埋め込み画像に対して loading=”lazy” が付与されるようになりました。

その結果、以下の順序で処理が進みます。

  1. ページ読み込み時点では画像の高さが確定していない。
  2. ブラウザがアンカー位置までスクロールする。
  3. その後、画像が読み込まれてレイアウトが再計算される。
  4. 結果として、表示位置が下方向にズレる。
  5. 詳細は以下のサイトをご参照ください。

対策

対策法1:Wiki管理者が可能な対策

方法①:imgタグを直接記述する

Wiki記法(![]())を使わず、画像添付後にパスを取得し、HTMLで記述します。

<img src="/attachments/.../image.png">

これにより loading=”lazy” が付与されず、従来通りの挙動になります。

方法②:画像サイズを明示する

マクロでサイズ指定を行い、レイアウトを事前確定させます。

{{thumbnail(image.png, size=300, title=Thumbnail)}}

この方法は、「遅延読み込みは維持しつつズレを抑える」バランス型になります。

対策法2:サーバ管理者が可能な対策

方法③:Wiki記法を定義している以下を修正してRedmineを再起動する。

Rubyファイルを編集します。この対応は確実ですが、アップデート時の差分管理が必要になる点は注意が必要になります。

  • スクリプトファイル:
app/helpers/application_helper.rb
  • 対象メソッド:
def parse_inline_attachments(text, project, obj, attr, only_path, options)
  • 対象行:
src=\"#{image_url}\"#{title_and_alt_attrs} loading=\"lazy\"#{other_attrs}
  • 対応内容:loading=\”lazy\”を削除する、lazyをeagerに書き換える等

まとめ

RedmineのWikiはナレッジ蓄積の中核になりやすいため、アンカーリンクの信頼性は意外と重要なUX要素です。

初期表示速度とのトレードオフではありますが、用途に応じて適切にチューニングする必要があります。

原因と対策を知ることにより、ユーザが対応することも可能となりますので、本記事が役に立つと嬉しいです。

]]>
Visual Studio Code(VSCode) × Amazon Q Developerで次世代コーディングを始めよう! https://d31ng0gsvjvi0o.cloudfront.net/2025/08/07/724 Wed, 06 Aug 2025 23:00:00 +0000 https://d31ng0gsvjvi0o.cloudfront.net/?p=724 導入

生成AIの進化が加速する中、コーディングAIを活用しない開発は、生産性の観点で明確に不利になりつつあります。
特に個人開発や小規模プロジェクトでは、「無料でどこまで使えるか」が重要な判断軸になります。

本記事では、無料で利用可能なコーディング支援AIである Amazon Q Developer を、Visual Studio Code(VSCode)上で利用するためのセットアップ手順を、実際の検証環境ベースで整理します。

環境

  • 試行日
    • 2025/08/07
  • Visual Studio Code(VSCode)
    • バージョン: 1.102.3 (user setup)
    • コミット: 488a1f239235055e34e673291fb8d8c810886f81
    • 日付: 2025-07-29T03:00:23.339Z
    • Electron: 35.6.0
    • ElectronBuildId: 11847422
    • Chromium: 134.0.6998.205
    • Node.js: 22.15.1
    • V8: 13.4.114.21-electron.0
    • OS: Windows_NT x64 10.0.26100
  • AWS Toolkit
    • バージョン: 3.71.0
    • バージョン: 2025-08-06

前提条件・注意事項

  • Amazon Q Developerは現時点で個人利用に限り無料
  • AmazonQはデスクトップ版のVisual Studio Code(VSCode)でしか利用できない。
  • 2024/04/30より、Amazon CodeWhispererはAmazon Q Developerの一部として統合。

Visual Studio Code(VSCode)のインストール

以下の公式サイトからデスクトップ版をダウンロードしてインストールします。

Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio C...

Visual Studio Code(VSCode)の日本語化

  1. 拡張機能で「Japanese Language Pack for Visual Studio Code」をインストール
  2. Ctrl + Shift + P を押下
  3. 「display」と入力し、「Configure Display Language」を選択
  4. 「日本語」を選択
  5. 再起動

AWS Toolkitの導入~Amazon Q Developerの導入

  1. VSCodeを起動
  2. 拡張機能(Extensions)から「AWS Toolkit」をインストール
  3. 左側のAWSアイコンをクリック
  4. 「Amazon Q」タブを選択
  5. 「AMAZON Q: LOGIN」を選択
  6. 「Choose a sign-in option」で Personal account を選択
  7. 「Continue」をクリック
  8. 「Open」を選択してブラウザを起動
  9. AWS Builders ID でログイン
  10. アクセス許可を承認

まとめ

現状、Amazon Qの右クリックメニューが英語のままなので、コマンドを選択すると回答も英語になってしまいます。その場合は、「コード以外は日本語でお願いします。」とチャットを入れると、日本語で回答してくれるようになります。

]]>
Wi-Fiルータの主要メーカー比較 https://d31ng0gsvjvi0o.cloudfront.net/2025/06/10/708 Mon, 09 Jun 2025 23:00:00 +0000 https://d31ng0gsvjvi0o.cloudfront.net/?p=708 導入

速度向上やセキュリティの観点から、定期的に買い換えたいWi-Fiルータについて、主要メーカーを調べてみました。Wi-Fiルータは通信する上で、全ての情報が通る場所なので、通信情報を提供してもよいメーカーかの判断にも使っていただければと思います。また、同じメーカーだと簡単に設定内容を移行できますので、メーカーを決めて、新しい製品に買い替えるのもありですね。

メーカー一覧

主要メーカーは以下になります。(2025/12時点)

会社名株式コード国産/海外主要製品シリーズJC-STAR 適合HWサポート期間SWサポート期間
バッファロー(BUFFALO)6676国産AirStation★1(レベル1)製造終了から原則3年間製造終了日から5年間、または、商品の最長保守年数のうち、いずれか長い期間
日本電気株式会社(NEC)6701国産Aterm★1(レベル1)販売終了から約3年間明示なし
エレコム(ELECOM)6750国産生産終了後 最長5年明示なし
エイスース(ASUS)日本未上場海外(台湾)ROG Rapture購入日から最長2年間明示なし
アイ・オー・データ(IODATA)日本未上場国産生産終了(販売終了)してから5年を目途に終了明示なし
NETGEAR日本未上場海外(米国)Orbi、Nighthawk少なくとも3年間(または法律で要求される場合はそれ以上)製造されていない場合同左
ティーピーリンク(TP-Link)日本未上場海外(中国)Archer3年または制限付き生涯保証明示なし
ファーウェイ(HUAWEI)日本未上場海外(中国)明示なし明示なし

参考サイト

まとめ

比較表の項目だと、バッファロー(BUFFALO)と日本電気株式会社(NEC)が一歩先を行っているような形になりました。JC-STAR の制度は2025年に始まったばかりですので、これから他の企業も登録していく可能性はありますので、参考サイトから最新の情報をご参照ください。また、セキュリティが必要のない環境では安価で高性能なWi-Fiルーターを利用するといったように用途によって使い分ける方法もあるかもしれません。よく調べて、安全で快適なインターネット環境を構築しましょう。

]]>
USB・Thunderboltの規格 https://d31ng0gsvjvi0o.cloudfront.net/2025/05/27/703 Tue, 27 May 2025 14:34:00 +0000 https://d31ng0gsvjvi0o.cloudfront.net/?p=703 導入

同じような端子なのに色々な種類があり、新しい規格が誕生していっているため、わかりにくいUSBの規格について調査してみました。

用語の説明

USB:Universal Serial Busの頭文字を取ったもので、電源供給やデータ転送や映像出力等ができるものがあり、パソコンの周辺機器の接続や充電などに利用されます。

Thunderbolt:インテルとAppleが開発した「高速データ転送」や「高解像度映像出力」を可能にする通信規格です。Thunderbolt3以降では、USB Type-C (タイプC) コネクタが採用されています。稲妻マークが目印です。

USBの規格

USBとThunderboltのバージョンごとの仕様とケーブルの相場を以下にまとめました。

規格最大データ転送速度電力供給ケーブルの相場価格
USB 2.0480Mbps最大2.5W約¥500〜¥1,500
USB 3.0 / 3.1 Gen 15Gbps最大4.5W約¥1,000〜¥3,000
USB 3.1 Gen 210Gbps最大100W約¥1,500〜¥4,000
USB 3.220Gbps(Gen 2×2)最大100W約¥2,000〜¥5,000
USB440Gbps最大240W(PD 3.1 EPR)約¥3,000〜¥7,000
Thunderbolt 340Gbps最大100W約¥3,500〜¥8,000
Thunderbolt 440Gbps最大100W約¥4,000〜¥10,000
Thunderbolt 580Gbps(最大120Gbps)最大240W(PD 3.1 EPR)約¥6,000〜¥15,000

まとめ

より性能が高い規格の製品を利用した方が効率的ではありますが、予算との相談でオーバースペックになりすぎないように見極めていきましょう。ドッキングステーションへの接続等、大量のデータを転送する場合は、性能の高い規格の製品を購入しましょう。

]]>
証券サイトへの不正アクセス防止のための対策 https://d31ng0gsvjvi0o.cloudfront.net/2025/05/07/697 Tue, 06 May 2025 23:00:00 +0000 https://d31ng0gsvjvi0o.cloudfront.net/?p=697 導入

最近急増している証券サイトへの不正アクセス防止のためにすぐにでもできる対策をまとめました。フィッシング詐欺が原因とも言われていますが、証券サイトにアクセスしていない人も不正アクセスの被害にあっていることからフィッシング詐欺以外のセキュリティリスクが原因の可能性も高いです。勝手に資産を売買されてしまうのはとても怖いので、対策ができていない方は今日から対策をするつもりでご覧ください。

大前提

多要素認証(二要素認証)を設定しておくことで、パスワードが流出したとしてもワンタイムパスワードで不正アクセスを防止できることがあります。設定可能な限り、必ず設定しておきましょう。

ハニーポット対策

自宅のネットワークやキャリアのネットワーク等、信用のおけるネットワークを利用することで通信中の情報を盗まれることを防止できます。公衆無線LANや建物共有のアクセスポイント等を利用して会員サイトにログインすることは避けましょう。

ゼロデイ攻撃対策

OS(Windows11)やセキュリティソフト(Windowsセキュリティやウイルスバスター等)やブラウザ(EdgeやChrome等)のバージョンを最新にすることで、既知の脆弱性を狙った端末への不正アクセスを防止できます。毎日最新のバージョンにアップデートしてから利用するようにしましょう。当然サポートが切れている製品(Windows7、Internet Explorer等)を利用するのはやめましょう。

キーロガー対策

ウイルスチェックを毎日実施することで、端末内に仕込まれたマルウェアからパスワード等が流出することを防止できます。毎日夜間や食事中等に実行するようにしておきましょう。

フィッシング対策

ブックマーク済みのブラウザまたは証券会社の専用アプリからアクセスすることで、フィッシングサイトに誘導されることを防止できます。メールやSNSのリンクからアクセスすることは避けましょう。

ショルダーハック対策

カメラがなく、周囲(特に背後)に人がいない場所でサイトにログインをすることで、入力時のパスワードを盗み見られることを防止できます。周囲(特に背後)に人がいる状態で、サイトにログインすることは避けましょう。

辞書攻撃対策

パスワードの使いまわしを避け、個別のパスワードを利用することで、他サイトから流出したパスワードを利用した不正アクセスを防止できます。パスワード管理ツールを利用する、パスワードの命名規則を決めておくことで対策できます。

パスワードクラッキング対策

大文字小文字数字を混ぜた12桁以上のパスワードを設定することで、サーバ側に不正アクセスされたとしてもパスワードを解析されることを防ぐことができます。記号を含められる場合は含めましょう。

まとめ

証券サイト管理者の内部犯行や証券サイト側に不正アクセスされてしまった場合はどうしようもないですが、利用者個人でできる対策がたくさんありますね。現代ではオンラインサイトの利用は、生活と切り離せないため、本記事に記載した対策をして、安全に利用しましょう。

]]>
新NISA(2024年)初心者向けおすすめ投資先まとめ https://d31ng0gsvjvi0o.cloudfront.net/2025/01/09/667 Wed, 08 Jan 2025 23:00:00 +0000 https://d31ng0gsvjvi0o.cloudfront.net/?p=667 導入

2024年から新しくなるNISAの枠で、初心者におすすめの投資先をまとめました。
毎年上限ギリギリまで投資するのは難しいですが、日本円で銀行預金だけしていると、インフレや物価上昇で資産価値が目減りします。だからこそ、無理のない範囲で投資を始めることが大切です。資金に余裕がある方は、ぜひチャレンジしてみてください。
※投資は自己責任でお願いします。

前提条件

前提条件として以下を想定しています。

  • 短期利益狙いではなく、数十年単位の長期投資を前提。
  • 年間の積立投資枠120万円、成長投資枠240万円を使い切れる20代後半〜40代の社会人を想定。
  • 投資初心者で、自分に合う投資がまだわからない方。
  • 投資前に以下の資金が確保されていることを想定。
    • すぐに使える生活費:1~2ヶ月分(現金や普通預金など)
    • 緊急用の生活防衛資金:6ヶ月分(普通預金や定期預金など)
    • 突発的な支出に備えた余裕資金あり

ポートフォリオ(積立投資枠)

おすすめ投資法

積立投資枠120万円/年は、毎月約10万円の積立が目安です。
積立投資は投資信託で「ドルコスト平均法」を活用し、インデックス投資を行うのが効果的です。

具体的には、以下の2つの投資信託がおすすめです。

全世界株(MSCIオール・カントリー・ワールド・インデックス連動):5万円/月

米国株(S&P500連動):5万円/月

米国株(S&P500)インデックス投資の理由

  1. 世界中で事業展開する企業が多く、一部だけ大きく負けるリスクが低いです。
  2. 米国の法整備がしっかりしており、政治的要因による大暴落が起きにくいです。
  3. 過去の株価は長期で右肩上がり、暴落時も回復しているため、安心して保有できる。

全世界株(MSCIオール・カントリー・ワールド・インデックス)インデックス投資の理由

  1. どの国が今後発展するかわからないため、世界中に分散投資しておくことが合理的です。
  2. 米国株も大きく含まれているため、安定成長を享受しやすいです。

具体的な投資信託例

  • S&P500連動:eMAXIS Slim 米国株式(S&P500)
  • 全世界株連動:eMAXIS Slim 全世界株式(オール・カントリー)

ポートフォリオ(成長投資枠)

おすすめ投資法

成長投資枠は年間240万円。積立投資枠と同じ投資法を続けても良いですが、投資力アップのため、次の2つを試すのもおすすめです。

  1. 配当ありインデックス投資(ETF利用)
    • 配当金を得ながら投資ができるため、貯めた後の資金活用がしやすいです。
    • 例:MAXIS全世界株式(2559)
  2. 株主優待投資・高配当株投資
    • 少額から始めやすく、株主優待が楽しめます。
    • 高配当株はリスクもあるので、初心者は優待のある銘柄から挑戦するのが無難です。
    • 例:
      • 日本マクドナルドHLDG(2702)100株
      • コジマ(7513)100株
      • KDDI(9433)100株

投資を始める前に知っておきたい用語

  • ドルコスト平均法
  • ノーロード
  • インデックス投資(パッシブ投資)
  • 権利落ち日

まとめ

新NISAの枠を上手に活用し、色々な投資方法を体験することで、自分に合った投資法を見つけられます。

合う方法が見つかればそれに集中しても良し、引き続き分散投資を続けても良し。大事なのは長期で無理なく続けることです。

]]>
RIZAPグループ(2928)の株主優待 https://d31ng0gsvjvi0o.cloudfront.net/2024/12/09/660 Sun, 08 Dec 2024 23:00:00 +0000 https://d31ng0gsvjvi0o.cloudfront.net/?p=660 導入

結果にコミットするで有名なRIZAPやコンビニジムで有名なchocoZAPを展開しているRIZAPグループ(2928)ですが、株主優待が毎年変わっているため、まとめてみました。3月末が基準日ですが、特別優待も実施されているようです。

株主優待

所有株式数2024年3月末2023年3月末2022年3月末2021年3月末2020年3月末
100株以上chocoZAP6カ月半額chocoZAP2カ月無料特別優待券 5,000 円分優待ポイント 2,000優待ポイント 2,000
200株以上chocoZAP6カ月無料chocoZAP2カ月無料特別優待券 5,000 円分優待ポイント 4,000優待ポイント 4,000
400株以上chocoZAP1年無料
+特別優待券5,000円分
+優待ポイント10,000
優待ポイント 10,000優待ポイント 10,000優待ポイント 6,000優待ポイント 6,000
800株以上chocoZAP1年無料×計2名
+特別優待券10,000円分
+優待ポイント14,000
優待ポイント 14,000優待ポイント 14,000優待ポイント 12,000優待ポイント 12,000
1,600株以上chocoZAP1年無料×計2名
+特別優待券10,000円分
+優待ポイント24,000
優待ポイント 24,000優待ポイント 24,000優待ポイント 24,000優待ポイント 24,000
2,400株以上chocoZAP1年無料×計2名
+特別優待券10,000円分
+優待ポイント30,000
優待ポイント 30,000優待ポイント 30,000優待ポイント 30,000優待ポイント 30,000
4,000株以上chocoZAP1年無料×計2名
+特別優待券10,000円分
+優待ポイント36,000
優待ポイント 36,000優待ポイント 36,000優待ポイント 36,000優待ポイント 36,000
8,000株以上chocoZAP1年無料×計2名
+特別優待券10,000円分
+優待ポイント72,000
優待ポイント 72,000優待ポイント 72,000優待ポイント 72,000優待ポイント 72,000
16,000株以上chocoZAP1年無料×計2名
+特別優待券10,000円分
+優待ポイント144,000
優待ポイント 144,000優待ポイント 144,000優待ポイント 144,000優待ポイント 144,000

2022年12月と2023年9月には特別優待として、chocoZAP3ヵ月無料が実施されたようです。

まとめ

chocoZAPを利用していたり定期的に運動している人やプロテインを定期的に購入している方にはとても良い株主優待です。株主になって、運動&プロテインで健康になりましょう。

]]>
MPAとSPAの特徴と選定指針 https://d31ng0gsvjvi0o.cloudfront.net/2024/11/07/650 Wed, 06 Nov 2024 23:00:00 +0000 https://d31ng0gsvjvi0o.cloudfront.net/?p=650 導入

近年は、Webアプリケーションの開発時にアーキテクチャとして「MPA(Multi-Page Application)」と「SPA(Single-Page Application)」が選択肢になります。本記事では、MPAとSPAの違いや特徴を詳しく解説し、どちらを選ぶべきかの指針を提供したいと思います。

MPAとは

MPAは「Multi-Page Application」の略で、その名の通り「複数ページを持つアプリケーション」を指します。一般的には、ユーザがあるページから別のページに移動すると、その都度サーバにリクエストが送られ、新しいHTMLページがサーバから返ってくる仕組みです。

  • 特徴
    • ページごとにURLが異なる:各ページが独自のURLを持ち、URLの構造でサイト全体の階層が分かりやすくなります。
    • サーバ依存が強い:クライアント側での処理が少なく、サーバからHTMLを毎回受け取るため、サーバ側でのリソース負荷がかかります。
    • SEOに強い:各ページが独立しているため、検索エンジンのクロールに適しており、SEO効果を得やすい。

SPAとは

SPAは「Single-Page Application」の略で、単一のページで完結するアプリケーションを指します。JavaScriptフレームワーク(例:React、Vue、Angularなど)を活用し、クライアント側での動的なコンテンツ更新を行います。

  • 特徴
    • URLは基本的に1つ:ユーザーがアプリ内を移動しても、ページのリロードは行わずに必要なデータだけをサーバーから取得し、動的にコンテンツを変更します。
    • クライアント依存:サーバーからデータのみを受け取り、画面の更新はクライアント側で行います。
    • 高い操作性:ページ遷移を感じさせないシームレスなユーザ体験が提供可能です。
    • 頻繁な改修:JavaScriptフレームワークは比較的にサポート期間が短めであるため、頻繁な改修が必要となります。

SPAとMPAの比較

特徴MPASPA
SEO難易度〇:簡単△:難しい(工夫が必要)
パフォーマンス△:リロードが頻繁なため遅い〇:リロードが少なくスムーズ
初期ロード時間〇:速い△:遅い
開発複雑度〇:簡単×:複雑
クライアント側とサーバ側をそれぞれ別の言語やフレームワークで開発が必要
利用シーンコーポレートサイト、ブログ等Webアプリケーション、ダッシュボード等
サポート期限〇:長め×:短め

SPAの選定指針

  • 前提条件
    • アプリケーションの改修が頻繁。
    • リリースを頻繁に行うための仕組みが整っている。
    • 一見さんの利用が少なく、基幹システムやSNSといった、じっくりと利用するユーザが多いシステムである。
    • 技術者が調達できる。
  • 選定理由
    • 多少高くなっても、高い操作性が必要である。
    • 頻繁に利用するユーザ(固定ユーザ)を作りたい。

まとめ

MPAとSPAにはそれぞれ明確な特徴と利点があります。選択する際には、サイトやアプリの目的やユーザのニーズを理解し、それに最適なアプローチを選ぶことが大切です。MPAとSPAの特性を活かし、ユーザに最適な体験を提供しましょう。

]]>