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

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

最初にRuby on Railsにサンプルアプリを作るのにおすすめなサイトは「小学生でもわかるRuby on Rails」

Ruby on rails

f:id:simpledancer:20170511102159p:plain

この１年弱Rubyを独学でやりだして（実際集中してやったのは数ヶ月ですが。。）

やっぱりちょっと離れると全然わからないしRailsってよくわからない。。

いろんな本が出ているけど、書籍で書かれていることもいまいちピンとこない。

そう思った時に以前見つけていたサイト「小学生でもわかるRuby on Rails」をやってみることにしました。

 

 小学生でもわかるRuby on Rails

まず、「小学生でもわかる」てところで簡単かな？なんて思っていますが

冷静に考えると小学生の方が固定観念というものがないので、プログラミングの地頭めっちゃ作りやすいやん。。。とも考えたのですが、それは置いておいて。。

openbook4.me

最初は環境構築から入りますが、私はローカル開発環境よりもcloud9のが便利〜だと思っているので（ファイルの場所がわからなくなるし。。）cloud9で最後までやりました。

各項目が丁寧にわかりやすく説明してくれる

初心者向けのRails本も丁寧なものは多いと思いますが

どちらかというと私は未知の単語が出てくるとパニックになるのでできるだけ噛み砕いて説明してくれる教材が好きです。

simpledancer.hatenablog.com

なんとなくのルールや流れはProgateで学習してからこの「小学生でも。。。」に取り組むとスランプに陥りにくいと思いました。

だけど実は１回目は挫折しました！

f:id:simpledancer:20170504091840p:plain

去年Railsを独学で始めた頃、とりあえずこの教材をやってみたのですが、実は一度挫折しました。この時もcloud9でやっていたのですが確かエラーの対処の仕方がいまいちよくわからなくて、ググってもわからない。

今回もちょこちょこエラーは出たものの冷静にエラーを読めば進めました。

ちなみに周りに聞くことができない時はteratailなどで質問してます。

無料会員登録で質問し放題のサイト

こういうサイトは本当にありがたいと思います！

質問をする練習にもなりますし、かなり詳しく回答してくださいます。

ググってわからないことは自分で悩むよりも経験豊富なエンジニアさんの力を借りましょう！

エンジニア特化型Q&Aサイトに無料会員登録をする 

自分と同じような質問をしている人もいるので、質問を投げる前に過去のQ&Aを見てからにしましょうね（時間の節約！）

とにかく心強い味方のサイトなので登録しておいて損はないと思います！！

挫折したけどなんとかやりきれたわけ

私、やり通すことも大事だと思うんですが、ダメだったら次、って気分転換のつもりで違う教材も試してみることにしたのです。それでテックアカデミーをやったり、Railsチュートリアルをやってみたり。。。などなど一周回ってまた戻ってきて「小学生の。。。」に戻ってきました。

で、戻ってきてやってみたら一番わかりやすかったです！

小学生レベルまでは追いつけた！！

。。という紆余曲折があったのでスムーズにできなくても諦めないでください。

大概の人はできるかもしれませんが、私は１回普通に挫折してますので。

いきなりRailsチュートリアルに取り組むよりはまずはこの「小学生でもわかる。。」をチュートリアルや書籍で挫折した人は試してみてください。

データベースのところが私的にはかなりわかりやすいなと思いました。

 

プログラミングを始めたいと思ったら、まずは無料のProgateがやっぱり一番だと思った件

「小学生でもわかるRuby onRails」、「テックアカデミー」「Ruby onRailsチュートリアル」をやってみて

チュートリアルがややこしくて7章あたりで止まってます。

気分を直して久しぶりに無料のプログラミングサイトProgateを開いてみると、

Ruby on Rails 5のシリーズが出ていたのでやってみました。

prog-8.com

その他、コマンドラインやgitのレッスンも追加されていましたが、とりあえず久しぶりにRailsをやってみた感想です。

 

Progateが初心者にうってつけの教材だと思った点

2017年５月現在で公開されているのがRails5のシリーズの４までですが

やっぱり初心者に優しくて心が折れない教材だと思ったので初心者がまずはドットインストールよりも何よりも先にProgateをやるメリットを書いてみます。

スライドは動画や長いサイトよりも集中しやすい

Progateは細かくスライドをめくっていくタイプなので集中しやすいですし、達成感があります。

通常のオンラインスクールの教材は一つの章ごとに結構長い文章があるので心が折れやすいです。

また、ドットインストールはレッスン数も豊富ですし、実際手を動かしてコードが書かれているのでそれをを見られるというのがいいのですが、早口なのと、かなり展開が早いので初心者にとっては？？？になります。３分未満の動画なので集中しやすいとは思いますが本当の初心者にはハードルが結構高いなと思いました。

 

レベルが上がっていく達成感

f:id:simpledancer:20170518215607p:plain

同じ教材を繰り返しやっていたのもあり、レベルが１２１まで上がってました。swiftやpythonは全然やってないのでいびつなグラフですが。。。

レッスンの課題をやるたびにレベルが上がっていくのを見るのがちょっと嬉しいのです。

語り口が優しい

イラストがかわいいというのはもちろんですが、説明文中で

