先日の記事に続き、今回は実機で動かせるアプリの作成を行ってみます。

地図アプリ を自作してiPhoneで動かしてみる

2018年8月14日

今回の記事は5です。

1. iOSアプリ開発の前準備
2. Xcodeを使って簡単なプログラムを動かしてみる
3. iOSアプリの基礎
4. 地図を表示してみる
5. 部品の使い方 (← 今回ココ)
6. SNS機能を呼び出してみる
7. カメラを使って写真を保存してみる

はじめに

部品の使い方 における大事なポイントは、レイアウトです。

開発者は、なぜレイアウトを意識しなければならないのかをこの記事で説明します。

部品の使い方

レイアウトを意識する理由

レイアウトを意識する必要がある理由は、iPhone、iPadなどの複数機器に対してマルチデバイス対応するためです。

皆さんも御存知だと思いますが、iPhoneとiPadは画面の解像度が全く違います。

それどころか、iPhone、iPadなどの同一機器でも、リリースの世代に寄って解像度が違います。

iOS、Mac、Windowsで使われる、マウスでカチカチ操作するGUIアプリは、部品の配置を座標指定で行います。

iOSは、iPad、iPhoneなど、多くの画面サイズが存在するため、部品の座標を絶対値で決めてしまうと、利用するデバイスによって部品の配置が画面設計と異なってしまいます。

下記の通りにテキストラベルを画面中央上部に設定したとしても、レイアウトを意識しないと、iPhoneとiPadでは下記の通り、表示結果が異なってしまいます。

図1. Xcodeで部品の配置を中央上部に設計する

図2. 図1で設計した画面をiPhoneとiPadで表示する

オートレイアウトを設定した場合の違い

このような表示結果になった原因は、レイアウトを意識した画面設計を行わなかったからです。

オートレイアウトを設定しない場合、部品は画面左上を原点とした絶対座標で部品を配置しますが、オートレイアウトを設定した場合は、相対座標を設定することができます。

今回の例だと、テキスト中央部におけるX軸は最大値の1/2、Y軸は絶対値となるように設定しています。

レイアウトを設定する方法

レイアウトを設定する方法は簡単です。

「Resolve Auto Layout Issues」から、「Add Missing Constraints」を選択するだけです。

オートレイアウトを設定すると、ドキュメントアウトライン上にConstraintsというグループができており、これがオートレイアウトにおける部品レイアウトの情報を格納しています。

Constraintsにぶら下がる2つの要素は、上の縦線が入っているアイコンの要素をクリックするとX座標、横線が入っているアイコンの要素をクリックするとY座標に関するオートレイアウト情報を設定でき、メイン画面右上に入力欄を表示します。

設定値によって、どんな画面サイズでも、設計者の意図した場所に部品を配置することができるので、興味がある場合はリファレンスで設定可能な情報を調べてみてください。

まとめ

レイアウトを意識して画面を設計すれば、iPhoneとiPadのマルチデバイス対応ができますし、新型のiPhoneやiPadをリリースしても、アプリに大きな影響は与えません。

iPhoneXやホームボタンの廃止が噂されているiPadは、画面上部のノッチについて、Appleからデザインルールが出ていますが、大きな影響は出ないでしょう。

Swiftのアプリ開発環境は至れり尽くせりなので、初心者と共に、C++やJavaなど、旧言語でGUI開発経験のある方は、習得しやすいと思いますので、ぜひ挑戦してみてください。

もし、本格的にプログラミング食でべていきたい場合は、TEACH ACADEMYの iPhoneアプリコース などのオンライン学習プログラムを使うことも、費用対効果的に検討対象に入れることをおすすめします。

それでは。ごきげんよう。

投稿 部品の使い方 を理解してマルチデバイスに対応する は 肉球ログ に最初に表示されました。

肉球 (@nikuq299com) です。

先日の記事に続き、今回は実機で動かせるアプリの作成を行ってみます。

iOSアプリ を作る上で知っておくと良いこと

2018年8月12日

今回の記事は4です  (順番を変えて「部品の使い方」は次回説明します) 。

今回の記事はスクロールが長いですが、ほとんどが画面のスクリーンショットなので、サクサク読めると思います。

