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

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

2018-01-19

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

Swift4

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

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

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

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

なんというか、難しいことはなかったのですが、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はスネークケース型が主流だそうです。

カメラの起動確認を作る

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

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

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

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

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

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

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

香川ついたー！
意外とあったかい😳
しかしビジネスホテルの温泉が故障中。。
— U-ki@逆立ちする人 (@acro_y) 2018年1月19日

作ってみた感想

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

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

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

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

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

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

2018-01-15

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

Swift4

f:id:simpledancer:20180115120710p:plain

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

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

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

Mapアプリ概要

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

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

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

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

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

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

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

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

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

www.raywenderlich.com
実機をPC上に表示するやり方を初めてやりました。QuicktimePlayerというMacの機能初めて使いました。
support.apple.com
とりあえず表示ができたので今度は入力するための検索窓と文字を入れられるようにしました。テキストフィールドを作る。
入力した地名の緯度と経度を見つけてくるように入力した文字と連携させる。
連携されたものにピンを刺すようにする。

出来たものはこちら

f:id:simpledancer:20180115120329p:plain

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

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

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

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

2018-01-12

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

やりたいこと

f:id:simpledancer:20180102162145p:plain

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

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

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

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

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

2018-01-11

Swift4でiOSアプリを作るコースをはじめました!

Swift4

f:id:simpledancer:20180108120825p:plain

やっとこ手をつけられました、先日Udemy で購入したSwift4のコース。iOS11アプリ開発オンライン講座

なぜ、数日間が空いたかというと。。

OSのアップデートでAppleIDのパスワードが合致しなくてwうまく行かなかったのです。

それの復旧に1日
最新のOS のダウンロードに1日
Xcode９のアップデートに半日

というわけで準備完了です。

寝る前にダウンロードしてればもっと時短できたんですが。

初めてみた感想

講師の井上先生の声は前に買ったコースでも知っていましたが、めちゃ聴きやすいです。

Udemyはいろんな先生がいるのですが

コースによっては「この人の声、聞きずら〜い」ってのもたくさんあります！

なので購入の際は一度無料でみれる部分のデモ部分を観てからの購入をオススメします。

教材の内容も大事ですが、耳から入る音ってものすごく快不快があるので

やはり気持ちよく勉強を進めるには自分にとって心地いい声と喋り方の先生でやったほうがいいと思います!

Swift４が他の言語と違うところを知る

f:id:simpledancer:20180111112403p:plain

Xcodeはダウンロード以前からしていたものの、あまり使ったことが無く

まだちょっとやりにくいところはありますが、Swift4の他の言語と違うところは

必ず半角スペースを開けること。開けないとエラーになる！

でも確かに空いてる方が読みやすくすっきりとしたコードにはなりますね。はい。

コメントアウト

あとはRubyの場合は#ですが、コメントアウトは//でしたりってとこでしょうか。

変数宣言・定数宣言

変数の宣言はvar だったり。変える必要がないものに関してはlet で宣言する。など。

まだ文法的なことはそれほどやっていませんが

考え方自体はプログラミングって共通だと思うので、ルールさえ理解できればきっと文法自体はすぐわかるかなと思ってます。

新しいことを学ぶのは楽しい

とにかくRailsで難しくてなかなか進まない時やエラーが出ていや〜〜！ってなることが最近は多かったので初歩的な部分ですが全く違うことを始めると気分転換になりますし、楽しいです。

あまりいろいろやりすぎるとごちゃごちゃになるかもしれないけれど

プログラミングに限らず、行き詰まった時なんかは全然別のことをやってみたり

他の興味の沸いたことを手にとってみたりして上手く気分転換するといいですね。

Rubyも楽しいけれど、とりあえずこのコースをやってみようと思います。

6日間でアプリができるかな？？

2018-01-08

Swift4のUdemyを買って見た！6日間で20個のアプリを作る。

やりたいことプログラミング Swift4

f:id:simpledancer:20180108120825p:plain

プログラミング独学者のみなさん、新年から勉強は進んでいますか？

Railsチュートリアルをやっていたのですがほぼほぼ終わり。（というか本当のところは年末に終わらせるはずだったんだけど）

セールがもう直ぐで終わるのでUdemy で気になっていたやつを買っていまいました。