「今はわからなくても大丈夫です」「〇〇というようなもの、というくらいの認識で今のところは大丈夫ですので進めていきましょう」など、初心者にハードルを一気に上げるような難しいことも無理やり理解させようとせずにおいおいでいいよ〜と言ってくれてるのが安心します。

環境構築をしなくても良い

ターミナル、サーバー、エディタ、ブラウザが全部揃っていてプログラミングするのに必要な環境構築をせずともすぐに学習に入ることができます。

テキストエディタさえも要りません！環境構築って本当にめんどくさいです！

Rubyは普段cloud9で勉強しているのですが、ローカル開発環境も一応構築しました。

経験者の知人に手伝ってもらったので３０分くらいでできましたが、それまでに一人でやろうとしたら何度も失敗してしまいましたので放置を数ヶ月してしまっていました。

f:id:simpledancer:20170518220145p:plain

その環境構築の手間をとりあえずは省けて（いずれ必要にはなりますが）まずはプログラミングってこういうもの！というのが勉強すぐにできるので（鉄を熱いうちに打つ感じですね）個人的には全く初めて勉強する人や久しぶりにプログラミングに触る人にはProgateがいいなと思いました。

まとめ

有料のプログラミングスクールもいいけど、まずはProgateをお勧めします！いろんな言語があるのでざっとやってみて自分がまず合いそうな言語を深く勉強してみるのもいいと思います。

余談ですが今度こそテックアカデミーのアプリコンテストにエントリーしたいのでアプリを開発しなくては。。とちょっとお尻に日がつきました！

「82歳でswiftでアプリを開発・リリース！」記事を読んで思ったこと

プログラミング 仕事 エンジニア やりたいこと

昨日たまたまmailで登録しているcodeキャンプから来た記事でかなりびっくりしましたのでtweetしました！元記事是非読んでください！他のブログでも書いてますがプログラミングネタだったのでこっちのブログにもちょっと追記してupsしました！

 

８２歳未経験でswiftでアプリリリース！

元の記事はこちら↓

82歳にしてSwiftでアプリ開発からリリースまで！スーパーシニアがいると聞いてお話を伺ってきた！ | Tech2GO

f:id:simpledancer:20170513125335j:plain

画像：Tech2Go

若宮さんは82歳のエンジニアです。去年の夏、81歳でXcodeを使ってiPhoneアプリ開発を学習し始めた1935年生まれ。

えーっと私の倍以上の年齢です。うちの母親よりも一回り以上上！ちなみにうちの親はスマホさえ使いません！

もともとエクセルで絵を描くということをされていたそうですが、PCに触れ出したのは60を過ぎてから。

f:id:simpledancer:20170418092933p:plain

同じPCでする作業と言ってもエクセルとプログラミングって全然違うし！

ただ「パソコンを触る」ということに抵抗がない。というのは大きいですがなんとmacを触ったのは半年前だそうです。すごいとしか言えない。。

なぜ未経験でシニアの若宮さんがアプリをたった半年でリリースできたのか 

f:id:simpledancer:20170423034259j:plain

  • 作りたいものがはっきりしていた
  • メンターが基礎を忠実にするより早く作れるように無駄を省いて指導した
  • 情熱があった
  • ipadとiphoneを買って自分を追い込んだ

他にもたくさんあるとは思いますが主に上記だと思います。

メンターさんの言葉で

今回は半年間、しかも遠隔というの中で何故アプリリリースできたかというとゴールが明確になっていたからです。いかにして3月3日のひな祭りまでにリリースするかだけを考えました。

やはりゴールが明確でないとだらだら先延ばししてしまいます。

この記事を読んで、始めるのに遅すぎることはないし、始めないのは言い訳してるだけだと思った。

f:id:simpledancer:20170122140420j:plain

いや、本当。

「年齢が」「時間が」「お金が」って言い訳絶対してしまうし、それに伴い

自分がそれをやって失敗した時のことを考えてしまう方も多いのではないでしょうか？

私もそうです。そういうこと多々あります。

やったのに失敗したらどうしよう。って。

だけど人って、やった失敗って後になって笑い話になったり忘れちゃったりするけど

やらなかった失敗の後悔ってズーーーっと残るんだって。

思い返してもそうじゃないですか？

なんであの時あれしなかったんだろう。とかありませんか？

私は今まである程度やりたいことやってきたけど、それでもたくさんあります！

実現するには効率化

f:id:simpledancer:20170130013623j:plain

非常に当たり前ですが時間もお金も有り余ってる人なんてそうそう居ません。というか有り余ってるひとこのブログ読んでないですよね。。

若宮さんのやり方でいくと

  • ゴールの明確化
  • 情熱
  • 諦めない
  • 的確に指導してくれるメンターを持つ（独学の場合書籍など）
  • 追い込む

作業をその、自分のやりたいことを実現するために落とし込むのが成功の秘訣。

後になって後悔するより、今計画を立てて実行してみませんか？

 

就活するより若年層はこういう企業で勉強して会社をうまく使おう！

f:id:simpledancer:20170212114830p:plain

 

なんだか年中就活生を見ている気がします。。

黒いスーツに就活用の黒いバッグ。

