just be you...

超初心者が Xcode SpriteKit を使ってみた!!! ( Xcode SpriteKit の使い方 , 超入門編 )

こんにちは ism です。

iPhone のゲームアプリをつくるには Xcode の SpriteKit を使うと良いとの事で、我が家の長男くんが何やら使い始めました。
Xcode SpriteKit の基本的な使い方を記録しておきます。
 

 

Xcode SpriteKit の使い方

Xcode の起動

1. 「 Finder 」内で「アプリケーション」をクリックすると、「 Xcode.app 」が見つかるので、ダブルクリックして Xcode を起動させます。( 今後のために Dock に追加しておくのが良いですね。)

f:id:just-be-you:20181008225159p:plain

プロジェクトの作成

2. Xcode が起動したら「 Create a new Xcode project 」をクリックします。
f:id:just-be-you:20180921214209p:plain

 

テンプレートの選択

3. テンプレートを選択する画面が出てくるので、「iOS 」,「 Game 」を選択し「 Next 」をクリックします。

f:id:just-be-you:20181008221721p:plain
 

オプションの選択

4. 「 Product Name 」,「 Organization Name 」,「 Organization Identifier 」,「 Language 」,「 Game Technology 」の設定をします。

f:id:just-be-you:20181008222459p:plain

■ Product Name (プロジェクト名)
  :好きな名前をつけましょう。
■ Organization Name (組織名)
  :任意の名前( = 適当)でOKです。
■ Organization Identifier (組織識別子)
  :任意の値( = 適当)でOKです。
■ Language (プログラミング言語)
  :Swift か Objectibe-C を選択します。初期設定のまま Swift を選びましょう。
■ Game Technology (ゲーム技術)
  :SpriteKit か SceneKit か Metal を選択します。初期設定のまま SpriteKit を選びましょう。
 

プロジェクト保存先の選択

5. プロジェクトの保存先を決めて「 Create 」をクリックするとプロジェクトが作成されます \( ˆoˆ )/

f:id:just-be-you:20180927193216p:plain

Xcode の画面構成

6. Xcode の画面ってこんな感じです。。。

f:id:just-be-you:20181008231332p:plain

Toolbar (ツールバー)
  :開発したアプリのシミュレーションを実行するボタンや各エリア( Navigator area , Utility area , Debugger area )を開け閉めするボタンがあります。
Navigator Area (ナビゲータエリア)
  :プロジェクトで利用するファイルが全て配置されています。ここで編集するファイルを選択します。
■ Editor Area (エディタエリア)
  :ナビゲータエリアで選択したファイルを編集(コーディング)したり、ユーティリティエリアで選択した部品を iPhone の画面にレイアウトしてアプリの見た目を作成したりします。
■ Utility Area (ユーティリティエリア)
  :エディタエリアで選択した項目の情報の設定や部品の選択ができます。
■ Debugger Area (デバッグエリア)
  :開発したアプリのシミュレーション結果を表示します。
 

iOS シミュレータの実行

7. Toolbar 内でシミュレーションする iPhone のタイプを選択し「 Run ボタン」をクリックすると!!!

f:id:just-be-you:20181008232322p:plain

Mac 上に iPhone が出てきます。
起動中・・・
f:id:just-be-you:20181008233031p:plain

起動後・・・Hello, World 画面が出てきました。
f:id:just-be-you:20181008233155p:plain


画面をクリックするとカラフルな輪っかが現れました。
f:id:just-be-you:20181008235017p:plain


Xcode SpriteKit の基本的な使い方はたったこれだけです。
とても簡単ですね。


 

詐欺メール「 Apple ID がロックされている [ 別のデバイスからログインする ] 」は絶対無視!

こんにちは ism です。

Apple ID 関連の詐欺メール ( フィッシングメール ) の続報です。
これ系は絶対に無視です。

最近出回っている「あなたの心の安らぎの問題。」「すぐにお読みください!」「 AV アラート」「緊急対応!」と同じような詐欺メールです。

 

詐欺メール「 Apple ID がロックされている [ 別のデバイスからログインする ] 」 

無視!

絶対に無視
メールに添付されているファイルをクリックしてはダメです!
これはアカウント情報を抜き取るフィッシングメールです。
詐欺に引っかからないように注意しましょう。

実際の詐欺メール

実際のメールはこんな内容です。
変な日本語です。
f:id:just-be-you:20181007155428p:plain

情報漏洩チェック

念のため、アカウントが乗っ取られていないかの確認と心配な場合はパスワードの変更をしましょう。

メールアドレスを入れるだけで情報漏洩のチェックができる無料サイト
の記事です。
ひとまずこれでチェックしましょう! 

類似メール

「あなたの心の安らぎの問題。」などの類似の詐欺メールに関しての記事 ( 詐欺メールの本文も載せています ) はこちらにあります。
他にもタイトルを変えて送っていると思いますので、このようなメールが届いても焦らず対処しましょう。