[swift 3.0対応] iOS10アプリ開発完全マスター人気講座

1200円が最安値で出るので、またの機会でもいいのですが。。

気になっていたswiftのレッスンを買いました！

20個のアプリを6日間で作る

このレッスンは20個のアプリを6日間で作るというもの。

地図検索, カメラ投稿, タイマー, 日出時刻検索, ARアプリ, AIアプリなど実用アプリを20個以上作って学びます。CoreNFCなどiOS 11新機能も順次収録・追加中。Xcode 9, Swift 4を初心者が基礎から学べます。

飽き性の私としてはあまり膨大な量や期日よりもわかりやすい数の方がいいなと思ったのと、以前この井上先生のレッスンを買ったことがあり、声が聞き取りや使ったのも

購入の決め手です。（その他のレッスンの先生はちょっと声が聞き取りにくかったりした）

音声付きのレッスンって、絶対声の好き好きとかも大事だと思うw

またレビューなどしてみようと思いますが、11日まで1300円なので興味を持った方は今のうちに！（定価が10800円）

[swift 3.0対応] iOS10アプリ開発完全マスター人気講座

私はSwiftについては全く無知なのですがRubyとJavaは少し理解できます。なのでどのくらい時間がかかるでしょうか。。。楽しみです。

[swift 3.0対応] iOS10アプリ開発完全マスター人気講座

2018-01-02

Udemyのセールが1月11日まで1300円だった!冬は引きこもって成長しよう。

やりたいことデザインエンジニア

f:id:simpledancer:20180102162145p:plain

オンラインの学習サービスUdemy 私も好きでよく買います。

新年のセールで1月11日まで1300円!

24000円のが1300円とか。

ちなみに私昔はセールがあるの知らなくて9800円くらいで買ったものもあります。。ボリューム的には1万円でも全然お得なくらいの量のものでしたがここまで金額下がるなんて知らなかったからちょと損した気分でした。。

書籍1冊分以下の値段

Udemy はビデオレッスンで買いきりなのでいつでも見返すことができます。先ほどジュンク堂に技術書を見に行ってきたのですが技術書ってだいたい2000円以上するんですよね〜。あと分厚い。。なので持ち運びが結構しんどいんですよ。

もちろん書籍の良さもあるとは思うのですが。。

Python系の言語の講座も90%offだし私もいくつか買おうと思います。

世界最大級のオンライン学習サイトUdemy

ちなみにスマホでも学習可能なので語学系の講座だと通勤、通学中に勉強することができます。プログラミングやデザインなどweb系のものだとどうしてもPCが必要にはなってくるのでスマホだとちょっと不便かもしれませんがコードの復習をすることはできます。以外とぼんやりとスマホで動画見てる時に「あ、そういうことか！」って理解できるときとかありますしね。

冬で引きこもりがちな時に成長する！

私は寒いのがいやで、基本必要以上は外に出たくないのでUdemyは助かります。

引きこもりがちな人は是非、Udemyで何か新しいことにチャレンジしてみるのはいかがでしょうか？

ちなみに私が購入予定なのはこちら！

iOSの開発が気になるので。。。こっち系を買っておこうかと思ってます。

あ、私が買ってよかったなと思う講座はこちらでした

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

Webデザイン入門オンライン講座

デザインの方が勉強が止まっていて面白かったんですけど。だけどいつでも復活することができるから時間作ってまた再開したいと思います。

オススメです、ボリュームめっちゃあって大変だけどw書籍でいうと10冊分くらいあるかも。。。

2018-01-01

Railsチュートリアル復習中：エラーが解決しない場合

Ruby on rails

f:id:simpledancer:20180101113350j:plain

あけましておめでとうございます！

数日間こっちのブログはアップしてませんでしたが、チュートリアルは進めていました。

ただ年内にやり終えようと思っていたのですが思いの外ボリュームが多く

年明け持ち越しとなりました。できれば今日明日中には仕上げたい。

エラーがその間、出てしまってなかなかうまくいかなかったり

rails testのエラーの意味が調べてもわからなかったりしたのでその場合はどうしたかというと。。。

独学者のエラーが解決しない時

