2021年10月20日(水) 10時47分03秒 [ソフト開発]

Apple、Google、Microsoftの各アプリストアで自作アプリを公開するのにかかる費用

強気料金のApple、良心的料金のGoogle、自由なMicrosoft

モバイルOS向けに何らかのアプリを配布するには、そのOSのアプリストアに登録する必要があります。Google（Android）の場合には抜け道の配布方法も用意されていますが、Apple（iOS）の場合には今のところAppStoreを使う以外にありません。
PC用ソフトウェアの場合には自サイトでもどこでも公開し放題ですが、Windowsの場合はMicrosoftストアも用意されてはいます。必ずしもそれを利用する必要性はありませんが、モバイルOSに慣れた人々なら「まずはMicrosoftストアで探す」という行動を取るかもしれませんね。Windows11ではモダンアプリ以外のソフトウェアにもMicrosoftストアが開放されるので、Microsoftストアで配布されるソフトも増えるかもしれません。

さて、これらのアプリストアに自作アプリを登録するのには多少の費用が掛かります。
毎年継続して一定額が必要な場合もあれば、最初に1回限りの登録料を払うだけで永久登録になる場合もあります。

以下にそれぞれのアプリストアに自作のフリーソフト（無料アプリ）を個人で登録できるようにしようと思った際の、2021年10月現在の費用をまとめてみました。（※有料アプリを販売する場合や、アプリ内で課金する場合には別途価格に応じた手数料が徴収されますが、その辺については触れていません。AppleやGoogleの30％はさすがに高すぎるということでいろいろ訴訟になっていましたね。）

▼iOS（Apple）：AppStore

iOS用アプリを作って公開するためには、Apple公式のApp Storeに登録する以外に方法がありません。App Storeに自作アプリを登録するためには、Apple Developer Programに年額12,800円(米国だと99ドル)の年間登録料を支払い続ける必要があります。気軽にちょっと登録してみようかなとは思いにくい強気な額ですね。年額ではなく最初の1度限りの費用だったらまだ良いのですけども、年額です。（後述するGoogle Play StoreもMicrosoft Storeも「1度限りの支払いで永久登録」な仕組みです。）

➡Apple Developer Program：12,800円（税込）

……せめてあと1桁低くなりませんかね？^^;
この額が毎年継続して必要になるのは、個人だと結構な負担だと思います。
あと、法人ではなく個人で登録する場合、正式な個人名がApp Storeで販売元として表示されると書かれています。ニックネーム等だとダメなようですね。

なお、これはiOSやiPad OS向けのアプリの話であって、macOS用ソフトの場合にはアプリストアを経由する必要はありません。

▼Android（Google）：Google Play Store

Android用アプリを作って公開するには、Google公式のGoogle Play Storeに登録する方法が主でしょう。最初にGoogle Play デベロッパー アカウントの開設費用は掛かりますが、1度限りの支払いで永久登録なので更新料は要りません。額も25ドル（2,800円弱？）なので特に高くはありませんね。

➡Play Console（Google Play デベロッパー アカウント）：25ドル

日本円での価格が書かれていなかったのですけども、1ドル110円で換算すると2,750円ですね。（これを書いている今は、1ドル114円なので2,850円ですが。）
最初に1回払うだけで永久登録なので、その点では良心的と言えそうです。
Google Play Storeを経由せずに配布する方法も認められてはいますが、この額なら（無料アプリを公開するだけなら）素直に公式ストア経由で配布すれば良さそうに感じます。何らかの理由で登録申請がリジェクトされるなら別ですけども。

▼Windows（Microsoft）：Microsoftストア

Windows用ソフトの場合は、そもそもMicrosoftの公式ストアを経由せずに自サイトで配布する手がありますし、基本的にはその方が一般的なので、費用を掛けずに配布することは元々可能です。自サイトを使わなくても、フリーソフトを配布してくれる第三者サイトはいろいろありますし。

そもそもWindows11が出るまではMicrosoftストアで配布できるのはUWP(ユニバーサルWindowsプラットフォーム)アプリだけでした。今後はMicrosoftストア内でx86アプリ等も配布できるようになるようなので、幅広いソフトウェアの配布に使えるプラットフォームになるっぽいです。
モバイル端末でアプリストアを利用する形態に慣れていれば、Windows用ソフトの場合でも「ソフトウェアをアプリストアから探す」という形態を先に思いつく人も多くなるかも知れません。