私も一瞬だけ就活をしましたが、なんだか無理かも〜〜って思って早々にやめてしまいました。（一応当時葛藤はありましたよ）

それで30をすぎて思ったのは

  • 新卒で就職しなくても生きていける
  • 新卒は実際一番下っ端の仕事をさせられて即戦力にならない
  • 中途の派遣からでも大手企業に正社員になる可能性は十分ある
  • 新卒で就職すると人間関係が限定されやすくなる（染まってしまう）

です。

で、このブログはプログラミングブログ、且つこのご時世、エンジニア不足で企業は若年層だと全くの素人でも一からお給料を払いながらプログラミングを学ぶ機会を与えつつ雇ってくれます。またはタダでスクールを受講してある程度になったら卒業、就職というルートです。

メリット

そう、これは若年層しかできないカリキュラムなのです。

そしてその言語はだいたいJavaになりますがメリットとしては

  • タダでプログラミングの勉強ができる
  • 周りに勉強してる同志がいる（年齢も近い）
  • 企業によってはお給料も払ってくれる

もちろんプログラミングはご存知の通り難しいですし、Javaなんて特に脳みそが溶けそうになります。私は３５で半年程度やりましたが脳内沸騰したのと、ダンスを諦めたくなかったためそこのスクールはやめてしまいましたが、同年代の全く初心者の方はちゃんとカリキュラムを終えて卒業し、就職を勝ち取りました。

そして、若年層であれば【未経験からプログラマ】完全無料であなたの就職をサポート というようなサービスを利用しない手はありません。だって。。

  • 途中で嫌になってやめてしまってもある程度までかじれば他の言語にうつりやすい
  • ちょっとjavaやってましたって言えばできなくても取ってもらいやすい
  • インターンに行ったようなものなので企業の様子が垣間見れる
  • 人間関係が本入社までにある程度把握できる

というメリットがあります。

これがダメでも次があるって大きいですよね。

完全独学よりは断然集中しやすいと思います。

デメリット

  • 時間の拘束がある
  • やめにくい（だから続けやすいというメリットでもあるが）
  • とにかく時間がかかる

ある程度素養のある人なら問題はないかもしれませんが、プログラミングをかじったことのある方なら分かるようにプログラミングって一筋縄ではいきませんよね。。

【完全無料プログラミング研修＆就活塾】

でも、だからこそ追い込みたい、身につけたい（しかもタダorお給料をもらって）と考えるのならば一時期の修行としてチャレンジしてみるのは良いのでやないでしょうか？？

学生ならではのプログラミングスクールの割引もある！

数あるプログラミングスクールの多くは学生にはかなり安価でコースを受けることができます。

私が以前受講していたTechAcademy [テックアカデミー] は半額です。社会人の私は11万円かかるところが学生だと6万円弱。。。

オンラインブートキャンプ 無料体験

やるなら好きな言語を勉強したい！

そういう方はぜひプログラミングのスクールを学生のうちに受講してください。社会人で受けるよりも断然やすいです！学割が羨ましいです。

就職活動で下手に対策を練るよりはプログラミングを学ぶために時間を使ったほうが今後の人生に役に立つんじゃないかな〜なんて思ったりしてます。私が学生時代に今戻ったら間違いなくプログラミングやってると思います。

 

改めてプログラミングができたら人生が広がると思った。今の私と今後の目標。

モチベーションの維持と自分の確認の意味を込めてプログラミング関連で今やってること今後やりたいことをまとめてみました。

 

今やってること

  • TechAcademy [テックアカデミー] の再勉強（Ruby on rails)
  • エンジニア派遣登録（明日１件登録と面談に足を運びます）
  • ワードプレスで作ってるポールダンスのサイトで

    Poledance × Trip |のカスタマイズ

  • はてなブログのcssのカスタマイズ当ブログと

    人生をシンプルに☆というミニマリストな自分のブログ（一番私の作ってるサイトの中でpvも収益も多いです←雑記ブログです）

今やってる中でブログを書いたりカスタマイズするのがすごく楽しいです。ワードプレスはプラグインを試したりしていますがイマイチうまくいかないことが多くてサイトがイマイチ落ち着かないのが現状です。。

中期目標

  • エンジニアの仕事を（派遣or バイトで！）やってみる。
  • 途中でやめたrailsチュートリアルを再開する
  • 自分でアプリを作る

やってみたい勉強はたくさんあって

webデザインもやってみたいしUnity面白そうだしiosもやりたいし。。とやりたいことはたくさんあるんだけど一気にって難しい。今は独学でできる環境が整っているので自分次第ですよね。。なかなか進まない。unity難しいよう。