実際の開発ではそんなことは無理〜だと思いますが、エラーが出てググっても質問してもなんかわからない時は。。。

飛ばす！

とにかく次に進みます。

実際非常に稀に最初の方のコードが間違えていても

後の方に出てくるコードをコピペしたら、あれ、エラー消えてる。

と言う場合もある（あった）

ので手詰まりそうになったら、無視して進む。

あとわからなくても、最初のうちはなんとなくの理解でいいと思う。

（理解ここでできなくても大丈夫って行ってくれる本もあるから）

100%理解するなんて多分相当無理だと思うんですよ。

今回ぶち当たったエラーも消えていた。

htmlをちゃんと書いているはずなんだけど、エラーは出なくても画面にAccountの表示が出ない。コードはちゃんとかけている、なぜだ。

rails testをするとレイアウトのところでエラーが出ているのだけれど、調べてもどうも違う。うーん。

と言う手詰まりがありましたが。。。

無視しました。そして進みました。

本当はちゃんと理解した方がいいとは思いますが何が原因だったのか。。。

usersページを表示したらアカウントページがちゃーんとできてました。

多分プログラマーのお友達に聞けば全部答えてくれそうだけど。。。最近勉強時間取れなかったから聞くの憚られる。。

お正月は勉強するのにいいタイミング

私はエンタメ業なので結構年末年始は仕事何ですが

サービス系以外の仕事の方はお正月とかおやすみな方多いと思います。

きっと親戚付き合いとかある方もいるとは思いますが

ここはやぱりお正月だからといってだらけないで

逆にお正月休みの間にこれやりきる！みたいなの作った方がいいと思うのです。

お勧めはUdemy のビットコイン自動売買アプリ作成のやつです。今はやりのビットコイン!

私でも数日で作ることができましたし

少額であれば試しにやってみるのもいいと思います。

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

Udemy はかいきりタイプのビデオレッスンですので何度でもやり直せますし書籍1冊分のお値段でお得です。あとプログラミング系のレッスンだと質問した時の回答がとっても早い気がします（デザイン系のもので質問した時はなかなか返信がこなかった。。

そんな感じで

「正月暇だわー人混みに出て行くのもしたくないし。。」って思ってパソコンでネットサーフィンしてるそこの貴方！Udemy をポチってアプリ開発しましょう！

2017-12-28

|| =　という代入演算子について

Ruby on rails

|| =　という代入演算子

or equal と言う代入演算子について。出てきて気になったのでメモに記しておきます。

以外とこれについて書いてるブログとかが少なくて。

以下引用します。

この「||=」(or equals) という代入演算子はRubyで広く使われているイディオムであり、Ruby開発者を志すならこの演算子に習熟することが重要です。or equalsという概念は一見不思議にみえますが、他のものになぞらえて考えれば難しくありません。

多くのコンピュータプログラムでは、次のような記法で変数の値を1つ増やすことができます。 x = x + 1 そして、Ruby (およびC、C++、Perl、Python、Javaなどの多くのプログラミング言語) では、上の演算を次のような短縮形で表記することもできます。 x += 1 他の演算子についても同様の短縮形が利用できます。

$ rails console >> x = 1 => 1 >> x += 1 => 2 >> x *= 3 => 6 >> x -= 8 => -2 >> x /= 2 => -1 いずれの場合も、●という演算子があるときの「x = x ● y」と「x ●= y」の動作は同じです。

Rubyでは、「変数の値がnilなら変数に代入するが、nilでなければ代入しない (変数の値を変えない)」という操作が非常によく使われます。4.2.3で説明したor演算子 || を使えば、次のように書くことができます。

>> @foo => nil >> @foo = @foo || "bar" => "bar" >> @foo = @foo || "baz" => "bar" nilの論理値はfalseになるので、@fooへの最初の代入「nil || "bar"」の評価値は"bar"になります。

同様に、2つ目の代入「@foo || "baz"」("bar" || "baz"など) の評価値は"bar"になります。

Rubyでは、nilとfalseを除いて、あらゆるオブジェクトの論理値がtrueになるように設計されています。

さらにRubyでは、||演算子をいくつも連続して式の中で使う場合、項を左から順に評価し、最初にtrueになった時点で処理を終えるように設計されています。

