読者です 読者をやめる 読者になる 読者になる

アスリート系ですがプログラミング始めました。

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

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

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

 

今やってること

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

    Poledance × Trip |のカスタマイズ

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

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

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

中期目標

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

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

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

長期目標

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

こんな感じです。

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

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

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

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

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

f:id:simpledancer:20170215134654j:plain

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

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

何度も

何度も

何度も

何度も

挫折したんです。

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

何度もやめようと思ったし、今でも全然わからないし、いまだに全然仕事つけてないし(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編を再度やってみた。

 

こんにちはオドリコ@acro_y)です!

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

simpledancer.hatenablog.com

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

だけど1回やっているので前回の半分くらいの時間で終わると(多分思っている)

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

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

Lesson1 HTML CSS

やる内容としては

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

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

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

f:id:simpledancer:20170408120733p:plain

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

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

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のチャットなどは保存しておけば見ることができます!(私は1部だけ保存していましたが他は消えてしまった。。もったいない。。)

事前準備(cloud9、github,herokuの登録など)

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

bootstrapの基礎

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

Rubyの基礎

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

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

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

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

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

1ヶ月でTechAcademyは完了するのか?

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

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

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

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

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

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

 

まとめ

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

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

ひたすら手を動かし続けるしかないですね。

 

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

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

simpledancer.hatenablog.com

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

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

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

f:id:simpledancer:20170329011053p:plain

f:id:simpledancer:20170329011106p:plain

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

Amazonプライムビデオを見すぎたようです!!!(泣)

 

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

 

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

 

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

 

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

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

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

 

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

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

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

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

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

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

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

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

ちなみに1ヶ月自宅で5〜7時間プログラミングや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につなげてみます。

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

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

 

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

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

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

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

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

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