また、当初に予定していた説明順ですが、「4. 部品の使い方」「5.地図を表示してみる」の順番を逆にします (部品の使い方は、簡単なサンプルアプリを作成してから説明したほうが分かりやすいと判断したため)。

1. iOSアプリ開発の前準備
2. Xcodeを使って簡単なプログラムを動かしてみる
3. iOSアプリの基礎
4. 地図を表示してみる (← 今回ココ)
5. 部品の使い方 (← 説明順番入れ替え)
6. SNS機能を呼び出してみる
7. カメラを使って写真を保存してみる

はじめに

今回の地図アプリは、プログラムコードを１行も書かずに作成します。

機能はとてもシンプルですが、それでもコードを書かずにここまでのアプリを作れるという事を共有できればと考えています。

地図アプリ の作り方

まずは下準備する

Xcodeを起動すると下記の画面を表示するので、「Create a new Xcode project」をクリックして、新規プロジェクトを作成します。

続いて、プロジェクトのテンプレートを選ぶように言われますので、「iOS」の「Single View App」を選択して、右下のNextボタンをクリックしてください。

開発に必要な情報を入力してください。詳細は表１を参照してください。

表1. 各項目の設定値

次に、プロジェクトを保存する場所を指定してください。

地図アプリを作り込む

この画面には、ここまでに設定した内容を表示しています。

続いて、地図部品を使うために、画面中央下にある、「Linked Frameworks and Libraries」欄の「+」をクリックします。

MapKit.frameworkを選択して、「Add」ボタンをクリックする。

メインの画面に戻るので、先程「+」ボタンをクリックしたLinked Frameworks and LibrariesにMapKit.frameworkを表示していればOKです。

いよいよ、開発に入ります。

画面左側にある「Main.storyboard」を選択すると、画面中央にViewControllerという矩形を表示します。

この矩形が画面レイアウトなので、ココに部品を貼り付けていきます。

画面右側下にあるリストから、「Map Kit View」(以降、地図部品) を画面にドラッグ&ドロップしてください。

この時、配置する部品が中央に来るように、画面に十字の破線が出たところで部品をドロップしてください。

画面レイアウト上にドロップした地図部品の四隅をドラッグ&ドロップして、画面レイアウトいっぱいに引き伸ばしてください。

アプリを実機で確認する

これでアプリの開発は終了なので、続いて、実機で確認を行います。

メイン画面左上にある停止ボタンの右側をクリックすると、実機、またはシミュレータを選択できます。

そうすると、実機とシミュレータから確認対象とする端末を選べるので、好きな端末を選びます。

一番上のDeviceに乗っている端末が実機です。

実行対象の機器を選定したら、メイン画面左上の再生ボタンをクリックしてください。

実機の設定を行う

はじめてiOSアプリをXcodeからインストールする場合は、「信頼されていないデベロッパ」という表示が出て、アプリを実行できません。

これは、初期設定のiOSが正規のルート (App Store) からのみのアプリインストールを許可する設定になっているためです。

自作したアプリを稼働させるためには、設定の「一般」>「プロファイルとデバイス管理」>「Apple ID」の順でタップします。

Xcodeに登録したApple IDを信頼するよう、「”Apple ID”を信頼」をタップしてください。

ポップアップ画面で再度Apple IDを信頼してよいか確認されますので、「信頼」をタップしてください。

SampleMapが「検証済み」と表示していれば、アプリを稼働することができます。

ホーム画面に戻り、改めてSampleMapアイコンをタップしてください。

Apple のマップアプリと同じ地図を表示すれば、アプリは正しく稼働しています。

ピンチアウト、ピンチインもできます。

まとめ

今回は地図アプリを作成してみましたが、シンプルなアプリであれば、今回のようにプログラムコードを１行も書かなくても作成できました。

また、今回作成したXcodeプロジェクトはGitHubにSampleMapというリポジトリ登録していますので、時間がない方はGitHubからプロジェクトをダウンロードして動作確認をしてみてください。

位置情報など、純正のマップアプリの機能を使いたい場合は、これらの部品もMapKitに組み込まれていますので、調べた上で使ってみてください。

もし、本格的にプログラミング食でべていきたい場合は、TEACH ACADEMYの iPhoneアプリコース などのオンライン学習プログラムを使うことも、費用対効果的に検討対象に入れることをおすすめします。

それでは。ごきげんよう。