詐欺メール「私たちはあなたの Apple ID アカウントを無効にしました」は絶対無視!

こんにちは ism です。

Apple ID 関連の詐欺メール ( フィッシングメール ) です。
これ系は絶対に無視です。

最近出回っている「あなたの心の安らぎの問題。」「すぐにお読みください!」「 AV アラート」「緊急対応!」と同じような詐欺メールです。

 

詐欺メール「私たちはあなたの Apple ID アカウントを無効にしました」

無視!

絶対に無視
メールの中に記載されているリンクをクリックしてはダメです!
もし、リンクをクリックしてしまっても Apple ID アカウント情報を入力しないようにしてください。
これはアカウント情報を抜き取るフィッシングメールです。
詐欺に引っかからないように注意しましょう。

実際の詐欺メール

実際のメールはこんな内容です。
f:id:just-be-you:20181006110729p:plain

情報漏洩チェック

念のため、アカウントが乗っ取られていないかの確認と心配な場合はパスワードの変更をしましょう。

メールアドレスを入れるだけで情報漏洩のチェックができる無料サイト
の記事です。
ひとまずこれでチェックしましょう! 

類似メール

「あなたの心の安らぎの問題。」などの類似の詐欺メールに関しての記事 ( 詐欺メールの本文も載せています ) はこちらにあります。
他にもタイトルを変えて送っていると思いますので、このようなメールが届いても焦らず対処しましょう。



ニトリのポスターフレームがお気に入りユニフォームの額縁に!

こんにちは ism です。

我が家の長男くんや次男くんが使っていたユニフォームやお気に入りの Tシャツなどを部屋に飾ってあげたいと思い額縁を探してみたのですが高価なものばかり。。。

友人から、ニトリのポスターフレームを使ってユニフォームを飾っている人がいる、という事を聞いたので、早速購入し実践してみました。

みなさんも試してみてください。
「お、ねだん以上」ニトリ ♪ です!!!

 

ポスターフレームがユニフォーム額に変身!

f:id:just-be-you:20181005202914p:plain

ユニフォームの配置 

1. ポスターフレームを裏返し、飾りたいユニフォームを配置します。
この時、表側にどのように見えるのか最終形を意識するのがポイントです。
f:id:just-be-you:20181005202119p:plain

 

綺麗にたたんで収納 

2. フレームからはみ出る部分はパタパタとたたんでいきましょう。
f:id:just-be-you:20181005201917p:plain


袖も裾もフレームに収まるように。。。
f:id:just-be-you:20181005201531p:plain

 

ボードをはめる 

3. 裏のボードをはめます。
元々ポスター用の製品なので、分厚い生地のユニフォームだとパンパンになりますが、頑張って押さえつけます。
f:id:just-be-you:20181005201214p:plain

 

出来上がり! 

4. ひっくり返すと出来上がり!
f:id:just-be-you:20181005200850p:plain
ちょっと待った〜!!! これでは納得できません。
左下にシワが見えますね。シワが出ないように ( 自分が納得できるまで ) やり直しましょう。笑
 

サイズは A3 がオススメ!

ニトリのポスターフレームは A1 , A2 , A3 , A4 , B2 , B4 とサイズ展開しています。
また、カラーもダークブラウン , ブラック , ホワイト , ライトブラウンと 4色展開しているので、好きなサイズや好きなカラーを選べます。

f:id:just-be-you:20181002230855p:plain


カラーは飾りたいユニフォームのカラーとの相性、飾る部屋のイメージ、なんなら単純に好き嫌いで選べは良いと思いますが、サイズは A3 がオススメです。

一度 A4 サイズで試してみたのですが、上記のように袖や裾をパタパタとたたんで行くと生地の薄い Tシャツでも厚みが出てしまい、裏のボードが閉まらない感じだったので、せめて A3 ぐらいの大きさでないと収納できないです。
それでもパンパンですが。。。

ちなみに、近くのニトリが展示品限り ( 399 円 ) で売り出していたので買い占めました。
もう1年以上前の話ですが。。。まさに、「お、ねだん以上」ニトリ ♪ です!!!

当時は定価が 761 円と表示されていますが、現在は 740 円で販売しているようです。

f:id:just-be-you:20181005194124p:plain


参考になりましたでしょうか。
みなさんもお試しください。


はてなブログへの楽天アフィリエイトの登録

こんにちは ism です。

はてなブログへの楽天アフィリエイト登録手順を記録しておきます。

大まかな流れとしては、以下の INDEX の通りとなります。
画像を使って記載していますので参考にしてください。 

 

はてなブログへの楽天アフィリエイト ID 登録

f:id:just-be-you:20180930183455p:plain

楽天アフィリエイト ID の確認

1-1. 楽天会員登録をします。( 省略します。笑 )

1-2. 楽天会員ログイン後に、以下のリンクから楽天アフィリエイト ID を確認します。
 https://webservice.rakuten.co.jp/account_affiliate_id/

