[{"data":1,"prerenderedAt":351},["ShallowReactive",2],{"post-swift_development_manual_1":3,"blog-categories":154,"blog-sidebar-banners":350},{"post":4},{"id":5,"date":6,"date_gmt":7,"guid":8,"modified":10,"modified_gmt":11,"slug":12,"status":13,"type":14,"link":15,"title":16,"content":18,"excerpt":21,"author":23,"featured_media":24,"comment_status":25,"ping_status":26,"sticky":20,"template":27,"format":28,"meta":29,"categories":31,"tags":33,"acf":34,"aioseo_notices":35,"_links":36,"_embedded":78},230,"2023-04-28T12:04:10","2023-04-28T03:04:10",{"rendered":9},"https://blog.cloco.co.jp/?p=230","2023-12-26T14:20:13","2023-12-26T05:20:13","swift_development_manual_1","publish","post","https://blog.cloco.co.jp/swift_development_manual_1/",{"rendered":17},"小学生でも天気予報アプリが作れるようになるSwift開発マニュアル記事　超基礎編その1",{"rendered":19,"protected":20},"\n\u003Cp>こんにちは！ケロッピです。\u003Cbr>今回はSwiftでiOSアプリを作るにあたって、最初の基礎になる部分を備忘録として記事にしていきたいと思います。\u003Cbr>片手間で、気象庁のAPIを使って天気予報を表示するアプリを作成したので、その過程を切り取って構成しています。\u003Cbr>またSwiftUIは使わず、Storyboardを使ったやり方になっています。\u003C/p>\n\n\n\n\u003Cdiv id=\"ez-toc-container\" class=\"ez-toc-v2_0_62 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n\u003Cdiv class=\"ez-toc-title-container\">\n\u003Cp class=\"ez-toc-title \" >目次\u003C/p>\n\u003Cspan class=\"ez-toc-title-toggle\">\u003Ca href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\">\u003Cspan class=\"ez-toc-js-icon-con\">\u003Cspan class=\"\">\u003Cspan class=\"eztoc-hide\" style=\"display:none;\">Toggle\u003C/span>\u003Cspan class=\"ez-toc-icon-toggle-span\">\u003Csvg style=\"fill: #424242;color:#424242\" xmlns=\"http://www.w3.org/2000/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\">\u003Cpath d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\">\u003C/path>\u003C/svg>\u003Csvg style=\"fill: #424242;color:#424242\" class=\"arrow-unsorted-368013\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\">\u003Cpath d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"/>\u003C/svg>\u003C/span>\u003C/span>\u003C/span>\u003C/a>\u003C/span>\u003C/div>\n\u003Cnav>\u003Cul class='ez-toc-list ez-toc-list-level-1 ' >\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-1\" href=\"https://blog.cloco.co.jp/swift_development_manual_1/#%EF%BC%91%EF%BC%8E%E3%81%BE%E3%81%9A%E3%81%AFXcode%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%A6%E8%B5%B7%E5%8B%95%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86\" title=\"１．まずはXcodeをインストールして起動してみよう\">１．まずはXcodeをインストールして起動してみよう\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-2\" href=\"https://blog.cloco.co.jp/swift_development_manual_1/#%EF%BC%92%EF%BC%8EStoryboard%E3%81%ABUI%E3%83%91%E3%83%BC%E3%83%84%E3%82%92%E9%85%8D%E7%BD%AE%E3%81%97%E3%82%88%E3%81%86\" title=\"２．StoryboardにUIパーツを配置しよう\">２．StoryboardにUIパーツを配置しよう\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-3\" href=\"https://blog.cloco.co.jp/swift_development_manual_1/#%EF%BC%93%EF%BC%8EAutoLayout%E3%81%A7UI%E9%83%A8%E5%93%81%E3%82%92%E7%B6%BA%E9%BA%97%E3%81%AB%E9%85%8D%E7%BD%AE%E3%81%97%E3%82%88%E3%81%86\" title=\"３．AutoLayoutでUI部品を綺麗に配置しよう\">３．AutoLayoutでUI部品を綺麗に配置しよう\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-4\" href=\"https://blog.cloco.co.jp/swift_development_manual_1/#%EF%BC%94%EF%BC%8E%E6%AC%A1%E5%9B%9E%E3%81%AB%E7%B6%9A%E3%81%8F\" title=\"４．次回に続く\">４．次回に続く\u003C/a>\u003C/li>\u003C/ul>\u003C/nav>\u003C/div>\n\u003Ch2 class=\"wp-block-heading\" id=\"１まずはxcodeをインストールして起動してみよう\">\u003Cspan class=\"ez-toc-section\" id=\"%EF%BC%91%EF%BC%8E%E3%81%BE%E3%81%9A%E3%81%AFXcode%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%A6%E8%B5%B7%E5%8B%95%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86\">\u003C/span>１．まずはXcodeをインストールして起動してみよう\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>まずは開発環境であるXcodeをインストールしなければ始まりません。\u003Cbr>App Storeから「Xcode」で検索してインストールしましょう。\u003Cbr>インストールはそこそこ時間がかかるので、気長に待ちましょう。\u003Cbr>ご自身が生涯で地球を何周したか、それが何の寓話であるかを考えるなどオススメです。\u003Cbr>\u003C/p>\n\n\n\n\u003Cp>インストールが完了したら、起動します。\u003Cbr>すると以下のような画面が立ち上がります。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg fetchpriority=\"high\" decoding=\"async\" width=\"1592\" height=\"908\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/b300c2cf73768c69190fc2f618e46d88.png\" alt=\"\" class=\"wp-image-231\"/>\u003C/figure>\n\n\n\n\u003Cp>「Create a new Xcode project」をクリックして新しいプロジェクトを作成します。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg decoding=\"async\" width=\"2802\" height=\"1584\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/0dc864ff33a7a88d7470366b4aa84fac.png\" alt=\"\" class=\"wp-image-232\"/>\u003C/figure>\n\n\n\n\u003Cp>「App」を選択したまま、「Next」をクリックします。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg decoding=\"async\" width=\"2790\" height=\"1582\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/708af3082f4fe6ba1be8e7f62cf46db8.png\" alt=\"\" class=\"wp-image-233\"/>\u003C/figure>\n\n\n\n\u003Cp>「Product Name」にプロジェクト名を、「Organization Identifier」に任意の値を入力します。\u003Cbr>「Organization Identifier」は組織名を一意にするための名称です。\u003Cbr>アプリを公開するのでなければ、この場は適当な値を入力しても問題ありません。\u003Cbr>\u003C/p>\n\n\n\n\u003Cp>また今回はstoryboardを使用して、言語はSwiftでコードを記述していくので、\u003Cbr>「Interface」を「storyboard」、「Language」を「Swift」に設定して「Next」をクリックします。\u003Cbr>\u003C/p>\n\n\n\n\u003Cp>その後、プロジェクトの保存場所を指定して、作成します。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"2806\" height=\"1576\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/69a04c6b6fcb2b431f44f173aa4d64c7.png\" alt=\"\" class=\"wp-image-234\"/>\u003C/figure>\n\n\n\n\u003Cp>するとまっさらなプロジェクトが立ち上がります。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"1560\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/2a3a593e5a512dce2f7a22c68c84622c.png\" alt=\"\" class=\"wp-image-235\"/>\u003C/figure>\n\n\n\n\u003Cp>「Product」→「Run」とクリックすると、シミュレーターが立ち上がります。\u003Cbr>まだ何も配置していないので、これまたまっさらな状態です。白いです。\u003Cbr>このタブラ・ラサを彩ることで、Storyboardを使ったアプリは作られていきます。\u003Cbr>\u003Cbr>\u003C/p>\n\n\n\n\u003Ch2 class=\"wp-block-heading\" id=\"２storyboardにuiパーツを配置しよう\">\u003Cspan class=\"ez-toc-section\" id=\"%EF%BC%92%EF%BC%8EStoryboard%E3%81%ABUI%E3%83%91%E3%83%BC%E3%83%84%E3%82%92%E9%85%8D%E7%BD%AE%E3%81%97%E3%82%88%E3%81%86\">\u003C/span>\u003Ca href=\"https://stg.blog.cloco.tech/swift_development_manual_1/#%EF%BC%92storyboard%E3%81%ABui%E3%83%91%E3%83%BC%E3%83%84%E3%82%92%E9%85%8D%E7%BD%AE%E3%81%97%E3%82%88%E3%81%86\" class=\"broken_link\">\u003C/a>２．StoryboardにUIパーツを配置しよう\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>真っ白なキャンバスに、早速色を添えていきましょう。\u003Cbr>ラベルやボタンといった、UI部品を配置します。\u003Cbr>\u003C/p>\n\n\n\n\u003Cp>まずはラベルとボタンを試してみましょう。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"956\" height=\"650\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/fd1da3ad88d713101ed50e0f37da6180.png\" alt=\"\" class=\"wp-image-236\"/>\u003C/figure>\n\n\n\n\u003Cp>「Main .storyboard」をクリックし、表示します。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"792\" height=\"542\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/774044b6cf1a088c35b788ae93dfb814.png\" alt=\"\" class=\"wp-image-237\"/>\u003C/figure>\n\n\n\n\u003Cp>画像に赤丸をつけた箇所の「＋」をクリックします。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"682\" height=\"493\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/831826c8e15b9f1b27006537fad5b451.png\" alt=\"\" class=\"wp-image-238\"/>\u003C/figure>\n\n\n\n\u003Cp>するとオブジェクトの一覧が表示されるので、「Label」と「Button」をStoryboardの白い画面へドラッグ＆ドロップします。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1092\" height=\"771\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/de2f47c4601c1a528bf2d8861010f60a.png\" alt=\"\" class=\"wp-image-239\"/>\u003C/figure>\n\n\n\n\u003Cp>これでラベルとボタンが画面上に配置されました。\u003Cbr>しかしLabelという表記のままでは意味を成しません。\u003Cbr>設定を変更して表記を変えてみましょう。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"630\" height=\"412\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/c69653840401206cbac61407088fccaa.png\" alt=\"\" class=\"wp-image-240\"/>\u003C/figure>\n\n\n\n\u003Cp>画像に赤丸をつけた箇所をクリックします。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1119\" height=\"868\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/c19b23a0de013e8ad4f6c972a3bd232c.png\" alt=\"\" class=\"wp-image-241\"/>\u003C/figure>\n\n\n\n\u003Cp>するとinspectorが開きます。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"256\" height=\"311\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/fa48d3eecd19b9f317a83a3c7e843906.png\" alt=\"\" class=\"wp-image-242\"/>\u003C/figure>\n\n\n\n\u003Cp>この状態で、配置したラベルをクリックしてから、画像に赤丸をつけた矢印三つが連なったボタンをクリックします。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1118\" height=\"872\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/f27718473300b407e63508842b1b70b7.png\" alt=\"\" class=\"wp-image-243\"/>\u003C/figure>\n\n\n\n\u003Cp>これで配置したラベルの設定が行えます。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"257\" height=\"311\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/013bdf9afa8b7d9bfee967a8dbd940f1.png\" alt=\"\" class=\"wp-image-244\"/>\u003C/figure>\n\n\n\n\u003Cp>赤い四角で囲った箇所で、ラベルの文字列を設定できます。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"256\" height=\"309\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/3d4d30a48f0562d59b49ad650a24db35.png\" alt=\"\" class=\"wp-image-245\"/>\u003C/figure>\n\n\n\n\u003Cp>今回は天気予報を表示するアプリを作成するので、「天気予報」とでも書き換えてみます。\u003Cbr>そうしたら、「Product」→「Run」とクリックして、シミュレーターを立ち上げてみましょう。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1358\" height=\"874\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/d6d1e32c43ddb714c46099317d847ab0.png\" alt=\"\" class=\"wp-image-246\"/>\u003C/figure>\n\n\n\n\u003Cp>するとシミュレーター上で、先ほど配置したラベルとボタンが追加されていることが確認できると思います。\u003Cbr>\u003Cbr>\u003C/p>\n\n\n\n\u003Ch2 class=\"wp-block-heading\" id=\"３autolayoutでui部品を綺麗に配置しよう\">\u003Cspan class=\"ez-toc-section\" id=\"%EF%BC%93%EF%BC%8EAutoLayout%E3%81%A7UI%E9%83%A8%E5%93%81%E3%82%92%E7%B6%BA%E9%BA%97%E3%81%AB%E9%85%8D%E7%BD%AE%E3%81%97%E3%82%88%E3%81%86\">\u003C/span>\u003Ca href=\"https://stg.blog.cloco.tech/swift_development_manual_1/#%EF%BC%93autolayout%E3%81%A7ui%E9%83%A8%E5%93%81%E3%82%92%E7%B6%BA%E9%BA%97%E3%81%AB%E9%85%8D%E7%BD%AE%E3%81%97%E3%82%88%E3%81%86\" class=\"broken_link\">\u003C/a>３．AutoLayoutでUI部品を綺麗に配置しよう\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>ラベルとボタンを配置したものの、適当に配置したので、まだまだ見かけは不恰好です。\u003Cbr>その上シミュレーターの端末の設定を変えると、表示が崩れて見栄えが悪くなることがあります。\u003Cbr>当然ながら、現実世界では実機として様々な画面サイズの端末が使用されます。\u003Cbr>それらの画面サイズに対して、都度いい感じにレイアウトを整えてくれるのがAutoLayoutです。\u003Cbr>論じるまでもなく、アプリの良し悪しは見た目のウェイトもかなり重いので、ここは非常に大事です。\u003Cbr>中身も大事ですが外観も劣らず大事、まるで人間みたいですね。\u003Cbr>\u003C/p>\n\n\n\n\u003Cp>化粧や髪型を整える気持ちで、AutoLayoutを設定していきましょう。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"732\" height=\"201\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/c7cc5adec4034125cecd2d0110311887.png\" alt=\"\" class=\"wp-image-247\"/>\u003C/figure>\n\n\n\n\u003Cp>配置したラベルをクリックしてから、画像に赤丸をつけたボタンをクリックします。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"277\" height=\"365\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/02954c2fe6ececf3475c757fe0fc16a0.png\" alt=\"\" class=\"wp-image-248\"/>\u003C/figure>\n\n\n\n\u003Cp>するとconstraints（配置の制約）を設定するためのメニューが表示されます。\u003Cbr>ここで以下の操作を行なってください。\u003C/p>\n\n\n\n\u003Col>\n\u003Cli>Constrain to marginsのチェックを外す\u003C/li>\n\n\n\n\u003Cli>上の制約を30、下の制約を20、左右の制約を16と入力する\u003C/li>\n\n\n\n\u003Cli>Heightを48と入力する\u003Cbr>\u003C/li>\n\u003C/ol>\n\n\n\n\u003Cp>Constrain to marginsのチェックがついていると、左右にデフォルトの幅の空白が追加されます。\u003Cbr>任意の幅を設定したい時や、画面全体にUIImageViewやUITableViewを配置したい時はこのチェックを外します。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"522\" height=\"632\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/7076e114c56eea68ef632cf6ae3bec27.png\" alt=\"\" class=\"wp-image-249\"/>\u003C/figure>\n\n\n\n\u003Cp>これで画像の状態になったと思われるので、「Add Constraints」をクリックすると配置の制約が追加されます。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"322\" height=\"662\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/3bdecff5d8c5377b20b9aee3fd0406aa.png\" alt=\"\" class=\"wp-image-250\"/>\u003C/figure>\n\n\n\n\u003Cp>制約が追加されました！いえい。\u003Cbr>同じ手順でボタンの方にも制約を追加します。\u003Cbr>\u003C/p>\n\n\n\n\u003Cp>ボタンには以下の制約をつけてみてください。\u003C/p>\n\n\n\n\u003Col>\n\u003Cli>Constrain to marginsのチェックを外す\u003C/li>\n\n\n\n\u003Cli>上の制約を20、左右の制約を16と入力する\u003C/li>\n\n\n\n\u003Cli>Heightを48と入力する\u003Cbr>\u003C/li>\n\u003C/ol>\n\n\n\n\u003Cp>「Product」→「Run」とクリックして、シミュレーターを起動してみましょう。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"356\" height=\"782\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/bb990488f2e7580495f020ba11a6b050.png\" alt=\"\" class=\"wp-image-251\"/>\u003C/figure>\n\n\n\n\u003Cp>つけた制約が適用されています。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"495\" height=\"129\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/8fece53a41114db54ce7a5a5d042c1fc.png\" alt=\"\" class=\"wp-image-252\"/>\u003C/figure>\n\n\n\n\u003Cp>なおここで下の画像の赤丸の箇所をクリックして、Debug Areaを表示してみてください。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"699\" height=\"384\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/39d808b884e543dcc759b981a4db5e17.png\" alt=\"\" class=\"wp-image-253\"/>\u003C/figure>\n\n\n\n\u003Cp>すると「表示を行う際に、制約の合わないものがあります」という警告が確認できることがあります。\u003Cbr>この警告が表示される場合、さまざまな原因が考えられます。\u003Cbr>そのため、上記の警告に続く不具合の詳細を確認し、原因を特定して解決するということが必要になってきます。\u003Cbr>今回は基礎編であるため、具体的な解決法は発生時に各々調べてみてください。\u003Cbr>\u003C/p>\n\n\n\n\u003Cp>今回の学習用のサンプルではUI部品を上から並べていくだけであるため非常にシンプルでしたが、縦横の画面スクロールなどが追加されるとより複雑になっていきます。\u003Cbr>複雑になっていくと、予期せず意図しない表示になるなどして原因の追求がとても大変になることもあります。\u003Cbr>\u003C/p>\n\n\n\n\u003Ch2 class=\"wp-block-heading\" id=\"４次回に続く\">\u003Cspan class=\"ez-toc-section\" id=\"%EF%BC%94%EF%BC%8E%E6%AC%A1%E5%9B%9E%E3%81%AB%E7%B6%9A%E3%81%8F\">\u003C/span>\u003Ca href=\"https://stg.blog.cloco.tech/swift_development_manual_1/#%EF%BC%94%E6%AC%A1%E5%9B%9E%E3%81%AB%E7%B6%9A%E3%81%8F\" class=\"broken_link\">\u003C/a>４．次回に続く\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>いかがでしたでしょうか。\u003Cbr>今回は超基礎編その1ということで、開発環境のインストールからUI部品の配置までを一気に駆け抜けました。\u003Cbr>次回、超基礎編その2として、アプリに動きをつけるためのコードの書き方を記事にしたいと思います。\u003Cbr>\u003Cbr>\u003Cbr>\u003C/p>\n",false,{"rendered":22,"protected":20},"\u003Cp>こんにちは！ケロッピです。今回はSwiftでiOSアプリを作るにあたって、最初の基礎になる部分を備忘録として記事にしていきたいと思います。\u003C/p>\n",2,168,"closed","open","","standard",{"om_disable_all_campaigns":20,"_monsterinsights_skip_tracking":20,"_monsterinsights_sitenote_active":20,"_monsterinsights_sitenote_note":27,"_monsterinsights_sitenote_category":30,"_themeisle_gutenberg_block_has_review":20,"footnotes":27},0,[32],12,[],[],[],{"self":37,"collection":40,"about":43,"author":46,"replies":50,"version-history":53,"predecessor-version":57,"wp:featuredmedia":61,"wp:attachment":64,"wp:term":67,"curies":74},[38],{"href":39},"https://blog.cloco.co.jp/wp-json/wp/v2/posts/230",[41],{"href":42},"https://blog.cloco.co.jp/wp-json/wp/v2/posts",[44],{"href":45},"https://blog.cloco.co.jp/wp-json/wp/v2/types/post",[47],{"embeddable":48,"href":49},true,"https://blog.cloco.co.jp/wp-json/wp/v2/users/2",[51],{"embeddable":48,"href":52},"https://blog.cloco.co.jp/wp-json/wp/v2/comments?post=230",[54],{"count":55,"href":56},1,"https://blog.cloco.co.jp/wp-json/wp/v2/posts/230/revisions",[58],{"id":59,"href":60},254,"https://blog.cloco.co.jp/wp-json/wp/v2/posts/230/revisions/254",[62],{"embeddable":48,"href":63},"https://blog.cloco.co.jp/wp-json/wp/v2/media/168",[65],{"href":66},"https://blog.cloco.co.jp/wp-json/wp/v2/media?parent=230",[68,71],{"taxonomy":69,"embeddable":48,"href":70},"category","https://blog.cloco.co.jp/wp-json/wp/v2/categories?post=230",{"taxonomy":72,"embeddable":48,"href":73},"post_tag","https://blog.cloco.co.jp/wp-json/wp/v2/tags?post=230",[75],{"name":76,"href":77,"templated":48},"wp","https://api.w.org/{rel}",{"author":79,"wp:featuredmedia":94,"wp:term":131},[80],{"id":23,"name":81,"url":27,"description":82,"link":83,"slug":84,"avatar_urls":85,"acf":87,"_links":88},"ケロッピ","　","https://blog.cloco.co.jp/author/tonogai-masahito/","tonogai-masahito",{"24":86,"48":86,"96":86},"https://blog.cloco.co.jp/wp-content/uploads/2024/01/tonogai02.png",[],{"self":89,"collection":91},[90],{"href":49},[92],{"href":93},"https://blog.cloco.co.jp/wp-json/wp/v2/users",[95],{"id":24,"date":96,"slug":97,"type":98,"link":99,"title":100,"author":55,"featured_media":30,"aioseo_notices":101,"acf":102,"caption":103,"alt_text":27,"media_type":104,"mime_type":105,"media_details":106,"source_url":115,"_links":116},"2023-12-25T08:08:36","default_image","attachment","https://blog.cloco.co.jp/zero_start_blog/default_image/",{"rendered":97},[],[],{"rendered":27},"image","image/png",{"width":107,"height":108,"file":109,"filesize":110,"sizes":111,"image_meta":112},2064,861,"2023/12/default_image.png",50104,{},{"aperture":113,"credit":27,"camera":27,"caption":27,"created_timestamp":113,"copyright":27,"focal_length":113,"iso":113,"shutter_speed":113,"title":27,"orientation":113,"keywords":114},"0",[],"https://blog.cloco.co.jp/wp-content/uploads/2023/12/default_image.png",{"self":117,"collection":119,"about":122,"author":125,"replies":128},[118],{"href":63},[120],{"href":121},"https://blog.cloco.co.jp/wp-json/wp/v2/media",[123],{"href":124},"https://blog.cloco.co.jp/wp-json/wp/v2/types/attachment",[126],{"embeddable":48,"href":127},"https://blog.cloco.co.jp/wp-json/wp/v2/users/1",[129],{"embeddable":48,"href":130},"https://blog.cloco.co.jp/wp-json/wp/v2/comments?post=168",[132,153],[133],{"id":32,"link":134,"name":135,"slug":136,"taxonomy":69,"acf":137,"_links":138},"https://blog.cloco.co.jp/category/mobile_app/","スマホアプリ","mobile_app",[],{"self":139,"collection":142,"about":145,"wp:post_type":148,"curies":151},[140],{"href":141},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/12",[143],{"href":144},"https://blog.cloco.co.jp/wp-json/wp/v2/categories",[146],{"href":147},"https://blog.cloco.co.jp/wp-json/wp/v2/taxonomies/category",[149],{"href":150},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=12",[152],{"name":76,"href":77,"templated":48},[],[155,176,196,216,236,256,271,290,310,331],{"id":156,"count":157,"description":27,"link":158,"name":159,"slug":160,"taxonomy":69,"parent":30,"meta":161,"acf":162,"_links":163},13,3,"https://blog.cloco.co.jp/category/dx/","DX","dx",[],[],{"self":164,"collection":167,"about":169,"wp:post_type":171,"curies":174},[165],{"href":166},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/13",[168],{"href":144},[170],{"href":147},[172],{"href":173},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=13",[175],{"name":76,"href":77,"templated":48},{"id":177,"count":55,"description":27,"link":178,"name":179,"slug":180,"taxonomy":69,"parent":30,"meta":181,"acf":182,"_links":183},6,"https://blog.cloco.co.jp/category/qa/","QA","qa",[],[],{"self":184,"collection":187,"about":189,"wp:post_type":191,"curies":194},[185],{"href":186},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/6",[188],{"href":144},[190],{"href":147},[192],{"href":193},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=6",[195],{"name":76,"href":77,"templated":48},{"id":197,"count":23,"description":27,"link":198,"name":199,"slug":200,"taxonomy":69,"parent":30,"meta":201,"acf":202,"_links":203},14,"https://blog.cloco.co.jp/category/web_app/","webアプリ","web_app",[],[],{"self":204,"collection":207,"about":209,"wp:post_type":211,"curies":214},[205],{"href":206},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/14",[208],{"href":144},[210],{"href":147},[212],{"href":213},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=14",[215],{"name":76,"href":77,"templated":48},{"id":217,"count":55,"description":27,"link":218,"name":219,"slug":220,"taxonomy":69,"parent":30,"meta":221,"acf":222,"_links":223},10,"https://blog.cloco.co.jp/category/architect/","アーキテクト","architect",[],[],{"self":224,"collection":227,"about":229,"wp:post_type":231,"curies":234},[225],{"href":226},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/10",[228],{"href":144},[230],{"href":147},[232],{"href":233},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=10",[235],{"name":76,"href":77,"templated":48},{"id":237,"count":23,"description":27,"link":238,"name":239,"slug":240,"taxonomy":69,"parent":30,"meta":241,"acf":242,"_links":243},4,"https://blog.cloco.co.jp/category/infra/","インフラ","infra",[],[],{"self":244,"collection":247,"about":249,"wp:post_type":251,"curies":254},[245],{"href":246},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/4",[248],{"href":144},[250],{"href":147},[252],{"href":253},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=4",[255],{"name":76,"href":77,"templated":48},{"id":32,"count":257,"description":27,"link":134,"name":135,"slug":136,"taxonomy":69,"parent":30,"meta":258,"acf":259,"_links":260},8,[],[],{"self":261,"collection":263,"about":265,"wp:post_type":267,"curies":269},[262],{"href":141},[264],{"href":144},[266],{"href":147},[268],{"href":150},[270],{"name":76,"href":77,"templated":48},{"id":157,"count":157,"description":27,"link":272,"name":273,"slug":274,"taxonomy":69,"parent":30,"meta":275,"acf":276,"_links":277},"https://blog.cloco.co.jp/category/project_management/","プロジェクトマネージメント","project_management",[],[],{"self":278,"collection":281,"about":283,"wp:post_type":285,"curies":288},[279],{"href":280},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/3",[282],{"href":144},[284],{"href":147},[286],{"href":287},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=3",[289],{"name":76,"href":77,"templated":48},{"id":291,"count":237,"description":27,"link":292,"name":293,"slug":294,"taxonomy":69,"parent":30,"meta":295,"acf":296,"_links":297},11,"https://blog.cloco.co.jp/category/beginner/","初心者","beginner",[],[],{"self":298,"collection":301,"about":303,"wp:post_type":305,"curies":308},[299],{"href":300},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/11",[302],{"href":144},[304],{"href":147},[306],{"href":307},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=11",[309],{"name":76,"href":77,"templated":48},{"id":311,"count":312,"description":27,"link":313,"name":314,"slug":315,"taxonomy":69,"parent":30,"meta":316,"acf":317,"_links":318},9,7,"https://blog.cloco.co.jp/category/it_industry_news/","業界最新情報","it_industry_news",[],[],{"self":319,"collection":322,"about":324,"wp:post_type":326,"curies":329},[320],{"href":321},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/9",[323],{"href":144},[325],{"href":147},[327],{"href":328},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=9",[330],{"name":76,"href":77,"templated":48},{"id":312,"count":257,"description":27,"link":332,"name":333,"slug":334,"taxonomy":69,"parent":30,"meta":335,"acf":336,"_links":337},"https://blog.cloco.co.jp/category/company_introduction/","自社紹介","company_introduction",[],[],{"self":338,"collection":341,"about":343,"wp:post_type":345,"curies":348},[339],{"href":340},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/7",[342],{"href":144},[344],{"href":147},[346],{"href":347},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=7",[349],{"name":76,"href":77,"templated":48},[],1775546999592]