なお、このように||式を左から右に評価し、演算子の左の値が最初にtrueになった時点で処理を終了するという評価法を短絡評価 (short-circuit evaluation) と呼びます。論理積の&&演算子も似たような設計になっていますが、項を左から評価して、最初にfalseになった時点で処理を終了する点が異なります。

上記の演算子をコンソールセッション上で実際に実行して比較してみると、@foo = @foo || "bar"はx = x O yに該当し、Oが||に置き換わっただけであることがわかります。

x = x + 1 -> x += 1 x = x * 3 -> x *= 3 x = x - 8 -> x -= 8 x = x / 2 -> x /= 2 @foo = @foo || "bar" -> @foo ||= "bar" これで「@foo = @foo || "bar"」は「@foo ||= "bar"」と等価であることが理解できます。この記法をcurrent_userの文脈で使うと次のような簡潔なコードになります。 @current_user ||= User.find_by(id: session[:user_id]) お試しあれ。補足: 技術的には、「@foo || @foo = "bar"」と書いた場合、Rubyの内部では実際にすべての項が評価されます (||が左辺にある点に注意)。これは@fooがnilやfalseでない場合に、無駄な代入を避ける必要があるためです。しかしこの式の動作では||=記法の動作と同じにならず、説明上不都合なので、上の解説では@foo = @foo || "bar" という式を用いて説明しました。

参考

karolgalanciak.com

www.tom08.net

以上参考にさせていただきました。

英語の文章がサラサラ読めたらもっと情報が得られるのですが。。

2017-12-26

Railsチュートリアル復習中：ログイン機能を作る

Ruby on rails

f:id:simpledancer:20171225153757p:plain

今日はログイン機能を作っていきます。

ログインの基本的な仕組みとは、ブラウザがログインしている状態を保持し、ユーザーによってブラウザが閉じられたら状態を破棄するといった仕組み (認証システム (Authentification System))です。この認証システムの基盤が出来上がったら、ログイン済みのユーザー (current user) だけがアクセスできるページや、扱える機能などを制御していきます。なお、このような制限や制御の仕組みを認可モデル (Authorization Model) と呼び、例えば本章で実装するログイン済みかどうかでヘッダー部分を切り替える、といった仕組みもこれにあたります。

セッション

ユーザーログインの必要なWebアプリケーションでは、セッション (Session) と呼ばれる半永続的な接続をコンピュータ間 (ユーザーのパソコンのWebブラウザとRailsサーバーなど) に別途設定します。セッションはHTTPプロトコルと階層が異なる (上の階層にある) ので、HTTPの特性とは別に (若干影響は受けるものの) 接続を確保できます。

まずはsessionsコントローラを生成します。

$ rails generate controller Sessions new

(rails generateでnewアクションを生成すると、それに対応するビューも生成されます。createやdestroyには対応するビューが必要ないので、無駄なビューを作成しないためにここではnewだけを指定しています)

f:id:simpledancer:20171226113007p:plain

ルーティング

config/routes のファイルにルーティングを書きます

f:id:simpledancer:20171226113534p:plain

get log inとpost login とdelete logoutの3行を追加しました。

そしてtest/controllers/sessions_controller_test.rbに新しいログイン用の名前付きルートを使うようにする必要があります

f:id:simpledancer:20171226143524p:plain

これでルーティングはできたようです。

Viewを整える

見た目部分を整えます。ログインフォームの見栄えを作っていきます。

ログインフォームの見た目は最初の登録フォームの見た目とほぼ変わりなく。

emailとパスワード入れる欄、createボタンの代わりにlog inボタンがあり、

新規登録の場合は登録画面に移動するリンクが作られているようなものにします。

app/views/sessions/new.html.erbのコードを登録フォームの時と同じようにformforヘルパーを使って書きます

f:id:simpledancer:20171226145900p:plain

サーバーを立ち上げてloginアドレスに変えて表示してみると

f:id:simpledancer:20171226145644p:plain

こんな感じで２つ（email.password)ラベルと　ログインボタン、リンクが生成されました。

続く！

全然関係ありませんが、今出張中で昨夜（クリスマス）仕事から帰ってきてこんなのを食べながらブログを書いてました。

f:id:simpledancer:20171226013840j:plain