長期目標

  • フリーランスエンジニアになること
  • ブログで食べていける程度の収益を得ること(20万円）
  • 自分の好きなことを反映したアプリケーションをリリースすること
  • ワードプレスのサイトを「ポールダンスといえばこのサイト！」と言われるくらいまで成長させる。

こんな感じです。

長期目標を書くとちょっとハードル上がったな〜と思うけれど

実際これらをやってる人が私の周りにゴロゴロいて

全く畑違いの仕事なので不安はありますがとにかくやるのみ。。です。

私の人生計画の「冬は暖かい国で楽しく暮らす」というのが長期目標が達成できたら叶うので。後半の人生は冬の寒さに愚痴りながら暮らすのをやめたいです！

改めて思うこと、プログラミングできたら人生が広がる

f:id:simpledancer:20170215134654j:plain

私がプログラミングの存在を知ったのは気がつけば２年前。

そっからすぐに行動したけれど

何度も

何度も

何度も

何度も

挫折したんです。

だって難しいし。文系だし。エラーでるし。

何度もやめようと思ったし、今でも全然わからないし、いまだに全然仕事つけてないし（w）でもやっぱり何か作りたいです。

2020年には小学校の必須科目？になるようですので今の子供は当たり前のようにプログラミングを使いこなすと思います。だからその子達に比べたらスキルで追いつくのってまあ無理ゲーだとは想像に難くないです。

だから諦めるという選択肢もあるけれど

やっぱり諦めきれないので地道に勉強を続けます（仕事も朝起きるの辛いけど一旦派遣で未経験で働けるところを経験してこようと思います！）

余談ですが未経験でやろうとするとJavaの案件の会社が多いですね〜Javaはやりたくないな〜〜

プログラミングの愚痴はこのブログで吐きます！

 

テックアカデミーのWebアプリケーションコース・Bootstrap編を再度やってみた。

こんにちはオドリコ（@acro_y）です！

今日はTechAcademy [テックアカデミー] Lesson2のBootstrap編を再勉強してみます♪

LESSON2/Bootstrap編

f:id:simpledancer:20170411134018p:plain

ドロップダウンリストを追加したりテキストを変更したりアイコンをサンプルと変えてみたりしてみました。

f:id:simpledancer:20170411134124p:plain

 

テックアカデミーのWebアプリケーションコース・HTML/CSS編を再度やってみた。 - アスリート系ですがプログラミング始めました。

 

Bootstrapとは？

BootstrapはTwitter社が開発したCSSの「フレームワーク」です。通常CSSを書いていく場合は全てのスタイルを自分で作っていく必要があるのですが、このフレームワークにはよく使われるスタイルを予め定義してあるので、それをルールに沿って利用するだけで素早く整ったデザインを作成できます。

 1.Bootstrapを使う準備

  • すでにホストされているファイルをインターネット経由で読み込む

という方法でbootstrapとjqueryを読み込みます

フォルダとファイルの作成

cloud9上に新たにフォルダを作成します！

その中にさらにindex.htmlファイルを作成します。

f:id:simpledancer:20170409103528p:plain

index.html内に記述

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Sample</title>
    <!-- BootstrapのCSS読み込み -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- jQuery読み込み -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

新たに登場しt登場したコードが沢山あります

<meta http-equiv="X-UA-Compatible" content="IE=edge">

IEブラウザではバージョン毎にことなるレンダリング（画像や画面の内容を指示するデータの集まり(数値や数式のパラメータ、描画ルールを記述したものなど)をコンピュータプログラムで処理して、具体的な画素の集合を得ること。）をされてしまっていて崩れる心配があるので互換表示をさせないために設定するmetaタグです。

<meta name="viewport" content="width=device-width, initial-scale=1">

 レスポンシブ・ウェブデザインにするために必要なmetaタグです。

<!-- BootstrapのCSS読み込み -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery読み込み -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- BootstrapのJS読み込み -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

BootstrapのJsよりも先にjqueryを先に読み込むこと。そうしないとBootstrapのJavaScriptを使う動きが動作しない

グリッドシステム

全然理解してなかった領域です。

使用ルールのところ

  1. class=”container”か”container-fluid”の中に
  2. class=”row”の中に
  3. class=”col-{prefix}-{columns}”の形式で
  4. {columns}は合計値が12になるように指定

特に合計値が12になるように指定

このルールでスタイルをつけると、簡単にレスポンシブ・ウェブデザインに対応した横幅を分割したスタイルを作れます。

↑ちゃんと読んでなかった。。！

getbootstrap.com

この後TechAcademy [テックアカデミー] のbootstrapのレッスンでは

  • テーブル
  • ボタン
  • フォーム作成

が続きます。めちゃめちゃ長くなるので端折りますが、再度勉強してサンプルソースをちょっと変更してみたりすると理解度が深まります。

プログラミングを数ヶ月随分おろそかにしていたので、相当忘れてるし。。

引き続き勉強していきます〜

テックアカデミーのWebアプリケーションコース・HTML/CSS編を再度やってみた。

css html テックアカデミー

 

こんにちはオドリコ（@acro_y）です！

先日より再勉強を開始しました！

simpledancer.hatenablog.com

時間はそんなにないので本当はサクサク進めたいのですが細切れになります。

だけど１回やっているので前回の半分くらいの時間で終わると（多分思っている）

教材内容はテックにバレると怒られるかも？？ですが

勉強した内容と併せて載せていきたいと思います。

Lesson1 HTML CSS

やる内容としては

  • コードの基本的な書き方
  • 画像やリンクの入れ方
  • 色や配置、文字のデザイン的要素
  • タグの説明
  • ホームページのプロフィールを作る
  • お問い合わせページを作る

がざっくりとした内容です。

まず完成系がこちらの感じです。

f:id:simpledancer:20170408120733p:plain

写真や文章内容は私仕様に変更してます。

about.htmlとabout.cssを書くだけでこんなページが１枚出来上がります！

htmlのコードはこんな感じです

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>odorico | About</title>
<link rel="stylesheet" href="about.css">←cssを読み込むコード
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html" class="selected">About</a></li>←各ページにリンクする
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div id="logo">
<img src="profile.png" alt="">
<h1>Odorico</h1>←見出し
</div>
</header>
<div class="container">
<section>
<h2>About</h2>
<h3>自己紹介</h3>
<p>Odorico（プログラマー）</p>
<p>兵庫県神戸市出身。フリーランスで活動しています。</p>
<p>最近は、<span class="red">Ruby on Rails</span> を使って仕事をする機会が多くなりました。</p>
<p>私のポートフォリオを見て気になった方は、<a href="contact.html">Contact</a>よりご連絡お願い致します。</p>
<h3>リンク</h3>
<ul>
<li><a href="https://www.facebook.com/odorioco" target="_blank">Facebook</a></li>
<li><a href="https://twitter.com/odorico" target="_blank">Twitter</a></li>
</ul>←　a href でfbとtwitterのリンクを挿入（urlは適当です）　
</section>
<footer>
<p>&copy; 2015 Yumiko Tezuka.</p>
</footer>
</div>
</body>
</html>

cssページ

ページ内の色つけや配置を調整していきます。

ルールとしては

セレクタ {
  プロパティ: 値;
}

こんな感じで

どのタグの{

色：　色指定;

}

例えば

p{

color: blue;

}

 

基本は文字も配置も配色も同じようなルールで書いていきます。

色の値を表現する方法は3つあります。

  • 言葉: red, green, blue, …
  • RGB(16進数): #000から#fffまで
  • RGBA関数: rgba(0,0,0,0)

以上の3つがあり、一番わかりやすいのは言葉でしょう。
red, green, blue, gray, black, whiteなど実に様々な色が用意されています。

次に、RGB(16進数)です。16進数とは、0から数えて0123456789abcdefまでが1桁になる数え方です。
つまり、a=10, b=11, …, f=15で最大値となります。アルファベットは大文字でも構いません。
RGB(16進数)は左からRGB、つまり、#RGBとなっていて、#f00だと赤だけ最大値なので、赤色となります。
他には、#f0fだとRとBが最大値なので、紫色になります。
更に細かくなった#RRGGBBで2桁ずつ使えるものもあります。この場合は00=0からff=255まで使えます。

次に、RGBA関数の場合は、rgba(R,G,B,a)となっており、R,G,Bは0から255の範囲、aは透明度のことで0.0から1.0まで扱えます。

#dddは全ての色が同じ値なので黒#000〜白#fffの間となり、つまりグレーになります。

あとは文字サイズ、画像サイズの変更、余白の調整、文字をふと文字にする。。

などです書き方のルールは全て同じです。

あと私が苦手なのが余白の調整です。

  • margin - 外側の余白
  • border - marginとpaddingの境界線
  • padding - 内側の余白
  • コンテンツエリア - widthプロパティやheightプロパティで指定される内容領域

これらが私は慣れていなくていつも手間取ります。previewを見ながら徐々に調整していきます。

ちなみに画像を丸くするのはborder-radiusを使います。

テキスト通りに

#logo img {
  max-width: 120px;
  border: 5px solid #fff;
  border-radius: 100%;
}

 でプロフィール画像が丸くなります。

  • 画像の大きさを調整するために、max-widthプロパティを使って最大の横幅を決めます。
  • borderプロパティでボーダーラインの幅を5pxでラインの種類をsolid（一本線）、色を#fff（白）にします。

 再度作成してみた感想