投稿 地図アプリ を自作してiPhoneで動かしてみる は 肉球ログ に最初に表示されました。

肉球 (@nikuq299com) です。

前回の投稿ではplaygroundを使ってプログラムを動かしてみましたので、これから実際に iPhone で動くアプリを作ってみたいと思います。

ただ、その前に少しだけプログラムに関する説明をします。

playground でプログラムを動かしてみる

2018年8月10日

今回の記事は3となります。

1. iOSアプリ開発の前準備
2. Xcodeを使って簡単なプログラムを動かしてみる
3. iOSアプリの基礎 (← 今回ココ)
4. 部品の使い方
5. 地図を表示してみる
6. SNS機能を呼び出してみる
7. カメラを使って写真を保存してみる

はじめに

今回は、 iOSアプリ (というか、GUIアプリ) が動く仕組みの概要をお伝えします。

この記事を読んで、以下2点を理解していただけると幸いです。

1. アプリ開発は入門のハードルが低く、誰でも挑戦できる！
2. アプリ開発を極めるには高度な知識が必要となる！

1と2で言っていることが逆じゃないか！と思われるかもしれません。

たとえ話ですが、クルマは免許を取れば誰でも公道で運転できますが、サーキットで速く走るためには、相応の訓練と運転知識が必要になります。

アプリ開発も同様に、誰でもアプリを作れるようになれますが、質の高いアプリを開発するには訓練と知識が必要ということです。

アプリ開発は、コンピュータを相手にしているだけあって、続ければ論理的思考やモノゴトを抽象化する能力を鍛えることができますので、まずは興味を持っていただき、アプリ開発にチャレンジしてもらえたらと思います。

iOSアプリ を作る上で知っておくと良いこと

前回の投稿にて、プログラムを書く時、最初はマネをすれば良いと言いましたが、何も知らずにマネをするより、自分がこれからやろうとしていることの概要を知っていると、より効率が上がります。

【例】言葉は要素を抽象化してパーツ化したものである

例えば、中学校で英語の授業を受けた時に、文法でSVC (主語、動詞、補語) とか、SVO (主語、動詞、目的語) とか言うことを教わったと思うのですが、私は言語の本質って、これだけだと思っています。

各単語を主語、動詞、補語、目的語という風に抽象化して組み合わせるだけ。

無理やりですが、日本語を英語と対比する場合、日本語はSOV (主語、目的語、動詞) という感じでしょうか。

プログラム言語も同様に要素を抽象化してパーツ化したものである

※この章は余談で、この内容を理解しなくてもプログラムは書けるので、分からなければ読み飛ばしてもらっても構いません。

プログラミングも、言葉と同じです。

プログラミングでコンピュータと会話できる文法は下記3要素しかなく、アプリはこの3要素だけで動いています。

1. 処理を行うパラメータ (以降、変数) を定義する
2. 条件分岐する  (評価項目に対してYESかNOを判定する)
3. 同じことを繰返す処理を行う

デジタルは、1か0の組み合わせと言うことを聞いた事がある人も多いと思いますが、パソコンやスマホもデジタル機器なので、内部的には1と0だけの数字 (2進数) を組み合わせて動いているため、処理はYES (1) かNO (0) しかないのです。

みなさんが普段使っているアプリの複雑な画面や、ブログで読んでいる文字も0と1で構成しています。

プログラム処理をパーツの集合として捉える場合、最も単純と思われる電卓のプログラムで考えるてみましょう。

例えば、8 + 7 を計算して15という答えを出すプログラムは、下記のようになります。

• 第1項の8を変数Aとする → 8を2進数で表現すると、”1000”
• 第2項の7を変数Bとする → 7を2進数で表現すると、”111”
• AとBの論理和を算出する → ”1000” と ”111” の和 (論理和) を取る
• AとBの論理和は、”1111” → ”1111”を10進数で表現すると15になる

図3. 2進数で8 + 7 を2進数で計算する

こんな感じで、コンピュータは演算もゼロと1だけで行います。

アプリ開発で登場するパーツ

簡単な図を書いてみました。

図4. アプリはAppleが用意した部品を貼り付けるだけで作れる

我々は、普段スマホを利用する時に、直感的に使える部品で色々な処理をスマホへ命令します。