f:id:just-be-you:20180930170303p:plain


なお、はてなサイトの「 楽天アフィリエイト ID 」欄の横にある「 ID 取得方法」からは 楽天 Developers サイトに行くのですが、そのサイトの中で「 右上のアフィリエイト ID の確認 」を探してみましたが 見つけられませんでした。。。

f:id:just-be-you:20180930165117p:plain

 

楽天アフィリエイト ID を追加

2-1. 「ダッシュボード」の中で「アカウント設定」をクリックすると真ん中あたりに「 Amazon アソシエイト ID 」と言う項目があるので「変更する」をクリックします。

f:id:just-be-you:20180927075726p:plain

 

2-2. はてなサイトに移動するので「 楽天アフィリエイト ID 」欄に楽天サイトで確認した ID を転記し、「変更する」をクリックします。
f:id:just-be-you:20180930164153p:plain


はてなブログへの楽天アフィリエイト ID の登録はこれで完了です。
簡単ですね!!!
 

参考

Amazon アソシエイト・プログラム ( アフィリエイト ) の申請方法はこの記事を参考にしてください。 

はてなブログへの Amazon アソシエイト・プログラム ( アフィリエイト )の登録方法はこの記事を参考にしてください。



詐欺メール「すぐにお読みください!」「 AV アラート」「緊急対応!」は絶対無視!念のためパスワード変更を!

こんにちは ism です。

詐欺メールの続報です。
今度は違うタイトルの詐欺メールを受信しました。

「すぐにお読みください!」や「 AV アラート」や「緊急対応!」というタイトルですが、「あなたの心の安らぎの問題。」と全く同じ内容の文章です。
Bitcoin の価格が $700 だったり $850 だったりしますが、それ以外は全て一緒です。

 

 

詐欺メール「すぐにお読みください!」「 AV アラート」「緊急対応!」

無視!

絶対に無視です。
口を酸っぱくして何度も言いますが、無視です。
無視して問題ないです。
これまでタイトルを変えただけのメール、同じタイトルのメールを合計10通ほど受信しましたが、全て無視しています。

実際の詐欺メール

「あなたの心の安らぎの問題。」に関しての記事 ( 詐欺メールの本文も載せています ) はこちらにあります。

他にもタイトルを変えて送っていると思いますので、このようなメールが届いても焦らず対処しましょう。

情報漏洩チェック

念のため、アカウントが乗っ取られていないかの確認と心配な場合はパスワードの変更をしましょう。

メールアドレスを入れるだけで情報漏洩のチェックができる無料サイトの記事です。
ひとまずこれでチェックしましょう! 



情報漏洩チェック「 Firefox Monitor 」

こんにちは ism です。

詐欺メール「あなたの心の安らぎの問題。」に関連して、パスワードやユーザー ID などの漏洩をチェックできる無料サービスFirefox Monitor 」をお知らせします。

なんと、まだ提供開始したばっかりです!!!( この記事を書いている2018年9月28日現在で... )

しかも、使い方もめちゃくちゃ簡単!
Firefox Monitor 」のサイトでメールアドレスを入れるだけ!

詐欺メールの受信有無に関わらず、ひとまずこれでチェックしてみましょう。
 

 

情報漏洩チェック「 Firefox Monitor 」

Mozilla からメールアドレスを入れるだけで、そのパスワードなどの情報が漏洩しているかどうかを確認できるサービス「 Firefox Monitor 」が提供開始されました。

使い方は簡単です。
Firefox Monitor 」のサイトでメールアドレスを入力し、「 Scan 」をクリックするだけです。
https://monitor.firefox.com

f:id:just-be-you:20180928184804p:plain

何も問題がなければこんな感じです。

f:id:just-be-you:20180928184927p:plain


ところが、漏洩があるとこんな感じになります。

f:id:just-be-you:20180928185053p:plain
情報漏洩したサービス、日時、被害(感染)者数、情報が表示されます。

ここでは、メールアドレス、パスワードのヒント、パスワード、ユーザネームが漏れていると表示されていますね。
これ、友人のアドレスなので、すぐに伝えましたが、発生日時が 2013 年。。。

このサービスは過去にあった情報漏洩だけでなく、情報漏洩が発生してしまった際に通知してくれるサービスも提供しているとの事です。

こちらは、関連する詐欺メールに関する記事です。



詐欺メール「あなたの心の安らぎの問題。」は絶対無視!念のためパスワード変更を!

こんにちは ism です。

変なのきました。詐欺メールってやつです。
これ系は絶対に無視です。
念のため、アカウントが乗っ取られていないかの確認とパスワードの変更をしておけば問題ないですね。

 

詐欺メール「あなたの心の安らぎの問題。」

無視!

絶対に無視

差出人が自分のメールアドレスなのとパスワードまで記載されているので少しドキッとしました。
パスワードの部分は記載がない人もいれば、記載があっても古いものであったり現在使用しているものであったりと人それぞれのようです。