Microsoftストアに自作ソフトを登録するために必要な、Windowsデベロッパーセンターへの個人の登録料は1,847円です。1回限りの支払いで永久登録なので、更新料は要りません。

➡Windowsデベロッパーセンター：1,847円
（開発者アカウント各国の登録料一覧）

アメリカドルだと19ドルですが、日本円でも価格が設定されていて、1,847円でした。（法人だと9,800円。US$だと99ドル）
Microsoftは1ドル97～98円で計算する方針なのでしょうか？^^;

Windows用ソフトを配布するのにMicrosoftストアを使う必要性はあまりありませんが、この額で永久登録なら、まあ登録していても良いかな、とも思えます。

自サイトがあればそこで配布すれば良いとは思いますが、ソフトウェアを配布するためだけにサイトを開設するくらいならストアに登録した方が安上がりですね。もっとも、無料で使えるWebサーバもありますが。ただ最近だと、無料サーバに置かれているソフトウェアをダウンロードして実行したいとはあまり思われない気もしますけども。ストア上では詳しい説明はできないので、たとえストア上で配布するにしても、やはり紹介用の自サイトはあった方が望ましい気もします。

▼Android（Amazon）：Amazon Appstore

Androidアプリでも、Amazon Appstore for Androidなら登録料はゼロなようです。
Fire OSの動作するKindle端末ではなく、Android端末から使うためにはAndroid端末側で「不明なアプリのインストール」を許可するような事前設定が必要ですが。

➡Amazon App Store 開発者コンソール：無料

これまでならAmazon Appstoreにアプリを登録しようと考える人はそんなに居なかっただろうと思うのですけども、Amazon Appstoreに登録したAndroidアプリがそのままWindows11でも動作するようになる(可能性がある)となると、今後の登録数は大きく増加するのかもしれません。これを書いている今の時点でのWindows11（最初のリリース時点）ではまだAndroidアプリは動作しませんけども。今後のアップデートで動作可能になるようです。

Microsoftは「Windows11上で動作するAndroidアプリ用ストア」はAmazon以外にも増やすっぽいことを言っているようですけども、他にどこがあるでしょうかね……？ Win11以降で正式にサポートし続けるのなら、Microsoft自身がMicrosoftストア for Androidとかを用意しても良さそうな気もしますが。

毎年費用が継続して必要なのはAppleだけ

というわけで、
Appleの場合は毎年継続して登録料が必要です。Googleの場合は登録料は必要なものの1回限りで済み永久登録です。Microsoftの場合も登録したければ1回限りの支払いで永久登録ですが、そもそもストアを経由しなくても配布できます。Amazonは無料です。

※どのストアでも、有料ソフトやアプリ内課金を使う際には、価格に応じた手数料が別途徴収されます。ただし、アプリ内課金の場合は（ストア側の決済システムを使わずに）別途自前で決済システムを用意できればストア側に手数料を払う必要はないのですけども。Appleの場合は、そのストア決済を回避する仕組みを許しておらず（電子書籍や音楽配信などではストア外での決済も許されてはいましたが、その際に「ストア外で決済できる」旨をアプリ内に表示することは禁止していました）、そのことから訴訟を受けたり、独占禁止法違反を調査されたりしていました。後者についてはApple側が折れて認める方向になるっぽいです。ただし、電子書籍や動画・音楽配信分野のみですが。ゲームやその他のアプリでストア外決済が認められるようになるかどうかは、Epicとの訴訟の結果次第でしょうかね？

メジャーなOS向けのアプリストアのうち、Appleだけがめちゃくちゃ強気の料金形態ですね。桁が違いますし。iOS向けに無料アプリだけを公開しようとすると（＝有料アプリによる収益がなければ）毎年12,800円の負担が掛かり続けるので結構しんどい気がします。
その分、強固に中身をチェックしているので利用者に安全を提供している（だから費用が掛かる）というのがAppleの主張のようですけども。しかし、それによってAppleは（アプリが増えることで）自社製品の魅力向上に繋げて売り上げを増やす効果を得ているわけですからね……。もっとも、「アタリショック（＝クソゲーが増えすぎて市場が崩壊する現象）みたいなことにしたくない」という考えでアプリの数を制限したい意図もあるのかも知れませんが。しかし、そこはサジェスト機能とか評価値によるランキング機能でカバーできそうな気もするのですけどもね。

