アラフォーからのプログラミングとデザイン

大人から始めたプログラミングとデザインについてのあれこれ

久しぶりにDotinstallにはまってます。

f:id:simpledancer:20180623172907p:plain

久しぶりにドットインストールにハマってます。

というのは最近ちょっと友人のアプリの開発のリサーチを手伝うことになったのですが

やっぱり、自分で開発する力をつけるには

何か成果物を自分なりに作っていく必要があるな〜と思いました。

そこで、簡単なものから作るため、もう一度html cssから復習をすることにしました。

昔は呪文にしか聞こえなかったものが、普通に理解できていた

html cssの基礎をまた復習でザザっとポートフォリオをサンプル作って見たら

びっくりするくらい内容が入ってくるではありませんか！！？

たまに、うまく反映されなくても、どこが悪いのか、自分ですぐに見つけることができるようになってるし

ああ、これはディレクトリが間違ってるな

コンマが抜けてるな

半角じゃないな

etc

もちろん、html　cssは厳密に言ってプログラミング言語ではないのですが

２年ほど前までは、何を言ってるのか意味不明でコードを書いていたのに！！

まああゆみは遅いものの

ちょっと感動しました。

で、スピード早い喋り口調だけど、結構理解できてるし。

すごいな私！とちょっと褒めてあげる。

ドットインストールブートキャンプ的なことをします

ドットインストールはたくさんのコースがあって

無料版でも恐ろしい本数のビデオがみることができます。私も結構な数をこなしているのですが、それでもまだまだ終わりません。

そういうわけで、復習も兼ねて

html,css,Ruby,PHP,Javascript　あたりのレッスンビデをまずは無料版のところを全て

やってやろう！！と思い立ちました。

あといくつあるのかな。。

とりあえず復習だと思ってサンプルサイトをひたすら作って体に染み込ませるトレーニングをしていこうと思います。

 

エンジニア歴10年のフリーランサーに仕事を受注するのにオススメな勉強本を聞いてみた。

エンジニア やりたいこと

f:id:simpledancer:20180215104851j:plain

先日元某外資系g社の友人と会って、その時に共同開発のお友達を紹介していただいた。

その時に初めて私がプログラミングをちょっと勉強していることを話したところ

オススメの本と仕事受注するのには割とここがいいっていうエージェントを聞いてきました。

その彼はエンジニアをしながら好きなことでフリーランスで食べているという、もう私からするとかなり憧れの生き方の人！今度は勉強会も開催するようなので参加してきます。

オススメの本

現状のエージェントが紹介する案件の需要としては front sideでは vue.js か react というフレームワークserver sideでは rubyが圧倒的に多いです！

とのことだったので、ruby好きの私にはよかった！

オススメの本はこちらだそうです。

Vue.Js

私はこのフレームワーク知りませんでした！

 

基礎から学ぶ Vue.js
posted with ヨメレバ
mio シーアンドアール研究所 2018-05-29
Amazon
Kindle
楽天ブックス
楽天kobo

Ruby

この本は私も持ってます！

 

プロを目指す人のためのRuby入門 言語仕様からテスト駆動開発・デバッグ技法まで (Software Design plusシリーズ)
posted with ヨメレバ
伊藤 淳一 技術評論社 2017-11-25
Amazon
Kindle
楽天ブックス
楽天kobo
 

 

そういえば最近やってないけど。

まずはRubyの本の方を再度復習するか。。。って感じですね。

自分のやりたい生き方をしている人に相談することって大事

私が最初に行ったのがJavaの企業の無料研修。

これは完全に失敗でした！企業自体のカラーが私には耐えられなかったし、とにかくJavaが難しすぎました。

そのあとにフリーランスという生き方を知り、これだーーーー！って思ったのですが

やっぱりハードルが高かったです。

憧れではあるけど、いまいち自分のやりたい生き方をしている人がちょっといなくて。

ゴリゴリのエンジニアor 趣味はアニメやゲームって人が多かったかな。あとは起業家とか。

私、、起業家を目指してるわけじゃないしな。。。。

とはんばプログラミングは傍に起き、ブログに精を出していたところ、アプリ開発のリサーチとして久々に友人に紹介してもらったそのエンジニアさんは

ダンスをしながら開発もしてアプリ作ったりプログラミング講師もしてるって

私の理想の生き方をしていました。