細かいバランス、配置などがまだ全然理解できてないけれど

大まかな流れや言葉の意味は結構覚えていた！

多分ブログのカスタマイズをしているうちにこの辺りは覚えてきたのではないか？と思います。

それでは引き続きブログにも勉強内容をupしていきます！

 

【独学でプログラミング】テックアカデミーのWebアプリケーションコースを再開。

テックアカデミー プログラミング

 

久しぶりにプログラミングの勉強を再開します。

自分の大会がとりあえず終わって、かなり真面目にセカンドキャリアを考えなくては。。。になってきたのもあり。

まずは復習も兼ねて、以前やっていたオンラインブートキャンプ Webアプリケーションコース を最初からやり直し且つ応用でサンプルページを自分の画像やURLを入れたり、デザインを変えたりといった感じで進めていこうと思ってます。

別のブログでもちょっと書いたのですが

趣味がないならプログラミングを始めてみては？PC一台で楽しめて仕事にも活かせる！ - 人生をシンプルに☆

全くの独学って結構大変。。。

 

TechAcademyのざっくりとした流れ

TechAcademy [テックアカデミー] は受講後もオンライン教材を閲覧することができるのが良いところです！

メンターへ相談はできないんですが、過去のslackのチャットなどは保存しておけば見ることができます！（私は１部だけ保存していましたが他は消えてしまった。。もったいない。。）

事前準備（cloud9、github,herokuの登録など）

↓

html,cssの基礎、応用（簡単なWebページのプロフィールやお問い合わせフォームを作る）

↓

