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

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

もっと簡単にインスタグラムのフィードを埋め込む方法!

f:id:simpledancer:20180717161030p:plain

くるくるしたい(仮)

ブログを改めて作ったものの奴に、インスタグラムのフィードを載せようと思いまして

以前ご紹介していた方法よりももっともっと簡単な方法がありましたのでそれでやって見たら3分どころか1分くらいでできたですよ!

参考にさせていただいたブログ

はてなブログや他のブログサービスで、インスタグラムのフィードを埋め込むのはとても簡単です。

外部ツールを利用して、吐き出したコードをブログ内に貼り付けるだけ。

様々な外部ツールがありますが、比較的使いやすいLight widgetを紹介します。

www.mutant-tetsu.com

私がごちゃごちゃ書くとわけわからなくなるのでこちらのブログをお読みください。

書かれているurlにアクセスして、コードを出して自分のデザインcssに貼り付けるだけです。

備忘録がてら!

めちゃ簡単だからやって見てください!

Udacityは英語の勉強をしつつプログラミングも学べます。

f:id:simpledancer:20180717120608p:plain

最近はUdacityというwebサービスを使い始めてます。

日本語じゃないけど、Freeでプログラミングの勉強ができるやつです。

www.udacity.com

私は今英語も勉強したいので、挑戦中。

動画も時間が短いので結構サクサク見られます。

Pythonのチュートリアルが多め

ざっくり見た感じですがPythonのレッスンがかなりたくさんあるように見えます。

日本語のサイトってまだまだPython少ないように思うので

Python勉強中の人は結構いいかもしれません。

そもそもプログラミングを使って行く上で英語って切っても切れないですから

やっぱり英語サイトは慣れておくべきかなあ。。と感じました。

ググると日本語よりも英語の方がたくさん検索出てくるし、

プログラミングに限らずですが、やはり英語を話す人の方が圧倒的に多いので動画にしろなんにしろ、英語が理解できるってのはかなーーーーり大事だと思います。

 

というわけでUdacityおすすめです!

 

マークダウン記法を覚えてみると便利でした。

  • f:id:simpledancer:20180626075544p:plain

ここ最近ドットインストールで復習をしています。

今までスルーしていたのですがドットインストールにもその講座があったのでちょっとやってみようと思います。

https://dotinstall.com/lessons/basic_markdown_v2/40601

simpledancer.hatenablog.com

マークダウン記法とは?

qiita.com

Markdown - Wikipedia

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア(コンバータ)も開発されている。

また、マークアップとマークダウンの違いについてこちらのブログも。

sawasawato.github.io

htmlだと<h1>h1見出し</h1>とかってタグでくくってたのを

#h1見出し とかって記号でかける。

 質問サイトで質問するときもマークダウン記法を覚えればすごく便利じゃないですか!

f:id:simpledancer:20180626114507p:plain

こんな感じで箇条書きや見出しも簡単。

コードを書くときもすごく便利でわかりやすい。今まで質問サイトに質問するときはベタ書きしてました。。(すみません)これからはもっと質問もしやすくなると思います(多分)

 

 

 

qiita.com

 

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

f:id:simpledancer:20180623172907p:plain

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

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

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

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

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

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

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

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

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

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

コンマが抜けてるな

半角じゃないな

etc

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

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

まああゆみは遅いものの

ちょっと感動しました。

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

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

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

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

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

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

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

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

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

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

 

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

f:id:simpledancer:20180215104851j:plain

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

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

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

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

オススメの本

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

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

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

Vue.Js

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

 

Ruby

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

 

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(ま、簡単に作れないけど!)

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

 

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

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

 

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

f:id:simpledancer:20171207113042j:plain

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

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

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

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

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

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

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

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

 

 

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


前回のブログから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