自分の作りたいものを作りながらプログラミングに慣れる→業務委託でエージェントを利用して受託する。この流れがオススメだとのことです。

（ま、簡単に作れないけど！）

すぐにはもちろんそういう生き方はできないけれど、私は正社員じゃなくてパフォーマンスを続けながら、開発に携わりたい。その思いを聞いて色々アドバイスをいただけました。やっぱり自分のやりたいロールモデルがはっきりしてるとやることがはっきりしてきますね。

 

そんなわけで、また勉強熱が復活してきました〜！

アプリについてはまだまだ構想段階ですが試作ばんを見せてもらったところ面白い！！でしたのでリリースされたら告知します！

 

ドメインの期限切れ、更新し忘れ気をつけよう！

Wordpress

f:id:simpledancer:20171207113042j:plain

おそらく、自分でブログやHPを運営している人は直接通知が来るとは思いますが

ドメイン（.com とか.netなど)期限切れ、意外と放置していると、知らない間に期限切れでサイトが見れなくなってる場合があります。

私の場合ははてなブログでしか、今運営していないのではてなさんからしか通知が来ないのですけど、もし独自ドメインで運営されている方は、期限切れ通知気にした方が良いです！

人任せで放置していたイベントHPがまったく別ジャンルのアフィリサイトになっていた！

さっき知人のサイトをリンク貼るためにのぞいたら、アフィリエイトサイトになっていました！

本人に確認したところ、サイトを作ったのは別の人だそうで、バックアップをとっているかも謎。

サイト自体がなくなるのも悲しいけど全く別の脱毛アフィリエイトサイトになっていたので、イベントを知りたくてサイトを訪れた人はがっかりしてしまいますよね。

なので独自ドメインで運営されている人は期限切れ、通知は見逃さないようにしましょう！もし見逃した場合に備えてバックアップとっておくとかの処置はしておいた方がいいかも。。

 

"もしものとき"のバックアップ＆復元【torocca!】

 

infinityakira-wp.com

はてなブログで吹き出しのcssを入れる方法をやって見た

f:id:simpledancer:20180513153821p:plain

はい、これは別のブログで吹き出しを入れて見ました！

acro-y.hatenadiary.com

ちなみにこのブログと一緒でテーマはzerotealです！

とっても簡単なのに可愛くなるのでよかったらカスタマイズして見てください！

吹き出しを作る

  1. はてなブログのデザイン→デザインcssのところにコードを書きます。（下記ブログ参照させていただきました）
/* 吹き出しのCSS　*/
.entry-content .l-fuki,
.entry-content .r-fuki {
	position: relative;
	width: 80%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: 20px;
	border-radius: 6px;
	border: 2px solid #999;
	box-shadow: 1px 1px 5px #aaa;
	background-color: #fff;
	z-index: 1;
}
.entry-content .l-fuki {
	margin: 20px 20% 40px 0;
}
.entry-content .r-fuki {
	margin: 20px 0 40px 19%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
	position: absolute;
	content: "";
	top: 16px;
	width: 10px;
	height: 10px;
	border-right: 2px solid #999;
	border-bottom: 2px solid #999;
	background-color: #fff;
	z-index: 2;
}
.entry-content .l-fuki::before {
	right: -7px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
	position: absolute;
	content: "";
	width: 80px;
	height: 80px;
	top: -10px;
	border-radius: 40px;
	border: 3px solid #fff;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	box-shadow: 1px 1px 5px #aaa;
}
.entry-content .l-fuki::after {
	right: -110px;
}
.entry-content .r-fuki::after {
	left: -110px;
}
@media screen and (max-width: 620px) {
	.entry-content .l-fuki,
	.entry-content .r-fuki {
		width: 70%
	}
	.entry-content .l-fuki {
		margin-right: 30%;
	}
	.entry-content .r-fuki {
		margin-left: 30%;
	}
}
@media screen and (max-width: 478px) {
	.entry-content .l-fuki::after,
	.entry-content .r-fuki::after {
		width: 60px;
		height: 60px;
		border-radius: 30px;
	}
	.entry-content .l-fuki::after {
		right: -84px;
	}
	.entry-content .r-fuki::after {
		left: -84px;
	}
}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}
  1. クラス名は任意で好きなもの　私は例えばuki.class とかにする。
  2. urlにはてなフォトライフに入っている画像のアドレスを貼り付ける（右クリックorコマンドクリックで画像のアドレスをコピーが出てきます）
  3. 記事のhtmlに<p class= ”r-fuki クラス名”>文章</p>とpタグの中に打ち込む。rなら右側に画像が、l-fuki なら左側に画像が来ます。

