2021年2月

「シンプル」かつ「便利」HTML5

phpによるバックエンド実装を中心としてきたエンジニアです。

久しく触れていなかったフロントエンド実装において、今更ではありますがHTML5に触れる機会が最近ありました。

HTML5に触れてみての印象は「シンプル」かつ「便利」です。

今回は、特に印象的だったタグについて備忘録も兼ねて記しておきたいと思います。

1. アコーディオン実装(<details><summary>)

これまでアコーディオンはjQuery及びCSS等で実装するものと考えていましたが、<details><summary>で簡単に実装ができました。

デフォルトで矢印の開閉もつけてくれるので、見易さも担保してくれ便利です。

例えば、よくある質問等のQ&Aをアコーディオンで実装する際、<details><summary>を使えば以下のように実装ができる。

<div class="qes-container">

    <section class="qes-and-ans">

        <h2 class="cmn-title">よくある質問</h2>

        <div class="cmn-cont">     

            <details>

                <summary><span class="qes">Q. ○○○とは何ですか?</span></summary>

                <span class="ans">A. △△△となります</span>

            </details>

        </div>

    </section>

</div>

もし、矢印が要らない場合などは

<style type="text/css">

    summary.icon-none{display: block;}

    summary.icon-none::-webkit-details-marker {display: none;}

</style>

などといったスタイルを追加すれば良い。

また、初めからアコーディオンが開いた状態としたい場合は、<details open> と指定すれば良い。

一方、jQueryで実装した場合は

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

<script>

    $(function () {

        $(".qes").click(function () {

            $(".qes").not(this).next().slideUp();

            $(this).next().slideToggle();

        });

    });

</script>

<div class="qes-container">

    <section class="qes-and-ans">

        <h2 class="cmn-title">よくある質問</h2>

        <div class="cmn-cont">

            <span class="qes">Q. ○○○とは何ですか?</span>

            <div class="ans-content" style="display: none;">

                <span class="ans">A. △△△となります</span>

            </div>

        </div>

    </section>

</div>

のようになる。

実際の表示を比較してみよう。「よくある質問」の上がHTML5、下がjQueryで実装した場合となる。

また、それぞれQ.~部分を押下すると右のように開閉する。

HTML5では開閉の矢印がデフォルトで入るが、こちらでは実装をする必要がある。

HTML5であれば、<details><summary>だけでシンプルに実装することができるので非常に楽だ。

2. カレンダー実装(<input type="date">)

日付等の検索や指定のフロント実装にてDatepickerを使用することが多かったが、

HTML5では<input type="date">を指定するだけで実装が可能だ。

<div class="date-container">

    <section class="date-calendar">

        <h2 class="cmn-title">年月日</h2>

        <div class="cmn-cont">     

            <input type="date" id="date_from" name="date_from">

            <input type="time" id="time_from" name="time_from">

        </div>

    </section>

</div>

実装後のUIも直感的でわかりやすい。

時刻等を指定したい場合は、<input type="time">を使えば良い。こちらも時計のアイコンを出してくれたりと分かりやすい。

開閉の矢印がデフォルトで入るが、こちらでは実装をする必要がある。

一方、Datepickerで実装した場合は

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script>

    $('#datepicker').datepicker({dateFormat: 'yy / mm / dd',});

    $(function () {

        $("#datepicker").datepicker();

    });

</script>

<div class="date-container">

    <section class="date-calendar">

        <h2 class="cmn-title">年月日</h2>

        <div class="cmn-cont">     

            <input type="text" id="datepicker" name="date_from">

        </div>

    </section>

</div>

実際の表示を比較してみよう。上がHTML5、下がDatepickerで実装した場合となる。

こちらついても、HTML5での実装で十分そうだ。

そして何よりも楽だ。ライブラリを読み込む必要もなく実装ができる。

3. まとめ

今回、実際にHTML5に触れてみて特に印象的だったのはこの1.と2.で使用したタグであったが、

他にも動画再生の<video>や、サジェスト機能を追加してくれる<datalist>など便利なものが多々ある。

昨年終了となったflashの代替案としての有力候補でもあったHTML5。

今更ながらではあるが、今回業務にてその便利さについて気付かされた。

改めて今後も効率よく活用していきたい。

2016/09/19

iOSアプリを申請してみた