今のところ、私はWindows用フリーソフトだけを配布しています。x86ソフトも登録可能になればMicrosoftストアに登録しても良いと思わなくもないのですけども、もはや継続開発していない古いソフトばかりなので、今更登録するのもな……という気もしています。
Android用アプリを作ることがあったらGoogle Play Store等に登録しても良いと思うのですけども、ネタがないので何も作っていません。(^_^;)

2021年10月 3日(日) 14時11分03秒 [Web関連]

ページ上端に戻るボタンや、下端に進むボタンの簡単な作り方

ページの上端に戻ったり下端へ進んだりする固定配置ボタンを作る方法

ボタンを押すと、スムーズなスクロールアニメーションでWebページの上端に戻ったり下端へ進んだりするリンクボタンを簡単に作るHTML＋JavaScript＋CSSソースを紹介します。HTMLとJavaScriptソースは短い1行だけで済み、jQuery等は不要です。

ページ内リンクのリンク先へスムーズなアニメーションを伴ってスクロールさせるだけならCSSのscroll-behaviorプロパティを使って、html { scroll-behavior: smooth; }みたいに1行を書いておけばJavaScriptを使わなくても済むのですけども、その場合はリンク先の要素に何らかのid属性を加えて「ページ内リンクのリンク先」を作っておく必要がありますし（上端に戻る場合だけは例外ですが）、そのページ内のあらゆるページ内リンクが一括して対象になってしまう副作用や、URLの末尾に「#bottom」のようなアンカー名(ハッシュ文字列)が付いてしまう副作用もあります。JavaScriptを使えば、そういう「リンク先」が用意されていなくても「ページ内の座標」を指定してスクロールができるので（この場合には）楽な気がしますし、ページ内に存在する他のページ内リンクの動作には影響しませんし、URLの末尾には何も付きません。

というわけで、JavaScriptを併用して「ページの上端へ戻る」ボタンや「ページの下端へ進む」ボタンを作る方法を紹介します。
JavaScriptを併用すると言っても記述はとても簡単で、ボタン装飾用のCSSを含めても数行のソースを書くだけで作れます。

《目次》

• ページの上端にスムーズスクロールで戻るボタンの作り方
• ページの下端にスムーズスクロールで進むボタンの作り方
• ページ上端に戻るボタンと、ページ下端に進むボタンの両方を掲載する場合
• ボタンっぽく見えるよう装飾する方法

なお、macOS版SafariではVer.14以降、iOS版SafariではVer 14.7以降でないとスムーズにスクロールしてくれません。しかし、その場合でも移動自体は可能なので、上端や下端へ移動するボタンとしては機能します。

ページの上端にスムーズスクロールで戻るボタンの作り方

まず、ページの上端に戻るのはとても簡単です。要は、そのページ内の座標(0,0)へ移動すれば良いので、JavaScriptのwindow.scrollToメソッドに座標 top:0, left:0 を指定して、スムーズにスクロールするように behavior: 'smooth' を加えるだけです。
このJavaScriptを、リンク(a要素)のclickイベントで呼び出せば良いでしょう。

なので、ページ上端へ戻るリンクを作るHTML＋JavaScriptソースとしては、以下の1行だけで済みます。

<a href="#" onclick="window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); return false;">ページ上端へ戻る</a>

この記述で指定座標へスムーズにスクロールしてくれます。, behavior: 'smooth' の部分を消せば一瞬で移動します。
本来のa要素の動きを抑制するために、最後にreturn false;を書くのを忘れないで下さい。
表示例は以下の通りです。クリックすると実際に動作します。（注：既にページの上端が見えている状況では、押しても動きません。少しスクロールしてから試して下さい。）

とても簡単に作れますが、上記のソースだけだと「ただのテキストリンク」にしか見えません。
CSSを使ってボタンっぽく見せる方法は後述します。

ページの下端にスムーズスクロールで進むボタンの作り方