あれを作るのは難しそうと思う方もいると思いますが、iOSのアプリ開発は、Appleが用意した部品を組み合わせてアプリを開発するため、開発者は文字の大きさや導線などのデザインと、部品の振る舞いだけに注力すれば良いのです。

プログラミングで難しいところ

上記だけで話を終わらせると、本職プログラマーの方からお叱りを受けそうなので、プログラミングの何が難しいのかも、合わせて説明します。

アプリ開発の難しいところを一言でいうと、モノゴトを抽象化する能力です。

わかりやすい例を、下記に2点挙げます。

数式を使った処理の効率化

先日投稿した記事にて、playgroundを使ったグラフを描画するサンプルプログラムを書きました。

コレは、for-in文という書式で、「0 + 1、 1 + 2、3 + 3、… 、45 + 10」 というように足し算を10回行い、1回ごとの計算結果をグラフ領域にプロットしています。

処理を簡単に説明すると、以下のとおりです。

1. 足し算の1要素となる変数 value を定義する。初期値はゼロ。
2. この処理は、value と num の加算を10回繰り返す。
   1. “for num in 1…10” は、足し算の1要素となる変数numを10回インクリメント (1回目のnum は1、2回目のnum は2、… 10回目のnumは10) するという意味。
   2. “value += num” は、変数value にインクリメントしたnumを加算するという意味 (value += numは、1回目で0 + 1、2回目で1 + 2、… 10回目で45 + 10という計算を行う) 。

単純な数式で書くと下記の通りとなります。

変数valueに対して、変数 num を10回加算する処理をしており、カッコの計算をするたびに、カッコ内の計算結果をグラフ領域へプロットします。

(0 + 1) + (1 + 2) + (3 + 3) + (6 + 4) + (10 + 5) + (15 + 6) + (21 + 7) + (28 + 8) + (36 + 9) + (45 + 10)

文字で書いてもわかりにくいので、各変数がどのように変化していくか表にしました。

表1. for-in文実行時の変数値

この10回繰り返す計算は、n (n + 1) / 2 という公式で置き換えられます。

今回のサンプルプログラムの場合だと、繰り返す計算回数はわずか10回ですが、これが100万回、1億回と繰り返す場合は、後者の公式を使った方が、はるかに処理が速くなります。

100万回繰り返す場合、前者は計算を100万回実行しなければなりませんが、後者は計算を3回実行するだけで済むためです。

公式を使った計算は以下の3回のみとなります。

1. n + 1 (この結果をaとする)
2. n * a (この結果をbとする)
3. 最終的な解 = b / 2

上記に挙げた2つの計算において、後者の処理速度は前者の処理速度より33万倍早くなります (あくまで例なので、他の処理速度に影響する要因は除外します)。

優秀なプログラマーは、このように処理を抽象化して質の高い処理を創造します。

設計における問題のモデル化

コレも、我々が普段無意識に行っている事なのですが、意識していないと汎用性の高いアプリの設計を行えません。

例えば、自動車を運転する場合、免許さえ持っていれば、トヨタ車でも、ホンダ車でも、BMWでも、乗ることができると思います。

なぜかというと、日本を走ることができる自動車の運転席は、国土交通省の定める保安基準に必ず則っているからです。

日本で走る事ができるクルマは、どのメーカが作るクルマでも、必ず保安基準に則っているため、前の座席に運転席があり、座席の周りには、エンジンスターター、ハンドル、アクセル、ブレーキ、シフトレバーがついています。

運転免許証を持っている人は、意識していなくてもそれを理解しているから、初めて乗るクルマでも迷うことなく運転することができます。

運転席をプログラミングする時にする設計も同様です。

高級な素材を使っていようが、エンジンが小さかろうが、クルマはクルマなんです。

図1. プログラム上にクルマを定義する場合のダメな例

図2. プログラム上にクルマを定義する場合の良い例

まとめ

プログラミングで大事なことは、モノゴトを抽象化する能力と言うことをわかっていただけたでしょうか？

もし、私の説明が・・・で分かりづらい場合は、コメントをいただければ、個別に回答をさせていただきます。

もし、本格的にプログラミングをより本格的に学びたい場合は、TEACH ACADEMYの iPhoneアプリコース などのオンライン学習プログラムを使うことも、費用対効果的に検討対象に入れることをおすすめします。

ココからは余談となります。