未経験から入社し、1年半が経った社員です。
今回プライベートで、iOSアプリを申請してみたので、
ストア配信までの流れを記載したいと思います。
アプリの作成前に、ストアをiOSかAndroidに悩む人も多いはず。
なぜ、僕はiOSにしたのか。
日本では、iPhoneの人口が多いこと、
どうせ、両方配信するなら、審査の厳しいiOSからにしようと思ったからです。
本日は、iOSの申請の厳しさを書いていきたいと思います。

1.申請したアプリの種類

友達から、マッチングアプリで知り合った人と結婚したと2件報告がありました。
気になって調べてみると、マッチング系は個性豊かなアプリが多いと知り、興味を持ち、2020年8月、マッチングアプリの企画を始めました。
アプリの企画から申請までの流れは、以下のようになっています。
・企画:8月
・開発:9月~11月
・申請:12月

2.アプリの申請

2020年12月中旬に、 1度目の申請。
当たり前のようにリジェクト。
初めてのAppleからのリジェクトが、以下の2つ

Guideline 2.3.3 - Performance - Accurate Metadata
We noticed that your screenshots do not sufficiently show your app in use. Specifically, your screenshots do not display the actual app in use.
To help users understand your app’s functionality and value, your screenshots should highlight your app's core concept. For example, a gaming app should feature screenshots that capture actual gameplay within the app.
Next Steps
Please revise your screenshots to ensure that they accurately reflect the app in use on the supported devices.
Keep in mind the following requirements: - Marketing or promotional materials that do not reflect the UI of the app are not appropriate for screenshots.
- The majority of the screenshots should highlight your app's main features and functionality.
- Confirm that your app looks and behaves identically in all languages and on all supported devices.
- Make sure that the screenshots show your app in use on the correct device. For example, iPhone screenshots should be taken on iPhone, not on iPad. Resources
- To learn more about creating great screenshots for the App Store, see Optimizing Your App Store Product Page.
- To learn more about uploading screenshots, see App Store Connect Help.Please see attached screenshots for details.

Guideline 5.0 - Legal
Recently, the Chinese Ministry of Industry and Information Technology (MIIT) requested that CallKit functionality be deactivated in all apps available on the China App Store.
During our review, we found that your app currently includes CallKit functionality and has China listed as an available territory in App Store Connect.
Next Steps
This app cannot be approved with CallKit functionality active in China. Please make the appropriate changes and resubmit this app for review.
If you have already ensured that CallKit functionality is not active in China, you may reply to this message in Resolution Center to confirm.
Voice over Internet Protocol (VoIP) call functionality continues to be allowed but can no longer take advantage of CallKit’s intuitive look and feel. CallKit can continue to be used in apps outside of China.
Please see attached screenshots for details.

記事を調べてみると、Appleの申請は、指摘まで時間がかかるということでしたが、数年前に審査員を増やしたそうで、2日くらいで返ってきました。
2つだけかと思い、修正して、再申請。
また2つリジェクトが来ました。
内容は以下。

Guideline 2.1 - Information Needed
We're looking forward to completing our review of your app. Before we can continue, we need a video that demonstrates the current version in use on a physical iOS device.
Keep these requirements in mind as you make your demo video:
- Only use footage of your app running on a physical iOS device, not on a simulator.
- Make sure the video clearly documents all relevant app features, services, and user permission requests.
- You can use a screen recorder to capture footage of your app in use.
- Background mode audio
Next Steps
Create the demo video, add a link to the video in the App Review Information section of your app’s page in App Store Connect, and reply to this message in Resolution Center.
To add the video link:
- Sign in to App Store Connect.
- Click on My Apps.- Select your app.
- Click on the app version on the left side of the screen.
- Scroll down to App Review Information.
- Provide the demo video link and any necessary access details in the Notes section.
- Click the Save button at the top of the Version Information page.
Please note that if your app can only be reviewed with a demo video, you’ll need to provide an updated demo video for every app submission.
Resources
To learn more about providing information to App Store Review in App Store Connect, see App Store Connect Help.

Guideline 5.1.1 - Legal - Privacy - Data Collection and Storage
We noticed that your app requests the user’s consent to access the camera and microphone, but doesn’t sufficiently explain the use of the camera and microphone in the purpose string.
To help users make informed decisions about how their data is used, all permission request alerts need to specify how your app will use the requested information.
Next Steps
Please revise the relevant purpose string in your app’s Info.plist file to specify why your app needs access to the user's camera and microphone. Make sure the purpose string includes an example of how the user's data will be used.
You can modify your app's Info.plist file using the property list editor in Xcode.
Resources
- See examples of helpful, informative purpose strings.
- Review a list of relevant property list keys.
Please see attached screenshots for details.

