肉球 (@nikuq299com) です。

今回は、世の中に沢山の作品を送り出している「小説家になろう」に掲載する作品をiPhoneで参照するためのビューア「 小説Viewer 」を紹介します。

はじめに

知る人ぞ知る読み物小説投稿サイト「小説家になろう」は、作品を無料で公開しているにも関わらず、興味深い作品がたくさんあってお気に入りのサイトです。

最近、「盾の勇者の成り上がり」というアニメを見たのですが、この作品もなろう系ということで、原作を読破したいと思い、早速、私のお気に入りであるラノベルでダウンロードを試みたのですが、挙動が、、、。

iPhone の読書アプリ ラノベル についてレビューしました (小説家になろうの話です)

2018年7月1日

ググって見ると、ラノベル作者様のサイトにて、こんな記事が。

これまで、多くのユーザの方にご利用いただいておりましたが、当社の意図しないアクセスが非常に多く寄せられており、高負荷が生じていることを確認いたしました。
その為、当機能をログインユーザのみの利用として制限を行なわせていただきました。

小説家になろうグループ公式ブログより引用

ラノベル作者様のサイトを見ると、ラノベルの配信を停止し、現時点でもまだ更新版はリリースしていないようです。

小説を読むのにプレーンテキストだと可読性がかなり下がるため、ラノベルに変わるビューアを探しました。

小説Viewerについて

ラノベルに変わって見つけたビューアは「小説Viewer」です。

AppStoreを見るといくつかのなろうビューアを見つけたのですが、縦書きで読めるビューアは小説Viewerのみでした。

小説Viewerは説明書がなくて最初は試行錯誤で操作していましたが、慣れればサクサク操作できるようになると思います。

参考までに、私が小説家になろうから「盾の勇者の成り上がり」をダウンロードしたときの手順を共有します。

小説Viewerを開くと下記の様な初期画面を表示するので、下部の「ブラウザ検索」をタップします。

画面中央部の「ブラウザを開くをタップします。

それにしても、この画面に小説ダウンロード法を表示していますが、私はこの説明では全くわかりませんでした。

これから行うことは、アプリ内ブラウザでなろう上の小説一覧を開き、一括ダウンロードする方法です。

以降の手順も説明するのでどんどん読んでいってくださいね。

この画面上のリンクに小説家になろうのURLがないため、直接URLを指定します。

URLを入力するために虫眼鏡をタップします。

「URL」をタップするとURLを入力できるテキストボックスを表示するので、小説家になろうのURLを入力して検索を実行します。

アプリ内ブラウザで小説家になろうを開いたので、通常操作で読みたい小説を表示します。

まずは「小説検索」をタップします。

検索キーワードに小説タイトルを入力して開くをタップします。

検索結果に読みたいタイトルを表示したら、タイトルのリンクをタップします。

小説の情報を表示するので、下部にある「この小説を読む」をタップします。

各話のタイトル一覧を表示したら、画面下部のダウンロードボタンをタップします。

保存する小説タイトル名の入力を求められるので、タイトルを入力して「ダウンロード」をタップします。

画面下部の「書庫」をタップすると、盾の勇者の成り上がりをダウンロードしていることがわかります。

このダウンロードは実行速度200Mbpsの回線でも2〜3分かかりました。1000話近くあるとはいえ、ちょっと時間がかかりすぎ泣きがします。

どんな処理をしているのだろう。

ダウンロードを完了すると、くるくる回っていた画像がなくなり、「全974話」を表示しました。

この行をタップすると各話タイトル一覧を表示します。

各話タイトル一覧を表示するので、読みたいタイトルをタップします。

ビューアではちゃんと文章が縦書きになっていますね！

参考までに、MacのSafariで表示するとこのようになります。

枠で括っている文章がビューアで縦書きになっていることがわかります。

各話タイトル一覧に戻る場合、ページ送りしたい場合、次話を表示したい場合は、画面をタップして各コントロール用のオブジェクトを表示します。

まとめ

ラノベルに慣れすぎていて、最初は若干、操作に違和感を感じましたが、慣れれば問題なしかなと思っています。

ラノベルで実装していた一括ダウンロードやしおりの挿入など、基本的な機能はすべて押さえているので、かなりGoodです！

ただ、惜しむべき点は下記2点。

操作説明が少なすぎる

私も操作を理解するのにかなり時間がかかりました。

直感的に操作ができないUIなので、もう少し詳しい導入説明があると良かったと思います。

このアプリは導入で挫けてアンインストールする人、多いんじゃないかな。

一部UIに改善の余地がある

前述の操作説明にも関連するのですが、やはり操作に一手間かかってしまい、ストレスが残ります。

例えば、次話を読む際に、ラノベルはスワイプだけで次話を表示できたのですが、小説Viewerは画面をタップ、次話をタップ、と2つの操作が必要になります。

この辺をジェスチャーだけで操作できたら、かなり使い勝手が良くなるのではないかと思いました。

小説Viewerは250円で広告表示を削除できます。私は開発者に敬意を払うつもりで、広告表示の解除をしました。