しかし許せないですね。
詐欺に引っかからないように注意しましょう。

実際の詐欺メール

実際のメールはこんな内容です。
日本語が少し変です。

f:id:just-be-you:20180927185203p:plain

情報漏洩チェック

念のため、アカウントが乗っ取られていないかの確認と心配な場合はパスワードの変更をしましょう。

メールアドレスを入れるだけで情報漏洩のチェックができる無料サイト
の記事です。
ひとまずこれでチェックしましょう! 



はてなブログへの Amazon アソシエイト・プログラム ( アフィリエイト ) の登録

こんにちは ism です。

はてなブログへの Amazon アソシエイト・プログラム( アフィリエイト ) 登録手順を記録しておきます。

大まかな流れとしては、以下の INDEX の通りとなります。
画像を使って記載していますので参考にしてください。 

 

はてなブログへの Amazon アソシエイト ID 登録

Amazon アソシエイトIDを追加

1-1. 「ダッシュボード」の中で「アカウント設定」をクリックすると真ん中あたりに「 Amazon アソシエイト ID 」と言う項目があるので「変更する」をクリックします。

f:id:just-be-you:20180927075726p:plain

 

1-2. はてなサイトに移動するので「 Amazon アソシエイト ID 」欄に Amazon サイトで申請した ID を転記し、「変更する」をクリックします。

f:id:just-be-you:20180927080736p:plain


1-3. 設定が反映されているか
確認します。

f:id:just-be-you:20180927191053p:plain


はてなブログへの Amazon アソシエイト ID の登録はこれで完了です。
簡単ですね!!!

( 参考 ) Amazon アソシエイト ID の申請 

Amazon アソシエイト ID の申請はこの記事を参考にしてください。  

 
ちなみに、Amazon アソシエイト ID の申請は、同じ はてなサイト内で「 ID 取得方法 」をクリックすると、Amazon アソシエイト・プログラムのサイトへ移動でき、そのリンク「 Amazon アソシエイト・プログラムのアカウントを取得する」からも申請可能です。

f:id:just-be-you:20180927081257p:plain

f:id:just-be-you:20180927082938p:plain


Amazon アソシエイト・プログラム ( アフィリエイト ) の申請方法

こんにちは ism です。

Amazon アソシエイト・プログラム ( アフィリエイト ) への申請手順を記録しておきます。

大まかな流れとしては、以下の INDEX の通りとなります。
画像を使って記載していますので参考にしてください。


 

Amazon アソシエイト・プログラム ( アフィリエイト ) の申請

f:id:just-be-you:20180927073434p:plain

Amazon サイトにログイン 

1-1. Amazon アソシエイトのサイトで「無料アカウントを作成する」をクリックします。

f:id:just-be-you:20180927073230p:plain


1-2. Amazon アカウントでログインします。

f:id:just-be-you:20180927194716p:plain

 

アカウント情報

1-3. アカウント情報の質問に回答します。

f:id:just-be-you:20180927200510p:plain
以下の各質問に回答し、「 次へ 」をクリックします。
 ・紹介料の受取人についての情報をご入力ください
 ・このアカウントのメイン担当者はどなたですか?
 ・米国の税務上、ご自身は米国人ですか?
 ・法人として登録します

ウェブサイトとモバイルアプリの登録

1-4. ウェブサイトとモバイルアプリの登録を実施します。

f:id:just-be-you:20180927201825p:plain
「 ウェブサイト情報の入力 」欄にブログの URL を記載し「 追加 」をクリックします。
下の枠の中に記載した URL が表示されるので、間違いがないか確認し、「 次へ 」をクリックします。

ウェブサイトとアプリの情報 , トラフィックと収益化

1-5. ウェブサイトとアプリの情報、および、トラフィックと収益化の情報を入力していきます。

f:id:just-be-you:20180927203744p:plain
以下の各項目への入力、あるいは、質問へ回答した後、画像の文字を入力し、「 次へ 」をクリックします。

ウェブサイトとアプリの情報
 ・希望する登録 ID を半角英数字 ( 日本語は不可 ) で入力してください。
 ・Web サイト/モバイルアプリの内容、および紹介したい商品について、簡単にご説明ください。
 ・あなたのウェブサイトまたはモバイルアプリの内容に最も近いと思うものを、次から選んでください。
 ・Amazon の商品のうち、どのようなカテゴリの商品を主に紹介する予定ですか?
 ・あなたのウェブサイトまたはモバイルアプリの種類を選択してください。

トラフィックと収益化
 ・あなたのウェブサイトまたはモバイルアプリの集客に利用している方法は何ですか?
 ・あなたのウェブサイトまたはモバイルアプリの収益化にあたり、主に使用している方法は何ですか?
 ・Web サイトまたはブログのリンクは、通常どのような方法で作成しますか?
 ・あなたのウェブサイトまたはモバイルアプリの月間ユニークビジター数は?
 ・Amazon アソシエイト・プログラムをご利用いただく主な理由は何ですか?
 ・当プログラムをどこでお知りになりましたか?