bootstrapの基礎

↓

Gitの使い方、ポートフォリオの作成

↓

Rubyの基礎

↓

Railsを使ったアプリケーション開発

  • メッセージボード
  • Twitterクローン
  • ECサイトっぽいもの

↓

オリジナルアプリケーションを考えて作成。

ちなみに私はgitのところとTwitterがめちゃくちゃ時間がかかりました。

オリジナルアプリに関しては、締め切り3日前に使おうと思っていたSNSのAPIの規約が変更になり実現しないことが判明。。そういうわけでオリジナルアプリは完成できませんでした。。

１ヶ月でTechAcademyは完了するのか？

私は１ヶ月仕事がある日は３〜５時間、ない日は８時間くらい缶詰になってなんとかオリジナルアプリまでは質問しまくって終わった（というかほとんどメンターにやり方を聞いた）

完了自体はすると思うのですが

結構過酷なので仕事しながらの人はちょっと余裕を持って12週間コースの方がじっくりアプリケーションの開発にかける時間ができると思います！

今回は私は再勉強になるのでオリジナルアプリ以外であれば１ヶ月で終わると（多分思うんですが。。）今回は一切メンターがいないので友人やオンラインでつながってるプログラマーに色々質問しまくろうと思います。

周りに聞く人がいない人は？

私も利用しているのですがteratailという無料で登録すればエンジニアさんに相談できるというサービスがあります！スタックオーバーフローを今まで使っていたのですがteratailの方が個人的にはサイトが見やすい（気がする）なので独学で進める人は積極的にこう言ったサービスを利用するのがいいと思います（ただある程度的確な説明をしないとすげーぶった切られますが、それも修行です。質問の仕方の勉強にもなるかもです。）

 

まとめ

結局手を動かさなければ全然覚えないし、言語をいくら勉強しても全然ダメでした！

サンプルアプリを作ったりしていると、なんとなく流れがわかってきた（ようやく）レベルです。なので実際の現場に言っても全然役に立たないレベルです。情報系の大学に入っていたわけでもなく機械音痴でどっちかっていうと脳みそまで筋肉なんじゃないかと思ってるくらいの私でも毎日触れていると脳内に浸透していくので、とにかくエンジニアになるにはひたすら手を動かし続けるしかないですね。。

テックアカデミーは１週間無料体験ができるのでとってもお得です！

オンラインブートキャンプ 無料体験

 

 

Wimax2の速度制限が原因だった件

ネットワーク

ポケットwifiの速度制限が問題だったようです。（チーン）

simpledancer.hatenablog.com

アップデートもし、キーアクセスチェーンも削除したけどどうもうまくいかない。 スタバにいた時はキーアクセスチェーンを削除したらうまくいったのに。。。

もしや。。。ということでググりました。

1分でわかるWiMAX2の速度制限と３つの対処法 料金プラン改定後

f:id:simpledancer:20170329011053p:plain

f:id:simpledancer:20170329011106p:plain

私は１ヶ月の制限が7GB超えていたっぽい！

Amazonプライムビデオを見すぎたようです！！！（泣）

 

来月から少し落ち着くのでプログラミングの勉強を再度やり直したくてこのままネットがブツブツ切れるようだったらどうしようと思っていたので、

 

とりあえず４月からはまた通常通りに戻る（予定）なのでちょっと一安心。

 

このブログも仕事先のお店のwifiで書いてます。

 

ポケットwifiって便利でいいわ〜と思っていたけど

速度制限ってものを全く考慮していませんでした。。

あと3日間はスタバと大阪遠征のため、ホテルのwifiに頼ります。

 

来月の目標はTechAcademy [テックアカデミー] のコースを（去年受講したやつ）再度挑戦して

一個アプリを作りたいです。

TechAcademy [テックアカデミー] は受講終了後もオンライン教材を見て勉強することが可能なのです！

なのでオンラインの有料系のスクールをやるならTechAcademy [テックアカデミー] がオススメです！（１週間無料体験もできます）

過去ログがアーカイブされてもう見れなくなってしまったんですが、

ちゃんと保存していれば先生とのslackのチャットも終了後見ることができます。

ただ、１ヶ月プログラミングをやるとググる能力が上がるのである程度は自分でググって解決することもできますし。

teratailとか質問サイトもあるのでそれで質問してみたりとかできますし（便利な世の中だ！）

ちなみに１ヶ月自宅で５〜７時間プログラミングやslackしてても速度制限はどうってことなかったです。（来月はプライムビデオを控えて勉強します。。）

OSのアップデートが全てを解決してくれた件

ネットワーク

 

先日、こんな記事を書きました。

simpledancer.hatenablog.com

で、動くようになったんですが

時々ブツブツ切れる。。

これはルーターのせいかなと思ったんです。

でルーターも再起動させたりしてみたのですが関係なく。

いや、困ったな。。。

でも根本的な、OSアップデートしてないよね。。。

と思ったのです。

OSをアップデートしよう

f:id:simpledancer:20170317112428p:plain

windowsは最近使ってないのでわからないんですが

Mac頻繁にOSが新しいのなりますよね。

それで放置、してたんですよね。

誤作動がこわくて。

最終的にもしかしたらここかと。