ということで、小説Viewerを使って盾の勇者の成り上がりを読破しようと思います。

みなさんも楽しいなろうライフを送ってください。

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

投稿 新しいiPhone用なろうビューアを見つけました。 は 肉球ログ に最初に表示されました。

肉球 (@nikuq299com) です。

断捨離でロードバイクとクロスバイクを処分したのですが、引越し先が自転車がないとなかなか厳しいところなので、 シェアサイクル サービスに登録してみました。

はじめに

最近、モノを持たない生活に憧れて断捨離をしました。

断捨離 で得られたこと

2018年6月22日

その結果、私の部屋に置いてある据え置き家電はiMacのみとなったため、合わせて家賃の安いいわゆる狭小マンション (といっても、ただの古くて狭い物件です) へ引越しをしました。

今、冷蔵庫、電子レンジ、洗濯機がない状態で生活が回るのかを検証しているのですが、引越し先の環境だと、自転車がある方が便利なため、シェアサイクル サービスに登録してみました。

シェアサイクル を欲した理由

一番の目的は、シェアリングエコノミーを体験してみたかったということです。

広義の意味ではコインランドリーもシェアリングエコノミーと言えるかもしれませんが、自転車をシェアするという体験はこれまでにしたことがなかったため、自分で自転車を持たない場合と比較して、どのくらい利便性の上下があるのか気になりました。

自転車は通勤と繁華街へのアクセスに利用する予定です。

勤務地は電車でも10分くらいなのですが、それくらいなら自転車で健康的に通勤したほうが、満員電車のストレスもなくてよいかなと思いました。

また、新宿を始めとする繁華街までは電車でも行けるのですが、直線距離を考えると、自転車のほうが圧倒的に早いため、普段の足でも自転車がほしいという結論になりました。

ドコモ・バイクシェアに会員登録してみた

私はドコモ・バイクシェアに会員登録しました。

理由は、私の前居住地や職場の周りで、同サービスの自転車をたくさん見ていたためです。

シェアサイクルのサービス提供先を調べてみたのですが、メルチャリは東京都国立市と福岡県福岡市しかサービスを提供していませんし、DMMにいたっては参入を取りやめてしまったとのこと。

料金体系

料金体系は2点ありました。

• 月額2,000円で1回30分以内であれば乗り放題。30分を超えると、100円/30分の追加料金がかかる
• 1回の利用につき、150円/30分で利用でき、月13回までならコチラの方がお得

私はお試しで前者の月額2,000円のコースに加入しました。

サービス提供エリア

東京23区だと、千代田区、中央区、港区、新宿区、文京区、江東区、品川区、大田区、渋谷区、練馬区の10区で利用できます。

個人的には、台東区と中野区も含まれると嬉しかったのですが、今後のサービス展開に期待です。

東京以外でも、横浜や大阪などの大都市から、鬼怒川温泉などの観光地でもサービスを提供しているようなので、ドコモ・バイクシェアのご提供エリアで確認してみてください。

シェアサイクルの良いところ、悪いところ

シェアサイクルの良いところは、駐輪場を気にしなくて良いことですよね。

私の職場には月2,000円の駐輪場があるのですが、この費用はシェアサイクルの月額サービス料と同額なので、家と会社の往復だけでなく、他のサイクルポートにも止めることができるシェアサイクルサービスは費用対効果が高いです。

また、モノを持たないことにより、自転車のメンテ費用などの維持費も押さえられます。

シェアサイクルの悪いところは、必要なときに自転車を借りることができない可能性があることです。

私が利用する予定のサイクルポートでは自転車がないところを見たことがないのですが、場所によっては利用状況の偏りが多くなり、一部のサイクルポートに自転車が集中して、場所によっては自転車がないこともあるみたいです。

【blog更新通知】
■少なくとも東京ではその役割を果たせなくなったCycleShare/自転車シェアリング（ドコモ・バイクシェア） https://t.co/b8VFS03dM9

— やかんUBW＠空冷VW乗り（T-4エンジン） (@yakan13) August 31, 2018

まとめ

引越しも済ませて、本格的にモノを持たない生活を開始しましたが、挫折するのか！？なにげに快適に過ごせるのか！？、どちらに気持ちが傾くのか楽しみです。

来週は台風襲来で雨続きになりそうなので、自転車に乗れるか心配ですが。。。

とりあえず、iOS用のアプリは導入したので、実際に利用して感想を記事にしたいと思います。

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

投稿 シェアサイクル サービスに登録してみました。 は 肉球ログ に最初に表示されました。

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

地図アプリ を自作して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アプリ開発 は意外と簡単にできるのです は 肉球ログ に最初に表示されました。

肉球 (@nikuq299com) です。

エアコンを使いすぎたためか2日も寝込んでしまいました。

暑いですが、みなさんも夏風邪にはご注意ください。

今日は、 Affinity Designer というイラスト作成アプリを紹介します。

前に書いた記事にも、余談で少しだけ触れたのですが、私がツイッターを始めてから、すぴかあやか (@spicagraph) さんという方のイラストをよく目にするようになり、あっという間にすぴかさんが描くイラストのファンになりました (もちろん勝手に)。