つまり、指摘はMAX2つしか来ないので、実際裏にあといくつあるのか分からないという恐怖があります。この辺りで、精神がやられてきます。
でも、負けじと修正して再申請。
また2つの指摘がきて、再申請...を繰り返し、
指摘が1つに減りました!

Guideline 1.2 - Safety - User Generated Content
Your app enables the display of user-generated content but does not have the proper precautions in place.
Next Steps
To resolve this issue, please revise your app to implement all of the following precautions:
- A mechanism for users to flag objectionable content
In order to confirm above, please submit a screenshot or video of the reporting feature currently available within the app. This feature should be available to all users to report objectionable content to you, so that you can take appropriate actions on the content and users who submitted the objectionable content.
Since your App Store Connect status is Metadata Rejected, we do NOT require a new binary. To revise the metadata, visit App Store Connect to select your app and revise the desired metadata values. Once you’ve completed all changes, reply to this message in Resolution Center and we will continue the review.

実は、Appleからの指摘には、対応して再申請するだけでなく、アピールができます。
アピールします。
すると、アピールに返信が。

Hello,
Thank you for providing this information.
We will continue the review, and we will notify you if there are any further issues.
Best regards,
App Store Review

ステータスが、申請可になりました!
この時点で、2020年12月31日。
こうして、年内に配信開始となりました。

3.既存バグの修正と追加機能の申請

申請で大分疲れましたが、配信ができたことで、1つ大きな山を超えたなという気持ちで、正直、既存バグの修正、追加機能の申請は楽と思っていました。
実は、これが地獄の始まり。
既存バグの修正、追加機能に関しては、指摘がありませんでした。
が、まさかの承認済みの配信しているアプリに、指摘が。

Guideline 3.1.1 - Business - Payments - In-App Purchase
We noticed that your app is using consumable in-app purchase products as intermediary currency for the exchange of items that function as non-renewing subscriptions.
Next Steps
To resolve this issue, please delete your consumable in-app purchase products, then create separate non-renewing subscription in-app purchase products for each item that the user would have exchanged those consumable products for. This product type matches the usage model for the products you are ultimately selling to your users.
Note: The product type cannot be changed once an in-app purchase product has been created. Therefore, you will need to create a new in-app purchase product with the correct product type.
To create new in-app purchases:
- Log in to App Store Connect
- Click on "My Apps"
- Select your app
- Click on "Features" to create new in-app purchases
- Click Save
- Once you've completed all changes, click the "Submit for Review" button at the top of the App Version Information page.
Resources
More information on in-app purchase product types is available in App Store Connect Help.
Please see attached screenshot for details.

「We noticed that ...」訳:私達は、気づいてしまった。
指摘の内容は、「アプリ内でポイントを購入して、そのポイントでサービスを買うのは仮想通貨扱いになりますよ」とのこと。
金銭に関わる部分の指摘は、恐怖です。
ユーザーに今回の指摘のサービスを購入されてしまったらと思うと、かなり精神的にきます。
急いで修正して、再申請。
今回は1つの指摘なので、これが通れば終わりかと思っていました。
しかし、指摘が2つ来ました。
そこから現在まで、指摘->修正、再申請->...を7回続けています。
そして、極め付けは、恐怖の「4.3 スパム」また「4.3 リジェクト」と呼ばれる指摘。

Guideline 4.3 - Design - Spam
Your app primarily features dating features. As such, it duplicates the content and functionality of many other similar apps currently available on the App Store.
While these app features may be useful, informative or entertaining, we simply have enough of these types of apps on the App Store, and they are considered a form of spam.
Next Steps
We encourage you to review your app concept and incorporate different content and features that are in compliance with the App Store Review Guidelines.