でも。脳にいいのかちょっとよくわからない。どちらかというと細かくて食べにくかったですwただ、糖質を取るよりも眠気冷ましになるかとは思います。ローソンでかいました。味は三種類ですがわさび目が覚めそうで買ってみました。（地方限定かも）

2017-12-24

チュートリアル復習中：ユーザー登録画面を作る

なんとか年内にチュートリアルを終わらせたいと思っています。

今日はユーザー登録のところです。

現時点ではこんな画面です。

f:id:simpledancer:20171223155103p:plain

これをちゃんと登録できるように設定します。

form_forヘルパーメソッドを使う

ユーザー登録ページで重要な点は、ユーザー登録に欠かせない情報を入力するためのformです。Railsでform_forヘルパーメソッドを使います。このメソッドはActive Recordのオブジェクトを取り込み、そのオブジェクトの属性を使ってフォームを構築します

Userオブジェクトの作成：まずインスタンス変数@userにUser.newを代入する

f:id:simpledancer:20171224104115p:plain

Scssで見栄えを整えると

f:id:simpledancer:20171224105003p:plain

sign up画面がこんな感じですっきり見やすく登録画面ができました。

ただし、まだ登録ボタンを押しても

このようなエラーが出ます。

f:id:simpledancer:20171224105214p:plain

コントローラにcreateするアクションが見当たらないとなっています。

まだ作ってないので当然ですが。

なのでこのcreateアクションを作っていきます。

コントローラにcreateアクションを作る

f:id:simpledancer:20171224111056p:plain

そうしてもう一度ユーザー登録をすると今度は

f:id:simpledancer:20171224111408p:plain

となります。

今度はcreateアクションの下に外部から使えないようにprivateアクションも追加します。

そしてユーザー登録に失敗した際のエラーメッセージも追加します。

パーシャルを作る

<%= render 'shared/error_messages' %>

’shared/error_messages’というパーシャルをrender (描画)と云う意味。

sharedというディレクトリを作ってファイルを作ります。app/views/shared/_error_messages.html.erb

f:id:simpledancer:20171224114731p:plain

そこでエラーメッセージを表示することが可能になります。

もし空欄でcreateボタンを押した場合このように

f:id:simpledancer:20171224115855p:plain

上部に赤字でエラーメッセージが表示できるようになりました。

postの追加

f:id:simpledancer:20171224120340p:plain

エラーの処理ができたのでconfig/routes.rbに post '/signup', to: 'users#create'（postリクエスト）を追加する。

しかし、この状態だとcreateしようとsubmitボタンを押しても送信されません（フリーズする）

コントローラに追加をします。

redirect_to @user

f:id:simpledancer:20171224121408p:plain

flashメッセージについてはちょっと割愛します。

Railsの一般的な慣習に倣って、ユーザー登録に成功した場合はページを描画せずに別のページにリダイレクト (Redirect) するようにしてみましょう。具体的には、新しく作成されたユーザーのプロフィールページにリダイレクトしてみようと思います (場合によってはルートURLにリダイレクトするのも１つの選択肢でしょう)。

f:id:simpledancer:20171224121631p:plain

無事にuserをcreateすることができました！

長くなるので

今日はここまで！

2017-12-23

Railsチュートリアル前半まとめ

Ruby on rails

f:id:simpledancer:20171223110634j:plain

1日一記事更新するぞ！と思っていたのだけれど、昨日は練習やら出張準備やらで勉強できなかった。。

今日は合間にやっていく予定ですがやっと後半戦に突入。

目標は年内に復習を終わらせて来年は違うのやりたいです。

前半チュートリアルまとめ

以前やっていたものの、ザーーーーーっと流したので細かく見ていくとかなり理解していなかった部分がたくさんあった。

多分今もあまり理解できてないんだろうけど。

今日から6日間出張に行ってきます！

出張の合間にできるところはやりたいですが。。どれくらいできるかな。7章以降は難しくなるのでわかりませんが。。

2017-12-21

Railsチュートリアル復習中：デバッグ

Ruby on rails

f:id:simpledancer:20171221123650p:plain

デバッグについて、いつもさらっとここも流していたので少しゆっくりやりながら進めていこうと思います。

Railsチュートリアルでいうと7章のところです。