よつばと！ の紹介です (書籍レビュー)

2018年7月7日

以下は2018/4/11にツイートされたものです。

シンプルなイラストなのに、なぜか魅せられてしまうんですよね。

ですます包丁 #デザイナーの秘密道具 pic.twitter.com/m6PsLLDFCj

— すぴかあやか（角田綾佳） (@spicagraph) April 11, 2018

ただ、私はAdobe Illustrator を買うほどの財力はないため、お金のかからないベクター画像を描けるソフトを探していたところ、このソフトを見つけました。

はじめに

あらかじめ言っておくと、私はイラストとは全く無縁のドのつく素人です。

そんな素人の私がイラストを描いてみたいと思ったのは、前述のすぴかあやかさんのツイートを見てからでした。

本人もツイートしていたのですが、デザイン思考を駆使した魅せるイラストがこういった感動という体験を生めるそうです。

デザイン思考スゴイ！という思いがどんどん強くなりましたが、それと一緒に私自身もイラストを描いてみたい、ブログでも流用できるような絵を描けるようになってみたいと思い、この奇行？にいたりました。

まあ、趣味なんて突き詰めればムダばかりなので、とりあえずやりたい事をやります！

Affinity Designer とは

Mac、iPadなどで利用できるソフトです。

Webでの調査でも、なかなか評判がよく、何より直感的に利用できるUIが気に入っています。

Adobe Illustratorを使っている人からすると、Illustratorと用語や操作感が違っているようで、戸惑いの声を見ましたが、私はIllustratorを使ったことがないので問題なしです。

このソフトを選んだ理由

簡単に言うと消去法でAffinity Designerが残りました。

Adobe Illustrator

イラスト作成ソフトの代名詞と言ったら、AdobeのIllustratorですが、ちょっとした趣味で使うには費用対効果が低すぎるため、断念しました。

なにせ、Illustratorを使うためにIllustrator単体ののサブスクリプションサービスを契約をすると、1年間で約26,000円の費用がかかります (2018/7/19時点の価格です)。

Illustratorは、イラストの世界では実質的標準ソフトということもあり、ドキュメントも探しやすいと思うため、本気でイラストの仕事をする方には選択の価値があると思いますが、私のような素人には敷居が高かったです。

Inkscape

おそらく、ベクター系ドローソフトでフリーの定番だと思われるものです。

Inkscapeは、私も実際に導入して試してみたのですが、しっくり来なくて選択肢から外しました。

理由はXQuartz という XServer (Unix系ソフトのGUIはすべからくこのX-Windowシステムを使っている) ソフトを同時に使う必要があったり、すぐ落ちたりと、絵を描くワクワク感よりイライラ感のほうが強くなってしまったためです。

絵を描く以前に挫折しそうな状態でした。

使い心地

私のような素人でも、直感的に結構絵を描くことができました。

ただし、絵にセンスがあるかどうか、正しくソフトを利用できているかは別ですが。

とりあえず、下記3点を試してみました。

• テキストのアウトラインを湾曲化する
• テキスト文字列をアウトライン化する
• 下絵を元に、ベジェ曲線で絵を描く

この絵は4つのレイヤーを使って描いたのですが、画面右のレイヤータブを見たら、下絵以外は全くうまく描けていませんでした(ﾉД`)ｼｸｼｸ

ホントはレイヤー1枚毎にスクリーンショットを撮るはずだったのですが、上記理由により断念し、最終的に描けた絵のみのスクリーンショットを撮っています。

実際に絵を書いて思った事は、ベジェ曲線を使うならトラックパッドよりマウスの方が良さげ、と言うことです。

この絵はトラックパッドで描いたのですが、指2本を使ったドラッグでうまく絵をかけなかったため、人差し指1本でドラッグしていました (普段のドラッグは、人差し指でクリック、中指で操作をしています)。

おかげで、右手人差し指の指紋が無くなりそうなほど擦れて痛いです。

線がウネウネしているのは、トラックパッドでのお絵かきが想像以上に難しかったから、だと思いたいです。

耳はかなりバランスが悪いですが、本来は耳オブジェクトを1個作成し、それをコピーして使い回すのが正解っぽいです。

しっぽについても、私は一生懸命線を書いたのですが、太い線を1本描き、そのアウトラインを抽出すれば、キレイなしっぽが描けるみたいです。

まとめ

下手の物好きとはよく言いますが、私も多分にもれず、そのうちの一人でした。

もう少し絵の練習をして、今度は1からの描画手順を調べた上でまとめたいと思います。

Mac版Affinity Designerは、コチラから入手可能ですので、興味のある方はぜひ使ってみてください (2018/7/19時点で30%オフの4,200円となっています)。

また、このソフトは前述したとおりiPad版もリリースしているので、コチラも興味のある方は使ってみてください (こちらも2018/7/19 時点で30%オフの1,700円となっています)。

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

投稿 Affinity Designer をイラスト初心者が使ってみました は 肉球ログ に最初に表示されました。