図解する場合って、使える素材に制限があると、分かりやすいものができないですね。

最近、グラフィックレコーディングを勉強するつもりなので、ブログに載せる図解も、手書きで分かりやすいモノを作れたら良いなと考えています。

それでは。ごきげんよう。

投稿 iOSアプリ を作る上で知っておくと良いこと は 肉球ログ に最初に表示されました。

肉球 (@nikuq299com) です。

先日の投稿でiOSアプリの開発を行うためにXcodeをダウンロードしたので、今回は、簡単なプログラムを動かしてみます。

iOSアプリ開発 は意外と簡単にできるのです

2018年8月10日

今回の記事は2となります。

1. iOSアプリ開発の前準備
2. Xcodeを使って簡単なプログラムを動かしてみる (← 今回ココ)
3. iOSアプリの基礎
4. 部品の使い方
5. 地図を表示してみる
6. SNS機能を呼び出してみる
7. カメラを使って写真を保存してみる

はじめに

Xcodeは、 playground という実行環境があり、このplaygroundを使うと、プログラムの動作を簡単に確認できます。

まずは、このplaygroundを使って簡単なプログラムを動かしてみます。

playground でプログラムを実行してみる

Xcodeを起動したら、「Welcome to Xcode」というウィンドウがでますので、「Get started with a playground」をクリックしてください。

次の画面に遷移したら、テンプレートに「iOS」「Blank」を選択して、Nextをクリックしてください。

保存先と保存するファイル名を指定して、Createをクリックします (ここではSampleというファイル名で保存します)。

以下のような初期画面が出ますので、下記のプログラムを真似して書いてみてください。

以下は、ソースコードのテキストです。

一応、このプロジェクトはGitHubにも登録したので、プログラムの動きだけ見たい！という場合は、事前にXcodeをインストールした上でご利用ください。

Xcodeのインストールは、下記の関連記事に記載しています。

iOSアプリ開発 は意外と簡単にできるのです

2018年8月10日

GitHub上のプロジェクトは下記の手順で利用できます。

下記ページの「Clone or Download」をクリックする。

次に、下記のダイアログがポップするので、許可をクリックしてください。

次に保存先のディレクトリを選択して、Cloneボタンをクリックしてください。

保存先のディレクトリを指定し、Cloneボタンをクリックする。

次に、ダウンロードしたSample.playgroundをダブルクリックしてXcodeを開いてください。

ダウンロードしたSample.playgroundをダブルクリックして、Xcodeを開く。

以下の画面を表示すれば成功です。

文字や数字などの表示は右側の枠に表示しますが、グラフや図形、写真などは右側のボタンを押すことでソースコード欄へ結果を出力できます。

ご参考までのメモです。

GitHubというのは、ソースコードを管理するためのサービスで、例えば、ブロガーのみなさんがよく利用している WordPressのようなオープンソースプロジェクトは、GitHubでバージョン管理 (リンクはコチラ) しています。

GitHubの使い方 (というか、アカウントの作り方) は、過去の記事を参考にしてください。

GitHub へユーザ登録してみました

2018年7月12日

下記は、Wikipediaから抜粋したGitHubの説明です。

GitHub（ギットハブ）は、ソフトウェア開発のプラットフォームであり、ソースコードをホスティングする。コードのバージョン管理システムにはGitを使用する。Ruby on RailsおよびErlangで記述されており、アメリカのカリフォルニア州サンフランシスコ市に拠点を置くGitHub社によって保守されている。主な開発者はChris Wanstrath、PJ Hyett、Tom Preston-Wernerである。

GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供している。2009年のユーザー調査によると、GitHubは最もポピュラーなGitホスティングサイトとなった。

WikipediaのGitHub より抜粋

GitHubといえば、最近、マイクロソフトがGitHubを買収するという報道が飛び、世間を賑わせましたよね。

GitHubは、今やオープンソース開発に無くてはならない存在になっているようです。

100RT Microsoft、GitHubを75億ドルで買収　正式発表 https://t.co/kPZeznpBPW

— ITmedia NEWS (@itmedia_news) June 4, 2018

まとめ

プログラミングの経験がない方は、これなら私でもできるのでは？と思われた方も多いのではないでしょうか？

プログラムを書くために必要なプログラム言語は、言語というだけあって、日本語や英語と変わりません。