ページの下端にサイトマップ的なテキストリンクが用意されているとか、ページの下端に何らかの重要なナビゲーション機能があるなどの場合は、ページの下端へ一気に進むボタンも用意されていると便利かもしれません。特にモバイル端末だと、下端へ一気にスクロールするUIはブラウザ側に用意されていなさそうですし。

ページの上端なら座標が(0,0)なので簡単ですが、ページの下端の座標はそのページによって異なります。とはいえ、大きすぎる値を指定しておけばスクロールは下端で止まってくれますから、9999999(ピクセル)みたいな充分大きな値を指定しておくのが楽な気がします。

したがって、ページ下端へ進むリンクを作るHTML＋JavaScriptソースとしては、以下の1行だけで済みます。

<a href="#" onclick="window.scrollTo({ top: 9999999, left: 0, behavior: 'smooth' }); return false;">ページ下端へ進む</a>

しかし、9999999のような大きすぎる値を指定するのは邪道だ！ともし思うのなら、body要素の高さを取得して、それを使えば良いかもしれません。
body要素の高さは document.getElementsByTagName('body')[0].clientHeight で分かりますから、これをwindow.scrollToメソッドの引数に指定すると良いでしょう。
その場合は、以下のようなソースになります。

<a href="#" onclick="window.scrollTo({ top: document.getElementsByTagName('body')[0].clientHeight, left: 0, behavior: 'smooth' }); return false;">ページ下端へ進む</a>

どちらにせよ簡単に作れますね。

※ただ、body要素の高さはbody要素全体の読み込みが完了するまで判明しませんから、ページの読み込みが終わらないうちにボタンを押されるとうまく動かないかも知れません。たいていは問題ないと思いますが、よほどサイズ不定の画像をたくさん読み込んでいるページだとか、「読み込み完了前」と「読み込み完了後」とでページ下端の座標が大きく異なってしまうページの場合には、別途フッタ部分にidを割り振っておいて、getElementByIdでその座標を取得して、そこへ移動するよう書いた方が良い場合もありそうな気はします。ただ、フッタ部分にidを割り振る手間を掛けられるのならCSSのscroll-behaviorプロパティを使った方が楽なのではないか、とか、9999999ピクセルのような「充分に大きな値」を指定しておく方法で妥協する方が楽なのではないか、とも思いますけどもね。(笑)

表示例は以下の通りです。クリックすると実際に動作します。

上記のソースだけだと、先程と同じように「ただのテキストリンク」にしか見えません。
CSSを使ってボタンっぽく見せる方法は後述します。

ページ上端に戻るボタンと、ページ下端に進むボタンの両方を掲載する場合

「ページ上端に戻るボタン」と「ページ下端に進むボタン」の両方を掲載する場合や、どちらかまたは両方のボタンを複数個掲載する場合は、（単に先程紹介したソースをそのまま何度も書くのでも良いのですが）スクリプト部分を独立してscript要素に記述しておく方が記述総量が少なくて良いかもしれません。例えば下記のようにです。

<script>
   function scrollbtn( scpos ) {
      window.scrollTo({ top: scpos, left: 0, behavior: 'smooth' });
   }
</script>
<a href="#" onclick="scrollbtn(0); return false;">ページ上端へ戻る</a>
<a href="#" onclick="scrollbtn(9999999); return false;">ページ下端へ進む</a>

上記のソースでは、window.scrollToメソッドを使ってスクロールする部分を独立したscript要素の中に書いておいて、リンク(ボタン)を作るa要素ではその関数を呼び出すだけにしています。関数の引数にはスクロール先の座標を指定するようにしています。これだと、ボタンをたくさん掲載する場合でも同じスクリプトを何度も書く必要がなくなって、ちょっと短く済むでしょう。script要素は、head要素の中やbody要素の最初の方など、「ボタンを作るHTMLソース」が現れる位置よりも前に記述しておきます。

ボタンっぽく見えるよう装飾する方法

さて、これまでのソースでは単なるテキストリンクにしか見えませんので、スクロールするボタンらしく見えるようにHTMLを追記した上で、CSSで装飾をしてみます。
この辺は好みの問題なので、いくらでも作りようがありますから、下記のソースはあくまでも例の1つですけども。

まず、HTML＋JavaScript部分のソースは、以下のように書きます。