すごい簡単。

www.notitle-weblog.com

 

ローカル開発環境でもやってみよう！無料でできるプログラミング勉強から始める。

f:id:simpledancer:20180215105028j:plain


前回のブログから１ヶ月近く空いてしまいました！

書こう書こうと思いながら。。。！

この１ヶ月の間に出張あり、引っ越しありでバタバタしておりましたが、やっと今週は片付けもひと段落し（今週また出張だけど）、再びプログラミングをはじめました。

  

simpledancer.hatenablog.com 

simpledancer.hatenablog.com

 

ローカル開発環境でサンプルサイトを作ってみた

 

simpledancer.hatenablog.com

 

私はTechAcademy [テックアカデミー] もUdemy とかほとんどcloud9で作っていたのですが

今回は一念発起（言い過ぎ）してローカル開発環境で作ってみようと思いました！

１年くらい前に知り合いのプログラマーの方に聴きながら開発環境は整えていたものの（Macなので簡単でしたが）やっぱりちょっとやりにくそうで敬遠していました。

今回はSkillhubという無料で公開しているサイトの動画をみながらのblogサイトを作ってみました。

難しかったことは、基本的にはやってることはcloud9と一緒なんだけど

ディレクトリの概念？がついたのかな、、？という気がします。

自分のPCの中身の階層について整理がついてきたというか（今更！）

なのでcloud9で文法の基礎を身につけたらローカル開発環境でやってみることもお勧めします！

simpledancer.hatenablog.com

注目のAidemyもチャレンジ

最近注目されているAidemyもちょっと初めてみました！

AIの勉強をしたい人にはとっても手軽なサービスだと思います！まだ最初のフリー版しかやってないけど。

ちなみにAidemyは環境構築一切いりません！

前にオンライン学習サービス「PyQ™（パイキュー）」というPythonのサービスも試してみたのですが、ボリュームが多すぎて途中から全然手をつけられなくなってきたので、がっつりやるのでないならば、まずはフリーのものから試してみるのがいいのかなって思いました。Pythonのコードはとってもシンプルなので個人的にはとても好きだなあと感じるから、また復活はしたいのです。 

simpledancer.hatenablog.com

無料の勉強法でやりやすく感じる順番 

私はプログラミングは仕事としてはまだやってないので、単に個人的な主観ですが。。

いきなりドットインストールを見だすと頭が？？？？？？？しか沸かないw

あくまで無料でRuby勉強からはじめたとしたら、いきなりRuby on Railsを先生なしで始めるのではなく