調べていると、指摘の中で厳しい順位では、堂々の第2位!
第1位は、「4.2 リジェクト」。
これは、要約すると、「このアプリ、ダメだね」という内容です。
細かい指摘は無しで、何を修正、追加したら良いのか不明のリジェクトのようです。
今回、僕が指摘された「4.3 リジェクト」ですが、こちらは、2020年3月に強化されたリジェクトになります。
強化された内容は、「出会い系」、「占い系」のアプリは、基本申請に通しませんという内容です。
今後新規の出会い系アプリは、登場しないということです。(Apple 本社に確認済み)
この指摘に対して、今回はマッチングアプリなので、出会い系ではないとアピールで応戦しました。
結果、アピールした甲斐も虚しく、
「あと、2週間で、対応ができなければ、アプリの削除、アカウント停止を行います。」
とメッセージが送られてきました。
僕のアプリは、誕生して2ヶ月で終わりを告げようとしています。

4.まとめ

正直、これほど厳しいとは思っていませんでした。
今回、僕は趣味で配信しているので良いですが、
これが、仕事だとかなりキツいと思います。
いつリリースができるか分からない、「4.2 リジェクト」、「4.3 リジェクト」の場合、開発費用もどれだけ必要になるかも分かりませんし、企画事態がなくなる可能性もあります。
また、アプリの広告にお金をかけた後に、配信中のアプリに対して指摘がきて、広告の内容を修正しないといけない場合も発生すると思います。
これからiOSアプリを作成しようとしている方がいましたら、まずは、Webではダメなのか?をお考えください。そして、Webでの開発を選択された場合は、弊社にお問い合わせください。

2016/09/19

sshする際にconfigファイルを設定しておくと幸せになれるという話

業務でOpenSSHを使う機会があったのですが、configファイルを設定しておくと接続設定をショートカットできて便利だったので、備忘録も兼ねて記します。

(以下全てmacでの操作を前提にしています。)

1. configファイルを使うと何がいいのか?

コマンドラインに、

ssh Host名

と入力することにより、予めconfigファイルに記述していたオプションに従ってSSH接続が行われます。
毎回コマンドラインからオプションを指定したり、過去ログを掘り返して呼び出したりするより便利です。

2. configファイルの場所

以下2箇所に格納されています。
上がユーザ設定ファイル、下が全ユーザ共通の設定ファイルになります。

~/.ssh/config 

 /etc/ssh/ssh_config

上記どちらも同じ形式で記述できますが、

①コマンドライン
②ユーザ設定ファイル
③共通設定ファイル

の順に優先されます。

3. キーワード

今回業務上で用いたもののみ記しています。

Host...SSH接続につける名前。以降に続くキーワードに従ってSSH接続が行われる。
HostName...ログイン先サーバのホスト名。IPアドレスかドメインを指定する。
User...ユーザ名。SSH接続するユーザ名を指定する。
IdentityFile...秘密鍵ファイルへのパス。
Port...ポート番号。
RemoteCommand...サーバに接続後、リモートホストで実行されるコマンド。
RequestTTY...接続先のサーバでシェルを起動するかを指定する。

 4. 実用例

(1) ローカルサーバー (192.168.33.30) にwwwユーザでSSH接続

・config

HOST sample1
   User www
   HostName 192.168.33.30

・実行コマンド

$ssh sample1

(2) githubにSSHで接続する (ユーザ名: hoge / 秘密鍵のパス: ~/.ssh/id_rsa_sample)

・config

Host sample2
    HostName github.com
    User hoge
    IdentityFile ~/.ssh/id_rsa_sample

・実行コマンド

$ssh sample2

(3) hoge.co.jpにwwwユーザで10055番ポートにSSH接続する (秘密鍵のパスは~/.ssh/id_rsa_sample)

Host sample3
   User www
   Port 10055
   HostName hoge.co.jp
   IdentityFile ~/.ssh/id_rsa_sample

・実行コマンド

$ssh sample3

(4) wwwユーザでfuga.co.jpにSSH接続後、cd ~/file/path/to/destination を自動実行する(秘密鍵のパスは~/.ssh/id_rsa_sample)

Host sample4
    HostName fuga.co.jp
    User www
    IdentityFile ~/.ssh/id_rsa_sample
    RequestTTY force
    RemoteCommand cd ~/file/path/to/destination

・実行コマンド

$ssh sample4

参考までに、(4)をコマンドラインで記述したパターンを載せておきます。
毎回コマンドを叩くより、configファイルに設定した方がスムーズであることが分かります。

$ssh www@fuga.co.jp -i ~/.ssh/id_rsa_sample -t -t "cd ~/file/path/to/destination"

本記事はここまでになります。

configを設定しておくと便利ですね。

2016/09/19
1