アカウント認証

1-6. アカウント認証を実施します。

f:id:just-be-you:20180927210318p:plain
電話番号を入力し、「今すぐ電話する」をクリックします。
( クリック後に PIN 番号を入力する画面に変わります。)

すると・・・なんと、エジプトから電話がかかってきました!!!
でも、安心してください。
機械音声によるガイダンスが流れるだけ ( しかも日本語です! ) なので、聞いていれば OK です。

f:id:just-be-you:20180927215136p:plain
ガイダンスが終わると画面に PIN 番号が表示されるので、それを PIN の部分に入力します。

f:id:just-be-you:20180927220703p:plain
アカウント認証が完了したと表示されるので、「アソシエイト・プログラム運営規約に同意します。」にチェックを入れた後、「完了」をクリックします。

申し込み完了

1-7. アソシエイト ID が払い出されます。

f:id:just-be-you:20180927222438p:plain
このアソシエイト ID を利用してアフィリエイトを実施することになります。

はてなブログへの Amazon アソシエイト・プログラム ( アフィリエイト ) の設定はこの記事で確認してください。



ピボット機能付き液晶ディスプレイでマルチディスプレイを実現! ( Mac マルチディスプレイの設定方法 )

こんにちは ism です。

プログラミング超初心者の我が家の長男くんが Xcode を使って iPhoneアプリの開発を始めました。