そういうわけでOSをアップデートしました。

正直半日かかっちゃったんですけれど外出していたので良しとします。

正常に動作しました！！

心配な方は他の端末でOSアップデートについて色々調べてみると良いかもしれません。

以前、iPhoneのupdateをした時のアプリの誤作動がトラウマになっていたようです。。。

そういうわけで、とりあえず今の所は

アップデートとキーチェンアクセスの削除でうまくいきましたよ！ってことなので

動作が遅いMac使用中の方は試してみてください！

取り急ぎご報告でした♪

 

 

Mac使ってるけどいきなりwifiが繋がりにくくなった〜〜（泣）の解決方法です

ネットワーク

f:id:simpledancer:20170130013241j:plain

 

きょう、朝他のブログ書いていた時から調子が悪かったんですが

wifiルータは正常なのに、全然ネットが繋がらなくて！

何なんだー！と思って色々調べてやっと復旧しました。

MacBookの方で繋がりにくい方は試してみてください！

 もう、せっかく書いてたのに本当に大変だったんです。。。

ありとあらゆる操作を試しました。

久しぶりにこんなにシステムをいじりましたよ。

もしMacbook繋がりにくい人がいたらやってみてください！

ちなみに私はMacbook air の11インチを使ってます〜

まずはwifiが繋がっているか確認する！ 

そもそもwifiが繋がっているかどうかを確認。 

f:id:simpledancer:20170323222653p:plain

ちなみに今池袋のスタバで作業してます。

あの、最近店員さんが「お仕事帰りですか〜？」とか話しかけてくることが増えたんですが、なんかの強化月間なのでしょうか？

若干義務的に話しかけてる感が否めないんで気になってます。スタバの方針だろうか。「お一人でいらっしゃる女性客には積極的に話しかけることでリピーターになってもらおう!」みたいな。仕事じゃなかったけど「はい、仕事です〜」って答えました。

大学生かな〜あの子。

 

話が脱線しました。

他のデバイスもiphoneなどあればwifiに繋がっているか確認します。

下記私はつながらなかったのですが基本的に上のブログの内容を試してみると接続できることが多いみたいです。

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

Macで突然httpだけ繋がらない（httpsは繋がる）現象が・・・｜シロクジチュウ。

MacでWi-Fiの速度が出ない、繋がらないなど、調子がおかしい時に試したい5つの対処法 – OTTAN.XYZ

MacのWi-Fiが正常に繋がらない時、または速度が遅い時に試すべき方法 | gori.me（ゴリミー）

私のMacちゃんが通常に戻ったのは下記のやり方です。

support.apple.com

キーチェーンアクセスユーティリティを使って、保存されているネットワークのパスワードを削除します。

 

やり方 

  1. Launchpadの中のキーチェーンアクセスを開きます。

    f:id:simpledancer:20170323231933p:plain

  2. 左サイドバーのシステム　を選びます。

     

  3. そしていろんな種類がごちゃまぜになってますがAirMac ネットワークのパスワードという種類をまとめて並べます。
  4. AirMac ネットワークのパスワードを全て削除します。（過去にアクセスしたwifiネットワークが羅列されてると思います）
  5. 全部削除したらパソコンを再起動します。
  6. 再度wifiにつなげてみます。

するとサクサク動くようになりました！

いろんな方法がありますが、「削除する」って結構ドキドキするんですよね。。システム関係疎いので。。

 

自分で調べて解決することで自信がついた

私は結構わからなかったらすぐ人に聞いてしまったり

放ったらかしにしちゃったりしてしまうタイプだったんですが

今回は自分でググって（時間はかかったけど）調べて解決できたので

すごく自信がつきました！

これもプログラミングやブログを書くことで検索力がついたおかげかな？なんて思ってます。

 

便利な紹介ツール・ヨメレバを使ってみました！

ブログカスタマイズ

f:id:simpledancer:20180215105028j:plain


ブログにアフィリエイトリンクを貼ったりしてる人はご存知だと思いますが

ヨメレバ・カエレバ。

f:id:simpledancer:20170306125547p:plain

こういうやつ↑

他の方のブログでどうやってやるのかな〜と気になっていたもののずっとカスタマイズせずに放置していたんですが、やっと重い腰をあげました。

書籍紹介ブログパーツ ヨメレバ

ちなみに最近はRubyの勉強は滞り中。

大会終わったらまた復活しようかなと。

ヨメレバ作製法の流れ

  1. 楽天、amazonのみ私は作成します。のでそれぞれのアフィリエイトのIDを取得しておきます。

  2. http://yomereba.com/に移動して、取得したIDを入力します。

  3. 情報を保存したらそのまま本のリンクを作成するために、紹介したい本のJanコードを調べてコピペ、貼り付け。
  4. 生成されたリンクを自身のブログのhtmlに貼り付けます。

ブログ自体のcssのカスタマイズ

  1. 管理>デザイン>デザインcssにカスタマイズのcssを貼ります。こちらのサイトからコピペさせていただきました！

    www.ituore.com

  2. はてなブログProの方はスマホ版もカスタマイズできます！スマホマーク>記事>記事下　にコードを埋め込むだけです。

     

