筋トレもプログラミングも反復練習が大事である。

プログラミング初心者三十路越えアスリート系女がフリーランスプログラマーを目指すブログ

はてなブログで吹き出しの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


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

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

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

  

simpledancer.hatenablog.com 

simpledancer.hatenablog.com

 

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

 

simpledancer.hatenablog.com

 

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

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

1年くらい前に知り合いのプログラマーの方に聴きながら開発環境は整えていたものの(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でエラーが出た時の解決方法

f:id:simpledancer:20180329174002p:plain

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

 

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 と出たときの解決方法

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

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

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

そういうわけで

#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に大抵の質問が載ってますが探してわからない場合は一人で悩むより何かしらの解決になるのでサクッと質問しましょう!!

 

 

simpledancer.hatenablog.com

 

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

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初めて1年以上が経つというのに全然理解してなかったです。

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

 

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

 

f:id:simpledancer:20180315103528p:plain

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

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

 

 

simpledancer.hatenablog.com

 

 

simpledancer.hatenablog.com

 

simpledancer.hatenablog.com

 

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

f:id:simpledancer:20180215104851j:plain


 

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

をやっと購入しました!

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

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

 

で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アプリを作る その4:タイマーアプリ

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

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

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

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

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

文法はProgateでも学べます

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

prog-8.com

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

講師の井上先生が優しい

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

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

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

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

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

1.エラーメッセージをGoogle検索してみる

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

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

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

2.エラーメッセージを解読する

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

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

3.仕組みを理解する

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

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

を確認しましょう。

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

import from tensorflow

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

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

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

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

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

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

Happy Coding!

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

 

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

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

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

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

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

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

simpledancer.hatenablog.com

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

探り探りというかんじ。

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

カメラアプリを作ろう

アプリの機能

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

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

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

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

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

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

f:id:simpledancer:20180117173258p:plain

ボタンは

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

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

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

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

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

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

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

f:id:simpledancer:20180119184830p:plain

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

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

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

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

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

simpledancer.hatenablog.com

カメラの起動確認を作る

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

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

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

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

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

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

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

作ってみた感想

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

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

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

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

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

 

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

 

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

f:id:simpledancer:20180115120710p:plain

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

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

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

simpledancer.hatenablog.com

Mapアプリ概要

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

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

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

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

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

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

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

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

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

     

    www.raywenderlich.com

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

    support.apple.com

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

出来たものはこちら

f:id:simpledancer:20180115120329p:plain

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

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

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

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

 

 

simpledancer.hatenablog.com