<script>
   function scrollbtn( scpos ) {
      window.scrollTo({ top: scpos, left: 0, behavior: 'smooth' });
   }
</script>
<div class="scrollBtns">
   <a href="#" onclick="scrollbtn(0); return false;"><span class="label">上端へ</span><span class="arrow">▲</span></a>
   <a href="#" onclick="scrollbtn(9999999); return false;"><span class="arrow">▼</span><span class="label">下端へ</span></a>
</div>

先程のソースから行数が増えていますが、JavaScriptソース部分は何も変わっていません。HTML部分は、

• CSSで装飾するためにclass名を割り振った
• ボタンのラベルとして、記号「▲」と文字「上端へ」または「下端へ」の2つを掲載した

……という部分の分量が増えただけです。

次に、CSSで装飾を加えます。
ソースが長そうに見えますが、それはそれぞれの意味をソースの右側にコメントの形で書いたためです。実際には各プロパティを1行ずつ繋げて書けば、6行程度で済みます。

<style type="text/css">
   /* ▼配置 */
   .scrollBtns {
      position: fixed; /* ボタンを画面内の指定位置に固定表示する */
      bottom: 1em;     /* 画面の下端から1文字分の距離 */
      right: 1em;      /* 画面の右端から1文字分の距離 */
      max-width: 3em;  /* 最大幅：3文字分 */
   }
   /* ▼ボタンの装飾 */
   .scrollBtns a {
      display: block;         /* ブロック化(全体をクリック可能にするため) */
      margin: 3px 0;          /* 外側の余白：上下→左右 */
      padding: 0.4em 0.3em;   /* 内側の余白：上下→左右 */
      color: white;           /* 文字色：白色 */
      background-color: blue; /* 背景色：青色 */
      border-radius: 12px;    /* 角を丸くする：半径12ピクセルで */
      opacity: 0.6;           /* 半透明にする(＝不透明度60％／つまり背後が40％透けて見える) */
      line-height: 1;         /* 行の高さを詰める */
      text-decoration: none;  /* リンクの下線を付けない */
      text-align: center;     /* 文字をセンタリングする */
   }
   /* ▼マウスが載ったときの装飾変更 */
   .scrollBtns a:hover {
      background-color: red;  /* 背景色：赤色 */
   }
   /* ▼矢印記号 */
   .arrow  { display:block; font-size:1.5em; }  /* 1.5文字分の大きさ */
   /* ▼ラベル */
   .label { display:block; font-size:0.67em; } /* 0.67文字分の大きさ */
</style>

配置やサイズを微調整したい場合は、太字のところだけを好きなように書き換えて下さい。（いや、もちろん太字でないところも好きなように書き換えて頂いて良いのですけども。：笑）

コンテンツの末尾に「上端に戻る」リンクを用意したいだけなら、このように（画面に対しては）固定せずに、ただ普通のリンクボタンとして本文中に掲載しておく形でも良いでしょうね。

なお、ここで作った「上端へ戻る／下端へ進む」ボタンは、拙作のフリーCGI「てがろぐ」の設定画面で表示するために作ったものです。下図のような感じで画面右下に常に固定表示されるボタンになっています。

以上、ページの上端に戻ったり下端へ進んだりするボタンを作る方法でした。

参考：CSSのscroll-behaviorプロパティを使ってスムーズにスクロールさせる方法

HTMLで任意の要素にid属性を使ってid名を割り振っておけば、a要素でページ内リンクが作れます。例えば、<h1 id="maintitle">～</h1>のような要素があるなら、<a href="#maintitle">～</a>のようにリンクを書いておけば、h1要素へ移動するページ内リンクになります。

このとき、そのページ内リンクをスムーズなスクロール動作で移動させたいなら、単にCSSでhtml { scroll-behavior: smooth; }と書いておけば良いだけです（※リンクを作るa要素に指定するわけではない点に注意）。わざわざJavaScriptを使う必要はありません。

ただ、この場合には移動先の要素にid属性値が割り振られている必要がありますし（でなければリンク先の位置を示せませんから）、ページ内のすべての「ページ内リンク」が対象になります。
今回の解説で紹介したソースのようにJavaScriptを使えば、このような「リンク先位置」を事前に用意しておかなくても済みますし、ページ内に存在する他のページ内リンクには影響しません。