Progate(無料版）

↓

Skillhub(無料）

↓

Dotinstall(無料）

↓

Railsチュートリアル（無料）

 

の順番がいいんじゃないかと思いました！（Railsチュートリアルは、やっぱり難しいけどある程度理解ができてくると、納得しながら進められると思う）あとは自分でググる、質問サイトteratailを利用する　など調べる癖をどんどんつけることなのかな〜。

 あとは無料体験をやってる有料のプログラミングスクールがたくさんあるので、まず無料体験でやりやすさを試してみるのもお勧めです！

 

ローカル開発環境でrails sでエラーが出た時の解決方法

Ruby on rails

f:id:simpledancer:20180329174002p:plain

ローカル開発環境に慣れよう！そう思ってブログアプリを作り始めたんですが、のっけからエラーが出ました。

全国送料無料！IT書、ビジネス書、資格書が豊富なSEshop

 

rails serverが起動しない。。。

とりあえずcloud9で作ると簡単に上のrailsの画面が出るですが、エラーが出てしまう。

localhost:3000 

こいつを打ち間違えているのか。。。と

良く見たらターミナル上にload errorと出ていました。

rbenv exec gem install bundle

このコマンドを打ち込むとgemがインストールされました

さらに

bundle install

します。そのあと rails sするとサーバーが起動！（ただし　webrickじゃなくてpumaだけど、いいのかなこれ）

一応サーバーが動きましたよ。

この辺のことがいまいち良く理解できていないんですよね。。

プログラミングの文法とかも大事だけどこの辺りの仕組みも理解しないとな。。なんて思ってます。

とりあえず解決。。メモがてらブログに書いて見ました！

参考にさせていただいたブログはこちら。ありがとうございました！

ylgbk.hatenablog.com

 

No such file or directory と出たときの解決方法

Ruby エンジニア プログラミング

f:id:simpledancer:20180315120621p:plain

ローカル開発環境で始めてみました。

さっきはRubyのバージョンをアップデートするのに時間をかけ

 

simpledancer.hatenablog.com

 

今度は

No such file or directory -- sample.rb (LoadError)

のエラーの原因がわからず。

意味はわかりますよ

$ ruby sample.rb

で呼び出したいのに上記のエラーが出たわけです。

デスクトップに保存したのになぜだろう。。。？

 

simpledancer.hatenablog.com

 

原因はディレクトリに移動していなかったから

単純な理解ミスというか

ターミナルにruby ファイル名　で打ち込めば表示されると思っていたのですが

そもそも　cd でディレクトリに移動していなかったのでファイルが見つからなかったのですね。

http://wa3.i-3-i.info/word1537.html

クラウド９でやっていたときは「あ！」って気づくのに

全然気がつきませんでした。

そういうわけで

#desktopディレクトリに移動する

$ cd desktop

#desktopに置いてあるrubyファイルを表示する

$ ruby sample.rb

 

これで無事に呼び出して表示することができました。

こんな最初の最初で躓くとは。。。（泣）

手順まとめ

  1. テキストエディタで書いたコードをrubyの形式で保存する　例：sample.rb
  2. ターミナル常に　cd 保存した場所　で移動　例：$ cd desktop
  3. ファイル指定　ruby ファイル名 例 $ ruby sample.rb
  4. ターミナルにファイルの内容の結果が表示される。

参考にした記事

detail.chiebukuro.yahoo.co.jp

 独学の人はやはりこちらのteratailを登録して質問できるようにしておきましょう！過去のQ&Aに大抵の質問が載ってますが探してわからない場合は一人で悩むより何かしらの解決になるのでサクッと質問しましょう！！

teratailに登録する!

 

 

simpledancer.hatenablog.com

 

ローカル開発環境でRubyのバージョンアップ（Mac)

Ruby プログラミング

f:id:simpledancer:20180228113608j:plain


放置していたローカル開発環境のRubyのバージョンアップ。

前回出張のついでにローカルでやろうとしたらエラーが出て。。。

イラっとしてcloud9でやるかな。。。と思っていたけれどそれも放置していました。

でちょっと時間ができたので、重い腰をあげてまたローカル開発環境を設定することにしました。

 

simpledancer.hatenablog.com

 

「プロを目指す人のためのRuby入門 言語仕様からテスト駆動開発・デバッグ技法まで (Software Design plusシリーズ)」ではRubyのバージョンが2.4.1なのでそれにするためにやったこと。

rbenvで

ターミナルに打ち込んでいくのですが、こちらのQiitaの記事通りにやったら全てうまくいきました。ありがとうございます。

qiita.com

ちなみにrbenvとは・・・？

コマンドラインツール。
rvmと同じように、複数のRubyのバージョンを管理できますし、rbenvを使用する場合はrbenvをまずインストールする必要があります。

しかし、rbenv本体にはRubyのインストール機能はついていません。(rvmはインストール等をrvm単体で行えます)
rbenvはRubyのバージョンの切り替え機能しか提供していません。

rbenvでRubyを簡単にインストールする場合は、ruby-buildが必要になります。
(ruby-buildを入れなくても、自分でソースコードを持ってきてインストールもできます)
rbenv、ruby-buildはともにGitHubからcloneしてくることができます。

rbenvは単機能で、プラグイン等を入れることによって機能を追加することができます(ruby-buildのように)。そのため、rbenv本体はrvmよりも軽量でコンパクトなコマンドラインツールです。

開発を進めていくことを考えると、rvmやrbenvを使用するほうがよさそうですね。

qiita.com

ずっとcloud9を使っていたからrbenvとかなんのこっちゃ？？だったのでこの機会に。

Ruby初めて１年以上が経つというのに全然理解してなかったです。

ちなみに、人は８割くらいのことを一晩で忘れるそうです！復習することで忘れにくくなるというわけですね。

 

 ちなみにUdemy で学べるRubyのシリーズがまたセールで今は1200円とのこと！

 

f:id:simpledancer:20180315103528p:plain

一応1200円が今までの最安値だと思います！

このコースは全くの初心者からでも全然できました！Rubyをざっくりと理解するにはおすすめです！

Rubyで作る! ビットコイン自動売買システム

 

 

simpledancer.hatenablog.com

 

 

simpledancer.hatenablog.com

 

simpledancer.hatenablog.com

 

プロを目指すためのRuby入門を購入しました！また勉強復活！

Ruby

f:id:simpledancer:20180215104851j:plain


 

プロを目指す人のためのRuby入門 言語仕様からテスト駆動開発・デバッグ技法まで (Software Design plusシリーズ)

をやっと購入しました！

店舗で買おうと思っていたのだけれど、重いし。。。

電子書籍。。。技術本は見にくいよね。。

プロを目指す人のためのRuby入門
posted with ヨメレバ
伊藤淳一（プログラミング） 技術評論社 2017年11月25日
Amazon
Kindle
楽天ブックス
 

 

でAmazonで買おうと思ったら在庫切れなのか？配送予定が随分先に設定されていたので楽天で買いました！在庫あり、しかも期間限定のポイントが残っていたので楽天ブックスで購入しました！

色々言語を渡り歩いてやっぱりRubyにまた戻る

Swift4もまだやってますが、Xcodeのエラーが直らず

気分転換にProgateをやりまくりましたw

Rubyはなんだかんだ一番落ち着きます。。。

で、Udemyで買おうかと思っていましたが、前から気になっていたRuby本を買うことにしました。出張続きでなかなか手がつけられなかったのだけれど、またプログラミング熱が高まってきたので頑張ってやります。

 

備忘録：iCloudなどの設定変更の際に過去IDのパスワードを何度も求められる時の解決方法

やりたいこと

f:id:simpledancer:20180215105028j:plain


先日iMovieを使わなくならなくて、そのためにはアップデートしなくてはいけないんだけれど、もう使ってない過去のメールアドレスのIDが表示されて、これのパスワード入れろって。

そのパスワードを入れたからって起動するわけでもなく

使ってない（と言うか昔の携帯のメアドだからメール自体も送られてもみることができない）

どうすればいいのか、先に進まない。。。！

必ずサインアウトしよう

ちなみにこう行った諸々がここまで面倒だと思っていなかったのでicloudは放置していたんです。。

appleIDを変える際、必ずサインインしていたものを全てサインアウトしておくと言うことが必要だったようです。

参考にしたブログなどはこっちのブログに書いておきました。

simplelifedancer.hatenablog.com

マジで大変だった〜

もし、面倒でも、理解できたらパパッとできるはずなので

放置してる人はこの機会に変更しておいてくださいね！

ストレスが随分減りますから！

そう言うわけでiMovieに時間を取られて今週は全くプログラミングやってませんでした。。

続きやりま〜す

simpledancer.hatenablog.com

Swift4でiOSアプリを作る　その４：タイマーアプリ

Swift4 プログラミング

f:id:simpledancer:20180128180528p:plain

今回は少し時間が空いてしまいましたがタイマーアプリを作るレクチャーを勉強しました。

これまでのと違って画面が2画面になりますので少し複雑になります。

simpledancer.hatenablog.com

タイマーアプリ概要

  1. タイマーを選択する
  2. 次の画面に移動しスタート・ストップボタン画面でストップウォッチやキッチンタイマーのような感じで利用する。
  3. メッセージ内容や秒数などはカスタマイズしてみる。

こんな感じのシンプルなタイマーです。

アプリ製作の流れ

作業自体はシンプルでしたが2画面作るので前回よりも少し複雑化

simpledancer.hatenablog.com

simpledancer.hatenablog.com

segueという操作が今までと違うところ

細かい概要は省きますが、今回はsegue(セグエ）という操作があります。

i-app-tec.com

yuu.1000quu.com

セグエとは画面遷移のことなんですが、最初に書いたようにこのタイマーアプリは２画面ありますのでそのためこのセグエという操作が必要になってきます。

Swift4はまだ始めたばかりでXcodeの使い方が慣れていませんが、直感的なのでやはりこれは書籍で学ぶより動画で学んだ方がやりやすいような。。（気がする）

ブログで説明するにもなんか説明しにくい！

ドラッグアンドドロップドラッグ&ドロップを結構やってるイメージ（大雑把）

文法はProgateでも学べます

プログラミングの無料学習サービスprogateも最近Swift4が出てましたので文法的なことはこちらからも学べます。

prog-8.com

スマホ版も出たそうですが、私はなぜかログインできないので原因を探っております。

講師の井上先生が優しい

このレッスンの井上先生のお言葉が優しくてプログラミングの学習者には嬉しいです。

たまにお知らせが入ってくるのですが他のレッスンよりもこういうお知らせがこの先生は多く発信してくれていると思います。

現在、私たちが提供しているコースは日々バージョンアップが発生するTensorFlowやPyTorchなどのライブラリを使用しています。こうしたライブラリは毎日のように進化していて、またオープンソースでプログラムを公開し、ユーザーからのフィードバックを元に高速に開発を進めています。そのため、毎日コードが変わる可能性があります。そこで、いちいちパニックすると学習が頓挫してしまいます。

疲れ果てる必要はなく、メッセージをよく見て、それがエラーなのか、開発のための注意（ワーニング）なのか、を冷静に判断し、問題があれば事例を調べたり、質問したりして、あきらめずにコツコツ解決していく必要があります。

問題解決の際に有効な手順には以下のような方法があります。

１．エラーメッセージをGoogle検索してみる

エラーメッセージをコピー＆ペーストして検索するとメジャーなライブラリであれば、すでにトラブルに遭遇した事例が見つかります。その多くは、

  • StackOverFlow
  • ライブラリを公開しているリポジトリへのコメント

などです。まずはこれを解読して、どの事象と自分の問題が一緒なのか、ということを確認して、そこに書かれている解決策（エンジニアが回答していることが多い）を試してみましょう。

２．エラーメッセージを解読する

まず、エラーなのか、ワーニング（注意）なのか、を見定めましょう。

そして、スクリーンショットを添えて、Q&Aフォーラムに投稿しましょう。

３．仕組みを理解する

講師と全く同じ操作をトレースすることをゴールにするのではなく、動作の仕組み、

  • どのプログラムがどのように呼び出されているのか
  • どのような形状のデータを扱っているのか

を確認しましょう。

プログラムについてはPythonの場合は、site-packagesというフォルダ以下にライブラリのソースコードが存在しています。

import from tensorflow

とあれば、tensorflowというフォルダの中にプログラムが存在しています。

データの形状については、Jupyter Notebookなどで

  • 変数名を入れてセルを実行する
  • len（配列名）でサイズを表示する

などとして、データの形状や長さを確認できます。

プログラムが動くまであきらめずに対応することが大切で、模範解答をなぞることがゴールではありません。

それではパニックしないでプログラミング学習を進めていきましょう！

Happy Coding!

そういうわけで井上先生のUdemy はオススメです。

iOS11アプリ開発オンライン講座

 

とりあえず、今は動画を追いながらコードを模写したり動かしてみるのが精一杯でうまくブログがかけないんだけど。というかいつまで初心者なの私？何だけど。出張先でもちょこちょこ進めております。

iOSアプリその2：Swift4でカメラアプリを作ってみる

Swift4

6日間でできる様になろう！と思っていたけど

なんだかんだとダラダラしていたらまだ2つ目のアプリ。

だけどまあ、なんとかマイペースに進めています。

先日は１つマップアプリを作りました。

simpledancer.hatenablog.com

なんというか、難しいことはなかったのですが、Xcode自体に慣れてないので

探り探りというかんじ。

まずは最初は慣れていくことを目標にやっていきたいと思います。

カメラアプリを作ろう

アプリの機能

  • 写真を取れる機能
  • 撮った写真をSNSにアップする機能

この2つの機能を備えたアプリを作ります。

このブログでは細かいコードなどは転載しません。ざっくり流れだけ復習のために書きました。

必要な機能とボタンを作る

UIimage viewとButtonを右下から選び、ドラッグ&ドロップをする。

そしてそれぞれのレイアウトを調整して行く作業。

f:id:simpledancer:20180117173258p:plain

ボタンは

カメラを起動する・SNS投稿の２つ。

ボタンの色・フォントの色を決める 

変えたいviewボタンをクリックすると右側に色がえらベる様になります。

アトリビュートインスペクターの表示にして

ボタンのbackgroundcolorとtextcolorをお好みのものに変えます。

viewの中のbackgroundcolorを選ぶとotherという項目があるのでそこをクリックすると

カラーパレットが出てくるのでそこから選ぶこともできます。

f:id:simpledancer:20180119184830p:plain

UIパーツとプログラムを関連させる

UIイメージの画面とコードを連携させる作業をする。

それぞれイメージview、カメラを起動ボタン、SNS投稿ボタンの３つを

コントロールボタンで引っ張ってコードにつけてそれぞれの関連づけを行います。

ちなみにクラスの名前をつけるときはSwift4はスネークケース型が主流だそうです。

simpledancer.hatenablog.com

カメラの起動確認を作る

  • カメラの起動を確認するメッセージの追加→infoからカメラのrequireを変更
  • カメラにアクセスするコードを書く

撮った写真をSNSに投稿する機能を作る。

完成したけど動かない場合。。

iPhoneのosアップデートが最新のものではない場合実機では動きません。

なのでiPhoneのOSをアップデートしておく必要があります！

私は早速アップデートしてなかったので動きませんでした。

今日から遠征で地方にきてるため時間が空いたらまたアップデートしようと思ってます。。

作ってみた感想

OSのアップデートをしていないのでまだ実機では動かせていませんが。

コード自体はかなりシンプルでわかりやすいです。

多分イメージと連携させるからSwift4で作るのはすごく直感的でわかりやすいのかもしれません。

すごく細かい説明とかはないiOS11アプリ開発オンライン講座 コースですけど、逆に言われたままそのまま作るとできるw

手をとりあえず動かす練習になるのでプログラミング始めたばかりの人にはオススメなコースだと思いました。

iOS11アプリ開発オンライン講座

 

今回もざっくりですがまたそのうち詳しく内容をアップします。

 

iOSアプリその１：Swift4でマップアプリを作ってみる

Swift4

f:id:simpledancer:20180115120710p:plain

先日購入したUdemy のiOS11アプリ開発オンライン講座

まずはxcode９のアップグレードなどを経て１つ目のアプリを作っていきます。

まず最初はマップアプリを作ろう！

simpledancer.hatenablog.com

Mapアプリ概要

iPhone上で地図を表示し、検索窓からキーボードで地名を入力しマップ上にピンを刺す。というだけのアプリです。

至極シンプルな動作ですがまずは作ります。

シミュレータ/実機iPhoneにマップを表示させる

まずはピンや検索などを考えずにiPhone常にマップを表示させるために

MapKitというライブラリを選択しておきます。

そして、iPhone（私は８を選択）でシミュレータを起動させ、マップが表示されるか

そして表示されたら拡大、縮小、移動ができるか確認。

やったことと初めて使ったMacの機能

  1. Mapkitのライブラリを読み込むだけなのでシミュレータも実機もマップの表示はすぐにできました。ただし！私の感覚がおかしいのでしょうか？どうも幅がiphoneサイズに合わなくて微妙にずれてる。。

     

    www.raywenderlich.com

  2. 実機をPC上に表示するやり方を初めてやりました。QuicktimePlayerというMacの機能初めて使いました。

    support.apple.com

  3. とりあえず表示ができたので今度は入力するための検索窓と文字を入れられるようにしました。テキストフィールドを作る。
  4. 入力した地名の緯度と経度を見つけてくるように入力した文字と連携させる。
  5. 連携されたものにピンを刺すようにする。

出来たものはこちら

f:id:simpledancer:20180115120329p:plain

この微妙にずれたままなのがすみません。

ピンをさして池袋駅を指定することが出来ました。

ただこの機能としては刺すだけで、其処への行き方とかが出てくるわけではないのですがまずは１つ完成ということで。

詳しい作り方はまた整理して書き直したいと思います。

 

iOS11アプリ開発オンライン講座

 

simpledancer.hatenablog.com

Udemyのセールの期間はアメリカ時間だった！

やりたいこと

f:id:simpledancer:20180102162145p:plain


Udemy のセールがアメリカ時間だったから。

強いていえば日本時間の12日の午後くらいまで大丈夫のようです。

これが終わってもまたセールの時はあると思いますが、結構急にセールになるからね。

simpledancer.hatenablog.com

よかったら滑り込みで買ってみてくださいw

 私はSwift4やっとXcode9インストールできてはじめました。今日も続きやります♪

simpledancer.hatenablog.com