日本語や英語はその言葉を母国語とする人とコミュニケーションをとるための手段であるように、プログラム言語もコンピュータとコミュニケーションを取るための手段に過ぎません。

プログラムコードの書き方がわからなければ、英語の書き取りのように他のコードを真似して書けば良いし、コードの意味が分からなかったり、適用すべきコードがわからなければ、英和辞典を使うようにリファレンスを参照すればよいのです。

上手な英語、下手な英語が存在するように、上手なプログラムコードはそれなりの知識がなければ書くことはできませんが、プログラムで食べていく事を考えていない人は、日曜プログラマーとして、コードを書いて動いたアプリに喜びを感じながら、思考を整理する訓練ができると思います。

もし、本格的にプログラミング食でべていきたい場合は、TEACH ACADEMYの iPhoneアプリコース などのオンライン学習プログラムを使うことも、費用対効果的に検討対象に入れることをおすすめします。

2018/8/11 続編記事を投稿しました。

iOSアプリ を作る上で知っておくと良いこと

2018年8月12日

それでは。ごきげんよう。

投稿 playground でプログラムを動かしてみる は 肉球ログ に最初に表示されました。

肉球 (@nikuq299com) です。

最近勉強した iOSアプリ開発 について、せっかくなのでまとめておこうと思います。

Swift を使った iOS アプリ開発を勉強してみました。

2018年7月15日

最近、ちまたではプログラミングが着目されていますが、MacとiPhone または iPad を持っていれば、簡単に実機で自分が書いたコードを動かすことができるので、ぜひ、一度試してみてください。

ブログの中で、体系的に整理しようと思っていたのですが、こういった投稿記事で整理できるボリュームではなさそうなので、本格的な整理は別にWebサイトを立ち上げようと思います。

はじめに

iOSアプリとは、iPhone、iPad上で動くアプリを指します。

プログラミングを体験したことのない方は、プログラミングと聞いただけで眉を潜めてしまう方が多いですが、一昔前と違って、今の言語は直感的で使いやすく、呼び出すだけで機能を実装できるライブラリも豊富に揃っているため、入門のハードルはかなり下がっていると思います。

iOSアプリ開発に関しては、App Storeに公開しないのであれば、無料で開発環境を作成でき、自身のiPhone や iPad でアプリを動かすことができます。

お子さんにプログラムを教えたい親御さんや、副業になり得るか体験してみたい未来のプログラマーさんは、暇がある時に試してみることをおすすめします。

この辺を1記事に収めるのはボリューム的に難しそうなので、下記くらいのテーマに小分けして記事を投稿するつもりです。

1. iOSアプリ開発の前準備 (← 今回ココ)
2. Xcodeを使って簡単なプログラムを動かしてみる
3. iOSアプリの基礎
4. 部品の使い方
5. 地図を表示してみる
6. SNS機能を呼び出してみる
7. カメラを使って写真を保存してみる

iOSアプリ開発 の前準備

Apple IDとXcodeというソフトの2点の準備をしましょう。

開発用Apple IDを作成する

iOSアプリを開発する際、Apple IDが必要になります。

普段使っているApple IDでも問題ありませんが、私は新規にApple IDを作成しました (Apple IDは1人で複数個取得可能です)。

Apple IDは本名の設定を義務付けてはいないため、開発したアプリをAppStoreへ登録する際に本名を出さないようにするための対策です 。

なので、AppStoreへの登録予定がない、本名を公開しても問題ない場合は、Apple IDの使い分けは気にしなくても大丈夫です。

Apple IDの登録はコチラから行えます。

App StoreからXcodeをダウンロードする

まずは、App Store を開きましょう。

検索窓からXcode をキーワードにして検索してください。

Xcodeをダウンロードしてください。

ダウンロードを完了したら、Xcodeを起動してください (最初はDockにアイコンが無いのでLaunchpadから起動してください)。

以下の起動画面が出れば問題なくXCodeをインストールできています。

まとめ

次の投稿では、Xcodeの初期設定と簡単なサンプルプログラム作成を説明します。

2018/8/10 に続編記事を投稿しました。

playground でプログラムを動かしてみる

2018年8月10日

それでは。ごきげんよう。

投稿 iOSアプリ開発 は意外と簡単にできるのです は 肉球ログ に最初に表示されました。