ただ、分からない事だらけでググりながら開発している ( いや、まだお勉強中... ) ので、MacBook Air の 13インチの画面では使いづらい... (´༎ຶོρ༎ຶོ`) と。

f:id:just-be-you:20180925211441p:plain


そんな経験ありますよね。。。

パワーポイントでプレゼン資料を作成している時に色々と情報が必要になってググったり、エクセルで表を作成している時に関数が分からなくてググったりするものの、画面が小さいと行ったり来たりで使いづらい!作業効率めっちゃ悪い!

あるいは、そもそも何か資料を作る時は画面が大きくないとダメって人も。

そんなイライラの解決策として我が家ではマルチディスプレイを導入することにしました。
どうせなら画面が横にも縦にもなる回転機能付きの液晶ディスプレイにしてみよう!という事で、マルチディスプレイ導入の参考にしてください。

 

ピボット機能付き液晶ディスプレイの準備

f:id:just-be-you:20180924075053p:plain f:id:just-be-you:20180924065527p:plain f:id:just-be-you:20180924075126p:plain

ピボット機能付き液晶ディスプレイ

ネットサーフィンしているとたまに見かける縦置きのディスプレイ。
あれ、カッコ良いなと前から思ってました。

ところで、そもそもあれってどういう機能なの???どこのメーカーの製品なの???

調べてみると、画面が横にも縦にもなる回転可能な事をピボット機能と言うようです。
あ!!! バスケットボールのピボットと同じですね。ちなみに、ピボット ( pivot ) とは「 旋回する」とか「回転軸」とかいう意味です。

ピボット機能付きの液晶ディスプレイを探してみると各社メーカーから色々ありました。

モニターのサイズも 17インチから 30インチ以上まで様々。
我が家は長男くんの部屋の大きさ、と言うか、机の大きさ ( とは言っても、60cm × 110cm なので普通? ) から、19インチから 24インチぐらいまでのもので やっぱり安い方が良いので、2万円以内で予算設定。

ありました! 中でも iiyama 製品がピボット機能、ブルーライトカット、視野角が広いなどなど良さそうなので、ProLiteシリーズの 23インチ液晶ディスプレイを導入する事にしました。

  f:id:just-be-you:20180924074531p:plain

f:id:just-be-you:20180924074855p:plain

Thunderbolt ケーブルの準備

   f:id:just-be-you:20180924110155p:plain

MacBook Air と液晶ディスプレイを接続するために それぞれのインターフェースの規格を確認する必要があります。

Macbook Air 側インターフェース

Apple マーク f:id:just-be-you:20180924092958p:plain」→「この Mac について」→「システムレポート」とクリックして行くと、ハードウェア , ネットワーク , ソフトウェアの情報が確認できます。

ハードウェアの中に Thunderbolt と言う表記があります。
これが液晶ディスプレイと接続するためのインターフェースです。

f:id:just-be-you:20180924153059p:plain


Thunderbolt と言われるこのインターフェースは、高性能なデータデバイスにも高解像度のディスプレイにも接続して使えるもの。
規格としては Thunderbolt 1, Thunderbolt 2 , Thunderbolt 3 とあります。

Thunderbolt 1, Thunderbolt 2 と Thunderbolt 3 では形状が全く違うのでさすがに間違うことはないですね。

f:id:just-be-you:20180924092339p:plain  f:id:just-be-you:20180924092348p:plain

Thunderbolt 1, Thunderbolt 2 は、以下の Mac 端末でサポートされています。
 MacBook Pro ( 2011〜2015 )
 MacBook Air ( Mid 2011 以降 )
 Mac Mini ( Mid 2011 以降 )
 iMac ( Mid 2011〜2015 )
 Mac Pro ( Late 2013 )

Thunderbolt 3 は、以下の Mac 端末でサポートされています。
 MacBook Pro ( 2016 以降 )
 iMac ( 2017 )
 iMac Pro

我が家の MacBook Air は 2015年製なので、Thunderbolt 1,2 対応のケーブルを準備すれば OK です。

液晶ディスプレイ側インターフェース

液晶ディスプレイ側のインターフェースを先ほど導入を決めた iiyama ProLite の製品ページで確認した所、HDMI , DVI , D-Sub とあります。

f:id:just-be-you:20180924110632p:plain

f:id:just-be-you:20180924112025p:plain


はて、HDMI と DVI だとどっちが良いのだろう??? 確か同じはず???と思いましたが、テレビやブルーレイ、ゲーム機などの接続で利用していて我が家では身近な HDMI を選択することとしました。

ゲームやグラフィックデザインが本職の方は、この辺にはこだわりがあるのかもしれませんが、我が家はマルチディスプレイを目指しているので そこそこの解像度で満足です。

Thunderbolt 〜 HDMI 変換ケーブル

   f:id:just-be-you:20180924075935p:plain

それぞれの規格が分かったので、対応するケーブルを準備します。
Thunderbolt 〜 HDMI 変換ケーブルは安くて質の良いものが1,000円ぐらいで準備できます。

オススメは、MacLab. の Thunderbolt HDMI 変換ケーブル 1.8m ホワイト という製品です。
Apple 製品ともマッチする質感のコネクターだったりケーブルだったりします。

Mac と液晶ディスプレイの接続 , 設定 , 調整

ケーブル接続

Thunderbolt 〜 HDMI 変換ケーブルを利用して MacBook Air と液晶ディスプレイを接続します。
これは書くまでもないですね。。。
 

設置のイメトレ

横置きが良いのか縦置きが良いのかイメトレしてみました。(^_^)
実際の見た目はこんな感じです。

■ 横置きの場合

f:id:just-be-you:20180924115542p:plain


■ 縦置きの場合

f:id:just-be-you:20180924115627j:plain
うむ。。。どちらも良い感じです!!! \( ˆoˆ )/

ディスプレイ設定 

続けて、MacBook Airディスプレイ設定をしていきます。

①ディスプレイ設定画面を開く
Apple マーク f:id:just-be-you:20180924092958p:plain」→「システム環境設定」→「ディスプレイ」とクリックして行くと、ディスプレイの設定画面が出てきます。

f:id:just-be-you:20180924141249p:plain

②配置を変えてみる
「 配置 」をクリックし、中央に出てくる画面をドラッグして配置したい場所に移動させます。

f:id:just-be-you:20180924142813p:plain
しっくりくるまで色々と試してみてください。

この時、縦置きだと液晶ディスプレイ側の設定画面がとんでもないことになります。

画面が90度回転しちゃってるので、上下左右がごちゃごちゃになってマウスを上手く操作できません。。。( 頭の切り替えが早い人はこの状態でも大丈夫! )

f:id:just-be-you:20180924144421p:plain


そういう場合は「 ウィンドウを集める 」をクリックしてください。

f:id:just-be-you:20180924151744p:plain


そうすると、内蔵ディスプレイ側の画面 ( 内蔵ディスプレイの後ろ側 ) に外付けディスプレイの設定画面を持ってくる事ができます。
その後、外付けディスプレイの設定画面をクリックして設定を続けます。
f:id:just-be-you:20180924145812p:plain


外付けディスプレイの設定画面の「 回転 」で角度を変更すると、縦置きで正常に画面が表示されます。

f:id:just-be-you:20180924150754p:plain


必要に応じて解像度の設定を変更してください。

f:id:just-be-you:20180924152647p:plain

ミラーリングをオフ
マルチディスプレイにするために「ディスプレイをミラーリング」のチェックを外します。

f:id:just-be-you:20180924150147p:plain

設置調整 

色々やってみたのですが、縦置きはカッコ良いのとスペースを有効に使えるものの、画面の上の方は目線が届きにくいです。
ディスプレイとの距離が近いのか、思った以上に首を上下させる必要がありました。

そこで我が家では結局 横置き、しかも袖机を利用する事でディスプレイを左側に配置する事になりました... (^_^;)

当初は 縦置き右側配置を想定していたのですが真逆になりました。
実際の所、見た目よりも使いやすさを重視ですね。

さらには、プログラミング超初心者な我が家の長男くんは学生でありますから、学生の本文である勉強スペースを確保するのが大事だ!という事でこうなりました。

これが最終形です。
( 写真の通り、机の左側にはしっかりスペースがあけてあります。 )

f:id:just-be-you:20180924120558j:plain


iPhoneアプリを開発するのに必要なモノたち ( Mac , iPhone , 液晶ディスプレイ , ついでにiPadも ) に登場してもらいました。

机が綺麗だと感じるかもしれませんが、今回の環境構築のために大掃除をした事は内緒です... (^_^;)
 

Point!

■ 回転機能 ( ピボット機能 ) 付き液晶ディスプレイで環境に自由度が広がる
Macbook との接続には Thunderbolt ケーブルが必要
■ 縦/横置き , 右左置きは実際に操作しながらの調整が必要

 

iPhone アプリ開発に必要なモノ

iPhoneアプリを開発するのに必要なモノたちはこちらです。 



超初心者が Xcode を使ってみた!!! ( Xcode の使い方 , 超入門編 )

こんにちは ism です。

学校でしかパソコンを触った事がない我が家の長男くんが MacXcode をインストールしました。( iPhone はいじり倒してますが。。。笑 )

そしてついに Xcode を使い始めました。
Xcode の基本的な使い方 ( Xcode 起動から iOSシミュレータの実行まで ) を記録しておきます。

 

Xcode の使い方

Xcode の起動

1.「 Finder 」内で「アプリケーション」フォルダをクリックすると、「 Xcode.app 」が見つかるので、ダブルクリックして Xcode を起動させます。( 今後のために Dock に追加しておくのが良いですね。)

f:id:just-be-you:20181008225159p:plain

プロジェクトの作成

2. Xcode が起動したら「 Create a new Xcode project 」をクリックします。
f:id:just-be-you:20180921214209p:plain

 

テンプレートの選択

3. テンプレートを選択する画面が出てくるので、初期設定「iOS 」,「 Single View App 」のまま「 Next 」をクリックします。

f:id:just-be-you:20180921213953p:plain

 

オプションの選択

4. 「 Product Name 」,「 Organization Name 」,「 Organization Identifier 」,「 Language 」の設定をします。

f:id:just-be-you:20180921221505p:plain

■ Product Name (プロジェクト名)
  :好きな名前をつけましょう。
■ Organization Name (組織名)
  :任意の名前( = 適当)でOKです。
■ Organization Identifier (組織識別子)
  :任意の値( = 適当)でOKです。
■ Language (プログラミング言語)
  :Swift か Objectibe-C を選択します。初期設定のまま Swift を選びましょう。

プロジェクト保存先の選択

5. プロジェクトの保存先を決めて「 Create 」をクリックするとプロジェクトが作成されます \( ˆoˆ )/

f:id:just-be-you:20180927193216p:plain
 

Xcodeの画面構成

6. Xcode の画面ってこんな感じです。。。

f:id:just-be-you:20180921225048p:plain

Toolbar (ツールバー)
  :開発したアプリのシミュレーションを実行するボタンや各エリア( Navigator area , Utility area , Debugger area )を開け閉めするボタンがあります。
Navigator area (ナビゲータエリア)
  :プロジェクトで利用するファイルが全て配置されています。ここで編集するファイルを選択します。
■ Editor area (エディタエリア)
  :ナビゲータエリアで選択したファイルを編集(コーディング)したり、ユーティリティエリアで選択した部品を iPhone の画面にレイアウトしてアプリの見た目を作成したりします。
■ Utility area (ユーティリティエリア)
  :エディタエリアで選択した項目の情報の設定や部品の選択ができます。
■ Debugger area (デバッグエリア)
  :開発したアプリのシミュレーション結果を表示します。

iOS シミュレータの実行

7. プロジェクトを作成しただけで、まだ何もプログラミングは始まっていないのですが、我が家の長男くんが「再生ボタン ( 正確にはRunボタン )」をポチッとすると・・・

f:id:just-be-you:20180921231631p:plain

な、なんと、Mac 上に iPhone が出てきました!!!
起動中・・・実機に電源を入れた時と同じように左から右にバーがスライドしていきます。

f:id:just-be-you:20180921233758p:plain

起動後・・・真っ白な画面が出てきました。

f:id:just-be-you:20180921233917p:plain

いくら待っても何も変わらないのでこれはもしや?!?!と画面下側にあるバーを上にスワイプさせると、、、おぉ〜!!! iPhone XS Max との感動のご対面です。

ホームボタンがない機種の操作方法はスワイプが基本だよと我が家の次男くんが教えてくれました... (^_^;)

f:id:just-be-you:20180921234603p:plain

 
実際はアプリを作ってこのシミュレータを動かす事で、真っ白な画面じゃなく長男くんがレイアウトした画面が出てきて、実機で確認する前の正常性を確認できるのですね。

いや〜最初は Xcode ってどんなモノなんだろう?と思っていましたが、めちゃくちゃ優れモノです!!!

 

Point!

■ まずはプロジェクトを作ろう!
iOS シミュレータがすごい!!!


Xcode の使い方が分かったので、これからは実際にプログラミング開始ですね。


超初心者が Xcode をインストールしてみる! ( Xcode のインストール方法 )

こんにちは ism です。

MaciPhoneアプリを作るという超初心者の我が家の長男くん。
Xcode なる開発ツールをインストールするとのこと。

早速、Xcode のインストール手順 ( Xcode 入手から起動まで ) を確認しながら進めたいと思います。
 

 

App Store から入手する

f:id:just-be-you:20180922062920p:plain


XcodeApp Store から無料で入手できます。
検索するまでもなく、ありました。 しかも、こんな上位に?!?!
そんなにみんなアプリを作っているんですかね・・・す、すごい。。。。(^_^;)

Xcode をインストールする

App StoreXcode をポチっ!
すると、Xcodeダウンロードサイトに行くので、あとは順番に、、、

  f:id:just-be-you:20180920140804p:plain

「入手」をクリックし、 Apple ID とパスワードを入力、と続けていくだけですね。

  f:id:just-be-you:20180920135126p:plain

インストールが始まりました。
が、長い!!! 1時間ぐらい??? そんなに大きいファイルなの???

と言うことで、情報欄を確認してみると・・・
サイズ : 5.90 GB !!!
そりゃ時間がかかりますね。 気長に待ちましょう。。。

  f:id:just-be-you:20180920140651p:plain
ちなみに Xcode で開発できるアプリケーションは Mac , iPhone , iPad , Apple TV , Apple Watch となっています。

Xcode を起動させる

インストールが終わるとあとは開くだけです。
  f:id:just-be-you:20180920141317p:plain

Xcode を起動させるとこんな感じの画面が出てきます。

f:id:just-be-you:20180920142109p:plain

Welcome to Xcode!!!
もう 後戻りできません!!!

Mac 端末側の条件

Xcode は基本的に Mac 端末上でのみ動作する開発ツールです。
Windows端末ではダメなんですね・・・って当たり前か。。。
( 方法はあるのかも知れませんが、専門家の方にお任せします。)

しかも、Mac 端末でも OS に注意しないといけません。
ズバリ 最新の Xcode 10.0 は macOS 10.13.6 で使いましょう!という事です。

  f:id:just-be-you:20180920145237p:plain

 

今回のポイント!

Point!

App Store から Xcode を入手する
Xcode のダウンロードには時間がかかる!
MAC ( macOS ) のバーションに注意!


次回は、実際に Xcode を使っているところを追いかけたいと思います。


iPhoneアプリ開発には Mac があれば良い!!! ( iPhoneアプリ開発に必要なもの )

こんにちは ism です。

プログラミングなど無縁な我が家の長男くんが iPhoneアプリを作ってみる!とのことです。

iPhoneアプリを開発するには何が必要なの??? どうやって作るの???

知らない事だらけなので、iPhoneアプリの開発に必要なものが何なのか調べてみたいと思います。

 

iPhoneアプリ開発に必要なもの

Mac があれば良い!!!

まぢで??? それだけ???
はい。それだけで良いんです。
Mac さえあれば iPhoneアプリが作れちゃうんです!

  f:id:just-be-you:20180919134846p:plain
でも、どんな Mac でも良いってわけじゃないんです。
昔使ってた Mac があるからそれで良いや♪ とはいかないようです。

Xcode をインストールする

iPhoneアプリの開発には Xcode という開発ツールを使う(らしい)のですが、そのツールを動かせる事が条件になります。
最新(2018年9月19日時点)の Xcode のバージョンは 10.0 なので、それが動作する Mac が必要という事ですね。

  f:id:just-be-you:20180919134316p:plain

我が家では MacBook Air ( macOS High Sierra バージョン 10.13.6 ) を利用しています。
この MacXcode をインストールして iPhoneアプリを開発していくことにしました。 



無事、iPhoneアプリが出来たら・・・

iPhone (実機)で確認する

当然、最後は実機での確認が必要ですね。

  f:id:just-be-you:20180919150818p:plain

我が家はアップル製品が好きで、スマホは家族全員 iPhone を使っています。
YouTube をみる時は iPad を使っています。
結果、MacBook , iPhone ( iPad ) と開発環境が整ってることに!
XcodeApp Store から無料で入手できるので、新たな初期投資が発生しないですみました。(笑)

準備は整いました!
思う存分 iPhoneアプリを開発してもらいましょう!!!

簡単ですね!!!
言うだけなら。。。 

さて、おさらいです。
iPhoneアプリの開発に必要な三種の神器は Mac , Xcode , iPhone です。

Point!

Mac を準備する
Xcode をインストールする
iPhone で確認する


ちなみに、プログラミングには Swift という言語を使うようです。。。
プログラミング無縁な我が家の長男くんが Xcode という開発ツールを使いこなせるのか、Swift というプログラミング言語を使いこなせるのか、楽しみです。