ヨメレバにするメリット 

  • 複数のサービスのボタンを設置できる。
  • 見た目がすっきりとしていて読み手側からも見やすい。

あたりだと思いますが、もし今普通にアフィリエイトリンクをペタッと貼ってるだけの方はチャレンジしてみてください！！

 

余談ですが最近世界的に有名なキャリーハンターさんというポールダンサーさんが

元Javaのプログラマーだったと知りテンションが上がりました!

 

ロゴジェネレーターで無料で簡単にブログのロゴを作る

デザイン ブログカスタマイズ

f:id:simpledancer:20170130013241j:plain

 

ブログのヘッダー画像ってブログのイメージにつながりますよね？

「いい記事を書いていたらあまり関係ない」

という気がするようなしないような？

でも、やっぱりヘッダー画像の印象で読みたいか、読みたくないか？

とかサイトの趣向とかって出てくるような気がします。

 

私もいろいろいじってみたんですが（一時期文字を手書き風にしてみたり。）

先日ロゴを簡単に製作できるロゴジェネレーターの存在を知ったのでシェアしたいと思います！

 

 

ロゴジェネレーターで作る流れ

詳しいロゴの作り方は下記オススメサイトなどからジェネレーターの操作方法を確認しながら作ってみてください♪

大まかなはてなブログに貼る流れ

まずは気に入ったフォントを探す

↓

各ジェネレータの仕様にもよりますが、ロゴにしたい文字を入力する

↓

画像データで書き出す（htmlができるものもある）

 

はてなブログに戻って

管理画面の　デザイン>カスタマイズ>ヘッダー

で画像をアップロードします。

f:id:simpledancer:20170224161557p:plain

表示設定はタイトルロゴなので下の画像だけ表示。

試しにシンプルなやつにしてヒゲマークをつけてみました

f:id:simpledancer:20170224161712p:plain

こんな感じ。これはこちらのサイトで作りました↓

Squarespace Logo

 

あと別でサイトを今作ってるんですが

f:id:simpledancer:20170224122503p:plain

こういうのも簡単にできます。

これは

Logo and Graphics Generator - Cool Text

で作りました！ロゴの種類豊富です。

 

注意点

ロゴを作る際に日本語だと文字がうまく反映できなかったりするので

その場合は一旦メモ帳などに書いたものをコピペして貼り付けるとうまくいきました！

（日本語対応のロゴのみ！）

オススメサイト

matome.naver.jp

girlsnet.ninpou.jp

ferret-plus.com

まとめ

ちょっと調べるだけでたくさんの種類のジェネレータがありました。

ロゴを作るだけで一気にオリジナリティも出たりブログに愛着がでます！

で、作るの自体が楽しいです♪

webの知識なんてなくても簡単にできるので是非試してみてください！

 

3分でできた！はてなブログにインスタグラムのフィードを表示させる方法

ブログカスタマイズ

f:id:simpledancer:20170130013241j:plain

 

もともとアメーバブログで作っていた個人のダンスの告知ブログを

せっかくはてなブログproにしたこともあり、はてなに変更しよう！と決めて

新たに１つブログをまた作ることにしてみました。

 

自分のダンスの活動用のブログなので

  • 写真が多い方がいい
  • フォロワーが欲しいのでインスタグラムのフィードを埋め込みたい
  • お問い合わせページを作りたい

というのをまず決めて、インスタを表示する方法を調べてみました。

 

一番簡単な方法

まず、サイドバーに表示をさせたかったのですが、幾つか方法がありましたが

2種類やってみたのですが、一つ目の方が私はうまく表示できなかったのと

InstagramのユーザーID、アクセストークンをInstagramdeveloperから取得しなくてはならなくて結構時間がかかるかなと思ったので（もともとアプリの制作のために取得はしていたのですが）

snapwigitというサイトから作る方が恐ろしく簡単。だったのでご紹介します

 

SnapWidgetでフィードを埋め込む方法

1.まずSnapWidgitにアクセスします。

SnapWidget | Instagram Widget

ログインはFBのアカウント持ってたら色々入力しなくて済むので楽。

f:id:simpledancer:20170219113548p:plain

2.ログインしたら、Get Your Free Widgetを押して自分のインスタアカウント名を入れます。あと希望の設定を入れていきます。私はもともとの設定をとりあえず変えずに。

f:id:simpledancer:20170219113845p:plain

 

3.

表示形式が色々出てくるので

私は文章とかはいらないので写真のみの

3段表示で見やすくしたかったのでGRIDを選択しました。そしてGetwidgetをポチります。

f:id:simpledancer:20170219114148p:plain

4.そのあと貼り付け用のコードが生成されるのでそれをコピーして自分のはてなブログの　デザイン＞カスタマイズ＞サイドバー>モジュールの追加>

でHTMLを選択してコードを貼り付け→適用。

f:id:simpledancer:20170219114534p:plain

こんな感じで表示が成功しました！

表示数を増やしたければ2のLayoutの数字を変更したりすると良いです。

ITエンジニアの無料カウンセリング【ポテパンフリーランス】

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

 

もう少し時間がかかるかなと思ったのですが、意外にもあっけなく簡単に終わりました。

参考にさせていただいたブログはこちらです↓すごくわかりやすかったです！

www.mukaikaze.net