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

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

意外と簡単!Wordpressの見出しをカスタマイズ♪

f:id:simpledancer:20170126000720j:plain

 

やっとワードプレスの見出しをカスタマイズしました!(まだ完了ではありませんが)

とりあえず3パターン作ってみました。

f:id:simpledancer:20170125235214p:plain

こんな感じ。

テキストは

<h2 id="danraku2">見出し2</h2>
<h3 id="danraku3">見出し3</h3>
<h4 id="danraku4">見出し4</h4>

こういう感じになってます。

 

ステップ的にはとっても簡単でした!(※以前貼っていたリンクが無効になっていたので別リンクを貼ります!)

 

affiliate150.com

必要なのは4ステップ

step1:

2つのプラグイン

  • AddQuicktag
  • custum css

をインストール

step2

AddQuicktagにh2,h3など必要なものを入れていく

step3

外観>カスタムCSS に移動して自分の表示させたいcssのコードを入れていく

www.keni-customize.net

ここに11種類の見出しのサンプルコードがあるのでそれをまずは入れてみる(色などは後で変更しましょう)

step4:

cssを保存し、wordpressの記事を書く際、見出しを表示したいところで

f:id:simpledancer:20170126000059p:plain

入れたい見出し番号とquicktagsの所を変更h2,h3など。

※意外とずれてしまったり表示が外れてしまったりするので、一度ビジュアル→テキストでタグの中にちゃんと見出しの文言が入っているかどうか確認してプレビューしてから公開しましょう。

 

今後の課題

見出しがカスタマイズできたので

  • フォントを変更して見やすくする(今微妙な明朝体?)
  • サイドバーが見にくいので整理して画像を入れたり見やすくする。
  • 見出しの色を変更する。
  • ソーシャルのアイコンを変更する。

カスタマイズして表示出来ていくのが楽しいです。

wordpressの方がはてなブログよりもちょっと面倒くさいですが、引き続き読みやすいサイトになるように続けていきます♪

※サイトをActivello→Simplicity2にテーマを変更したら見出しが若干css崩れました。。

カスタマイズ前途多難。

tabibit.net

 

ナビゲーションバーを均等に配置してリンクを設置する

続き

simpledancer.hatenablog.com

さて続きです!

 

昨日までに見た目(css)とリンクの大元のコードはhtmlに書き込みましたので

f:id:simpledancer:20170120182638p:plain

こんな感じでできましたが、まだこの状態だと左よりになっていて、さらにリンク先が入っていないのでメニューをクリックしても何も出てきません。

 

まずメニューを均等に並べる

デザインCSSを変更していきます。

#menu-content > li > a{
position: relative;
display: block;
height: 100%;
width: 100%;/*ここを追加*/

line-height: 40px;/*2*/
background: #444;/*9*/
color: #fff;/*10*/
font-size: 70%;
text-decoration: none;
z-index: 2;
}

 

そして

#menu-content > li{
position: relative;
float: left;
height: 100%;
text-align: center;
width: 20%;/*ここを自分のカテゴリ数を考慮して%を入れる。

私の場合は100/5カテゴリ=20なので20%*/

 

そうすると

f:id:simpledancer:20170121122406p:plain

均等になりました!

 

カテゴリーの中身の変更

ヘッダ<タイトル下

ここのhtmlを変更/追加します。

参考にさせていただいたブログはたくさんカテゴリや子カテゴリがあるのでそれを削除していきます。(私の場合必要なのは今の所5カテゴリ2子カテゴリとして)

 <ul id="menu-content">
        <li>
            <a href="1階層目のリンク">カテゴリ1 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="2階層目のリンク">カテゴリ1-1</a></li>
                <li><a href="2階層目のリンク">カテゴリ1-2</a></li>
                <li><a href="2階層目のリンク">カテゴリ1-3</a></li>
                <li><a href="2階層目のリンク">カテゴリ1-4</a></li>
            </ul>
        </li>

こちらの内容を例えば私の場合だと

<ul id="menu-content">
<li><a href="#">プロフィール</a></li>
<li><a href ="http://simpledancer.hatenablog.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA">ブログカスタマイズ</a></li>
<li>
<a href="#">プログラミング <i class="blogicon-chevron-down"></i></a>
<ul class="second-content">
<li><a href="http://simpledancer.hatenablog.com/archive/category/Ruby">Ruby</a></li>
<li><a href="http://simpledancer.hatenablog.com/archive/category/JavaScript">Javascript</a></li>

のように変更します。""の中身をカテゴリーのリンク先URLをつけ、hrefタグの間にカテゴリ名を挿入します。

するとカテゴリーのボタンをクリックするとリンク先のURLに飛ぶことができます。

アドセンス張ってる方への注意点

  • Googleアドセンスの上にドロップダウンメニューがかぶさってしまうと、規約違反になってしまい、広告を止められる可能性があります。特にサイドバーの上に広告を貼っている方は、被りやすいので気をつけて下さい。

 

ということなので気をつけながらやりましょう!

スマホ版も改良してみました!

simplelifedancer.hatenablog.com

 

 

 

 

 

 

ナビゲーションバーを配置する(工事中のため途中まで!)

f:id:simpledancer:20170109154750j:plain

 

30記事ほどできてきたのでそろそろナビゲーションバーを作ろうと思います!

まず参考のサイトはこちら

いつも参考にさせていただいています。

 

www.yukihy.com

 

やり方は全てゆきひーさんのブログをそのままコピペさせていただきました。

デザイン>デザインCSSと

デザイン>ヘッダー>タイトル下html

ここの2つにコピペコードを設置すれば反映されます!

もちろんリンクの中身とカテゴリ名は各々のブログのように書き換えます。

 

 

※ただ時間が迫ってきたので一旦中断して微妙なナビゲーションバーが設置されたままですが、この数日中にはカスタマイズ仕切れる予定、、、です。

設置自体は簡単に完了しました。

とてもわかりやすい!!

f:id:simpledancer:20170120182638p:plain

仕事に行かねばならないのでここから先はまた明日。

あ、明日の仮装大賞出てます!ポールダンスの組の1組目の方。

顔緑ですけどね!

www.ntv.co.jp

 

はてなブログcssを変更して5点カスタマイズしました。

f:id:simpledancer:20170113074451j:plain

ブログのカスタマイズとか、以前なんとなくやらずにやっていたのですが、調べてみると無料でたくさんの情報が落ちていることがわかりました!

 

せっかくだからはてなブログproにしたことだし

  • 見出しを綺麗にしたい
  • twitterのフィードを反映させる
  • ヘッダーにメニューバーを作りたい
  • ソーシャルのアイコンを変えたい

など改めてぐぐってみることにしました。

見出しを綺麗にしたい

まず 「はてなブログ pro 見出し カスタマイズ 」で調べてできたこちらのサイト

shiromatakumi.hatenablog.com

ものすごくたくさんの情報が書かれていて言うなれば私の変更したかったところがほぼほぼカバーできていました(最初に出会いたかったブログ)

 

早速デザインでcssを追加しました。

shiromatakumi.hatenablog.com

 

これはもう一個のサイトの方の見出しのcssなのですが

デザインCSSの所に

 

/* 見出しのリセット */
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
background: none;
border: none;
border-radius: 0;
}
.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #1056a2;
border-bottom: 1px solid #1056a2;
}

を貼り付けました。

そうすると↓

f:id:simpledancer:20170113072612p:plain

こんな感じで大見出しができました。

このコードのh3をh4、h5と変更して記述すると、中身だし、小見出しも変更することができます。

 

自力ではてなだけ見ながらやってたら全然わからなかったところなのでとても助かりました。

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

twitterのフィードを反映させる

 

これは前回やったのでこちら

simpledancer.hatenablog.com

これはproに変更する前にいじってみたのですが、難なくできました。

他のブログサービス「アメブロ」でもフィードを埋め込むことができました(仕様がはてなと違うので、埋め込む時は 「アメブロ twitter 埋め込む カスタマイズ」とかで調べると出て来ます)

 

ヘッダーにメニューバーを作りたい

デザイン→ヘッダー でcss部分に改装を書いていくのですが

hacogaki.hatenablog.com

こちらのブログのグローバルメニューのところが他のブログと違って海外のサイトを参考にされておしゃれな作りになっていたのでメモがてら貼っておきます。

私は今は簡単に

 

nav class="main-navigation">
<div class="menu-toggle">メニュー</div>
<div class="main-navigation-inner">
<ul>
<li><a href="http://simplelifedancer.hatenablog.com/">ホーム</a></li>
<li><a href="#">プロフィール</a></li>
<li>
<a href="#" class="has-child">ミニマリスト</a>
<ul>
<li><a href="#">断捨離系</a></li>
<li><a href="#">人間関係</a></li>
</ul>
</li>
<li>
<a href="#" class="has-child">美容・ダイエット</a>
<ul>
<li><a href="#">アンチエイジング</a></li>
<li><a href="#">食生活</a></li>
</ul>
</li>

</ul>
</div>
</nav>

 

と、こういった感じでシンプルな階層にしていて#部分にそのカテゴリーのURLを貼り付けるとそのカテゴリーのページに行くようになります。

色味とかもっと変更したいです。

f:id:simpledancer:20170113074205p:plain

現在こんな感じでざっくり作りました。

諸々の仕事が終わったらこちらも変更してみようと思ってます。

 

ソーシャルのアイコンを変えたい

f:id:simpledancer:20170113074904p:plain

既存のままでも普通にヘッダー部分のデザイン>記事 に行くとソーシャルアイコンが自動で反映されるボタンがあり、それでもよかったのですが

私は可愛いボタンがよかったので 

cssをカスタマイズすることにしました。

 

ちなみに既存のチェックボタンは外しておきます。

www.yukihy.com

 

参考にさせてもらったブログはこちら。

細かく書かれていて本当に助かりました。

デザインをいじる前に、設定>詳細設定でheadに要素を追加の所に

(Yukihiiさんのブログより)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

 

を追加してからデザインをいじると反映できます。

私はまだスマホ画面の方はやってないのでこれも後日。今PC画面ではSNSボタンが見れます。→ スマホ版も2017年1月18日に変更できました!

www.ituore.com

 

まとめ

前までめんどくさいなあ、と思っていたけれどやりだすと止まらなくて寝るのを忘れてしまいます。まだまだカスタマイズできてない部分がたくさんあるけれど、うまくサイトに反映できた時はめちゃくちゃ嬉しいです。

 

今から成田空港へ向かうのでカスタマイズは現地に着いてから仕事後やります!

 

 

はてなブログProに変更しました!良かった点

f:id:simpledancer:20170106142057j:plain

 

先ほどはてなブログproに変更しました。

ドメインを独自のものに変更するかを迷ったのですが、いろいろサイトを調べていて

まだ流入数も少ないので当分hatenaのドメインでやることにしました。

 

Proに変更して良かった点

1.キーワードリンクがオフにできる。

下線リンクから違うページに飛んじゃうのでブログから離れていっちゃうのを防ぐため

2.アドセンス広告が貼れる。

 元々審査は通っていたのですが。無料版だと貼れなくなってましたので、嬉しい。

3.はてな独自の広告を非表示に出来る。

はてなのアドセンスがデカデカと占拠(ごめんなさい)してたのを消すことができる。

4.使えるツールが増える。

この辺はまた別途。

 

 

まだproに変更したてなのでうまくいくかわかりませんが1年ほどやってみてから独自ドメインには変更してみようかなと思います。

 

いろいろ試しにやってみたいことがあるので、雑記ブログとこのプログラミングブログを分けたいなと思ってます。ソーシャルアイコンを変えてみましたひとまず。

f:id:simpledancer:20170107164250p:plain

ラインボタンはもう一つの雑記ブログには入れたのですが、もともとデフォルトでコピペのPC版だとラインアイコンがなかったのでこっちのブログはまだデフォルトのまま。

アイコンで助かったブログがこちら

【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2 - Yukihy Life

 

今日は出張で移動してるのでその間にいろいろカスタマイズをしてみようと思います。

 

 今後やろうと思っているカスタマイズ

1.メニューバーを作る

2.SNSアイコンを自作する

3.はてなグループに登録する

1/10にミニマリストグループにもう一個のブログ入りました!

4.ヘッダーに画像を挿入する

 

 緩くカスタマイズを楽しみます!

関係ないけど、東京駅で買ったピーナツ最中。

f:id:simpledancer:20170106152415j:image

simpledancer.hatenablog.com

 

 

 

 

 

にほんブログ村 IT技術ブログへ
にほんブログ村

 

 

 

無料ブログでtwitterのフィードを埋め込む方法

 

はてな使ってる人は

「なんだ〜そんなこと??」

と思われるかもしれませんが、

私、twitterとかFBのタイムラインが流れる(サイドバーとかに)あれ、無料ブログでは簡単にできないと思ってたんですけど、

めちゃ簡単にできました。

私ははてなブログとアメブロも使っているのでどちらも出来るかやってみようと思いました。twitterのタイムラインをサイドバーに反映させてみます(はてな無料ブログverとアメブロverやってみました)

 

f:id:simpledancer:20170104114223p:plain

 はてなver.

twitterの公式アカウントから

f:id:simpledancer:20170104114944p:plain

左側のEmbedded Timelineをクリックして

出てきたコードをcopy すると貼り付けるコードがコピーできます。

ただし、自動生成されたコードだとブログに貼ると超ながい!

なのでボタンの上らへんにある set custamization optionを クリックすると

幅を変更できます。そして変更したら、またcopycodeをポチッとすると新しいコードがコピーできます。

はてなのサイドバーに反映させるために

デザイン>🔧マーク>サイドバー>モジュールを追加>HTML>

まで画面を進めると

f:id:simpledancer:20170104120231p:plain

タイトルに例えばtwitter

したの余白にコピーコードを貼り付けて

青い適用ボタンをクリック

 

そうするとタイムラインが反映されます。

 

↓こちらのてつさんのブログを参考にさせていただきました!めちゃわかりやすかったです。

 

www.mutant-tetsu.com

 

アメブロver

 ※コピーコードまでは一緒です。

設定>サイドバー>プラグインの追加>プラグインのところにコピーコードを貼り付け

※サイドバーの配置設定のところで「使用しない機能」のところにフリープラグインが入っていると反映されないので、フリープラグインのボタンをドラッグアンドドロップで使用するの方へ移動させてください。

 

そうすると反映されます。

 

埋め込みタイムライン — Twitter Developers

developersのページにもやり方は書いていますが、各ブログサービスで階層などが違うかもしれないため、コードコピーした後は各ブログのヘルプなどで確認してみてください!

ただアメブロは広告や色が非常に多いのでかなりごちゃごちゃした印象になるため

タイムラインは外してしまいました!(広告多すぎやしませんか?後ピグとか。いらない。。)

 

自分の作ってるwordpressの方ではあまりごちゃっとさせたくないので今の所はフィードは反映させないようにしようと思ってます。

 

Poledance × Trip 

Poledance × Trip

 

 

アイキャッチ画像を追加するだけで一気にサイトがプロっぽくなった

f:id:simpledancer:20170107173134j:plain

 

メリークリスマス!

 

はてなブログを利用してる人はあまりクリスマスって関係なような気がしてならないのは置いておいて。

 

私は23日は仕事で24の明けまでシャンパンの洗礼を受け

24の昼過ぎに起きて湯船にお湯を溜めたまま溢れ出し

ガスは止まるし病院に行く時間なくなるし

バッタバタで

25日の今日は昼間で寝てお昼はコンビニのカフェラテとスーパーのラップサンドです。

スーパーのチープなチキンを買わなくても家で手羽元とか焼いたほうが美味しいし経済的。

 

それは置いておいて。

wordpressのカスタマイズをまたちょこちょこしてるわけですが、

いかんせん素人なものでどうも美しく仕上がらない。色々テーマを変更して今回は

Activelloにして、フォントの色だけちょっとカスタムしました。

 

で、アイキャッチ画像をずーっとつけてなかったので、なんとも殺風景(絶対読まれないブログ!)これはいかん、どうすればいいのか。とおもって。私の好きなブログを運営してる方のを読みながら、アイキャッチを追加してみました。

 

ruka-affiliate.com

ちなみに今回はフォントは私は変えてません。

 

テーマ変更とアイキャッチを追加してみた!

でも、テーマを変更、アイキャッチを追加すると

 

f:id:simpledancer:20161030111645p:plain

とかこんな感じだったのが

 

f:id:simpledancer:20161225161641p:plain

f:id:simpledancer:20161225161710p:plain

 

って感じで(サイドバーが消えちゃったのでガラッガラですが)

スライドできて、アイキャッチがそのまま反映されるのでいい感じになりました。

タイトル文字がどうもシロ文字でhoverの場合でないと目立ちにくいので

まずはアイキャッチですが

 

編集画面の右下に

f:id:simpledancer:20161225162019p:plain

があるので、そこで設定

f:id:simpledancer:20161225162123p:plain

でアイキャッチ画像を設定にすると

 

f:id:simpledancer:20161225163425p:plain

と、このように、

左がアイキャッチをつけてないバージョン

右がアイキャッチをつけたバージョン。

 

やっぱり画像がある方が、なになに、ってなりますよね。

wordpressカスタマイズ初めて2ヶ月目ですがちっともわかってませんでした〜

 

相変わらずのIT音痴。

 

サイドバーがテーマを変えたら消えちゃった〜のでまた引き続きカスタマイズします。

 

Poledance × Trip 

Poledance × Trip

 

 

にほんブログ村 IT技術ブログへ
にほんブログ村

 

 

プログラマーの人って貢献度高いなと思う

 

私思うに、プログラマーって貢献度高いなと思う。

周りのプログラマーの人も無償で色々教えてくれるし(いや、話が専門的すぎてわからないことが多いんだけど)

 

エラーが出てFBでぽそっとつぶやいたらすごいいっぱい教えてくれたりするし。

1聞いたら10くらい教えてくれる。

 

githubとかもすごいですよね。

あとQiitaすごいなと改めて。

私はrailsの勉強してるんだけど、初心者がつまづくところとか、それをどうやったらいいかとか事細かに。

qiita.com

ありがてえ。。

 

きっと10年前とか、調べるの大変だったんだろうな〜

今でも四苦八苦してるけど

昔からプログラミングやってた人ってよっぽど根気ないと(オタクでないと)続かないんじゃないだろうか?

 

なんて思ってしまう。

 

今はスタックオーバーフローとかあとプログラマのコミュニティも割と充実してるし

その気さえあれば、サクッと解決しちゃうもんなあ。。

 

便利な世の中になったものだ。。

そんな私は基礎Ruby on rails 2周目やってる。2周目だけど、プログラミング初めて1年くらいだらだらやってるけど、コード全然かけない。。。orz

ただ、タイピングはOLの時に比べてみてもめちゃ早くなった。。

 

年末年始は篭ってプログラミングしようかな。

 

********************************************************************************************

tabibit.net

 

年内にはもう少しカスタマイズしたいんだけれど。プロテインのネタで今回は書いてみました。ヘッダーにポールの写真入れるか。旅の写真を入れるか。

定まらない。。

 

youtubeのショートコードを埋め込むと動画が表示されることを知った

f:id:simpledancer:20170109154750j:plain

 

今更ながら、wordpressの記事の中に、リンクアドレスではなく、youtubeの動画自体を貼り付けたかったんだけど、PHPをいじらなくてはいけないと思い込んでた。

 

それもあり、めんどくさいなと思っていたんだけれど。

 

全然、なんてことない。

 

f:id:simpledancer:20161218125201p:plain

これの埋め込みコードをコピーして、テキストに貼り付ければ

普通に表示されました。

 

プラグインを入れればもっと楽かもしれないんですが、これの方がてっとり早いとのことで。

 

忘れないように覚書。でした。

 

**************************************************************************************

tabibit.net

 

朝までプログラマーの友人と飲んでいたので、顔がパンパン!

今から体を絞りに行ってきます。

あと、この前面白い本を読みました。

 

これ、全部の悩みは筋トレで解決出来るらしい。

その中に、「体を動かしても考えてしまうような悩みだけを考えろ」大体のことは悩みでもないらしいです。

間違いない。

 

素敵な休日を!

 

 

 

プログラミング初心者が基礎「Ruby on Rails」やってみました。

 

先日はTechAcademyの1ヶ月を受けて

simpledancer.hatenablog.com

ちょっとはrailsに対する抵抗がなくなったものの、もともと集中力もなければ理解力もない私なので、これはもっと実際に手を動かそうと思い、オススメされていた

基礎「Ruby on Rails」をやってみました。

 

これ。結構やっぱり技術書って高いですよね3000円越え。でもって分厚い。

 

この1冊で「Morning Grory」という会員制のブログサービスサイトを作れるようになります。

各chapterで練習問題がちょこっとついています。

本に書いているURLに飛ぶと、サンプルコードはダウンロードできますのでダウンロードします。(途中本の中では省略しているCSSのコードがあるから必ずダウンロードしてください)

 

ローカル開発環境で進められていますが私はcloud9で実行しました。

 

chapter1~9まであり、実質そのサンプルブログサイトを作っていくのは3からになるので、最初はrailsのインストールや、諸々rubyの規約とかなんかの説明とか「試しにコードを書いてみましょう」という感じです。

 

私はローカル開発環境も設定は終わっているのですが諸々cloud9の方が楽だと思います。cloud9は5分くらいで環境整ってしまうので。

simpledancer.hatenablog.com

 

ただ、今はrails 5.0に勝手になってしまうので(本はrails4)railsのバージョンを確認してから本を進めた方がよろしいかと思います。(何もわからずとりあえずやっていったら不具合出ました、当たり前かもしれないけどその辺がよくわからない人だったんで。)

 

ですので 必ず 

rails-v

でバージョンを調べてみてからです。

 

大まかに1冊やり通すまで約2週間でしたが、途中で(おそらくchapter7あたり)表示されるはずのヘッダーの一部が表示されなくなり、だんだんサンプルコードをそのままコピペ貼り付けするようになり

cssがうまくサンプル通りにならなくなり。。

 

「どこからこうなったんだ〜〜」

と、なってしまったので。。

 

また最初からゆっくりやってみます、暇に任せて(暇じゃないけど)

プログラミングって難しいなあ。。

 

simpledancer.hatenablog.com

プログラマーのでてくる海外ドラマ「Mr.Robot」にはまりました。

今日はプログラミングの勉強は置いておいて、少し前に見始めて止まらなくなった海外ドラマMr.Robotについて書きます!

axn.co.jp

あらすじ

エリオット・オルダーソンはニューヨークに住む若者で、サイバーセキュリティ会社『オールセーフ(Allsafe Cybersecurity)』にてセキュリティ・エンジニアとして働いている。社交不安障害を患い、頭の中で想像上の友達に話しかけるなど、上手く人との関わりが持てない反面高度なハッキング技術を持つ彼は、仕事外ではSNSアカウントに入り込んで身近な人間の情報をのぞき見たり、ネット上の犯罪を通報するなどして過ごしていた。ある日の深夜、世界のあらゆる産業を牛耳る複合企業であり、オールセーフ最大のクライアントでもあるEコープ(E Corp)のサーバーが激しい攻撃を受ける。会社に呼び出され、事態の収拾に当たったエリオットはギリギリで被害を食い止めることに成功するも、感染したサーバーから「f・ソサエティ」なる謎の言葉を発見する。その後地下鉄に乗っている時に突然攻撃の犯人らしき謎の男、Mr.Robotから接触を受けたエリオットは、あろうことか先日の攻撃を防いだという腕を買われてハッカーチーム、「f・ソサエティ」へ入るようスカウトされる。彼らの目的はEコープの保有する金融データを破壊することによってありとあらゆる借金、ローンを帳消しにし、かつてない富の再分配を引き起こすことだった。

f:id:simpledancer:20161201122201p:plain

AmazonPrimeで無料でシーズン1全話見れたので。見ちゃいました〜

 

意外な名脇役が

主演のエリオット役の俳優さんも個性的で素晴らしいのですが、Mr.Robot役のおっちゃんが、「あれ〜どっかで見たことあるなあ〜」と思ったらクリスチャン・スレイターでした!

 

さすが、渋いおっさんで目が離せないと思ったら。年取ったけど素敵。

若い頃のトゥルーロマンスとか好きだった〜

www.youtube.com

しかもTrue Rommance,ブラッドピットも出てたんだ〜っと改めて見て驚いた。

プログラマー的見所

私は言うても、初心者なので全然専門用語なんてわからないんですが。。

プログラマーをされている方には耳馴染みのある単語がわさわさ出てきますし、データベースの話とかふんだんに出てきます。

逆に言えば、全然ITわからない人にはそういう部分が結構ややこしくて疲れちゃうのかな〜なんて思いましたが。

ハッキングしたいとかは思わないけど、あれだけ自由に情報操作できたりしたら面白いのになあ〜〜と思いながら見てました。

テックアカデミーやってる後期にこのドラマを見つけてしまったため、その日のノルマ達成後にご褒美として見る、をやってましたがおかげさまで目の下のクマがやばいです。

その他Betasと云うドラマもプログラマーが出てきます。シリコンバレーのスタートアップの話で割と明るいめなアメリカドラマです。

これもアマゾンプライムで見れちゃいます!

f:id:simpledancer:20170101211823p:plain

  連日誘惑が多いですが海外ドラマ好きな人にはやはりamazonPrimeおすすめです!

 

 

ポールダンスブログもやってます

tabibit.net

tabibit.net

 

 

にほんブログ村 IT技術ブログへ
にほんブログ村

 

1か月集中してRuby on Rails勉強してみました(オンラインコース受講後の感想です)

 

10月末から1か月、TechAcademyのアプリケーションプログラミングのコース4週間を受けてみました。

 

当初の目標としては1か月で自分でサービスを作れるようになる!

そしてWeb業界に転職活動を再開する!

というものでした。

 

techacademy.jp

かけた勉強時間

Ruby on Rails4週間コースだったので1日平均5−6hはやらないと間に合わなかったのですが、

私は日によって時間がまちまちで少ない時は2、3h、多い時で12時間くらいやってました。平均すると6hくらいはやってました。

 

メンタリング

1か月間、担当のメンターが決まっていて大体30〜1時間のビデオチャットで進捗具合や、相談やコードの添削etcをします、週に2回。

私の担当はアイドルオタクちっくな優しいおじさんがメンターでした。

ある程度質問などがあればメンタリングの日までにまとめておくのもいいかもしれませんが、個人のチャットページもあるので日々質問があれば、随時書いていくといいと思います。

 

チャットサポート

1日数人のメンターさんが15時〜23時の間に質問に答えてくれます。

時々時間外に回答してくださる方も多いので時間外でも私はガンガン質問を入れてました。

もちろん合うメンターさん、わかりにくいメンターさん、いろいろいらっしゃるので(指名できません)的確な回答が出ない時はとにかく聴きまくる。(私は本当に初心者で且つ理解力がないので画面の向こうでメンターさんたちも「またかよこいつ。。。」って思ってただろうな〜)

これくらいググった方がいいかなーってことでもちょっと調べてわからなければとにかくチャットしてみる。

あと質問内容を考えるのも頭使いました。

もう、どう考えてもわからない時は正直に

「わかりません!!」って言いましょう。わかったふりはしない!

 

カリキュラム

8つのカテゴリに分かれていて、最初は設定やらから始まり、Rubyの基礎、Git,

herokuの使い方など、そしてアプリケーションを作ったり、最終的にはオリジナルのサービスを作る流れです。

合間に課題があり、それに合格しないとなかなか先に進めません。

 

f:id:simpledancer:20161127152342p:plain

オリジナルアプリ

はっきり言って1か月で超初心者の私には結構ハードルがきつかったです。

1週間の制作期間を想定して、出してたアイディアのものを実装には入ったのですが、締め切り3日前に、APIの基準が昔と変更になり、作りたいものが作れないことが判明。

1月末にはスクールのオリジナルアプリのコンテストもあるのですが、とりあえずコース締め切りまでには間に合わなさそうだということを判断して、学習用のアプリの勉強を再開して課題を提出することにしました。(悔しい)

 

4週間を終えて

4週間、あっという間でした。

その間ほとんどの娯楽を捨てて、仕事もほとんど今週は休みましたし。プログラミングに費やした、、、つもりでしたが、たった1か月で理解するのは至難の技でした(それまで独学していたにもかかわらず)

ただ、やっぱりお金をかけている、というのと、質問をとにかくバンバン投げてそれが返ってくる環境っていうのは良かったです。

理解力とモチベーションが高い人は無料の講座でも全然大丈夫だとは思いますが、

そうではない方は絶対オンラインでも(逆に私はオンラインで良かった)身銭を切った方が良いです。

 

今後

いきなり就職できるほどのスキルはもちろん私はつきませんでしたので、ペースを少し落として勉強を続けていく予定です。

新たに購入したRuby onRailsの基礎本を最初から通してやってみるのと、TechAcadmyで使った教材を反復してやってみます。

 

4週間きつかったけど。

Rails好きになりましたよ。

 

simpledancer.hatenablog.com

 

にほんブログ村 IT技術ブログへ
にほんブログ村

 

新たにこの本を購入しました↑前途多難だけど頑張る。

 

 

Rubyの環境構築が思いの外サクッと出来てしまった話

 

こんにちは!

 

技術ブログになりきれてないこのブログですが、今日は1つスッキリしたことがありました!

 

私はrubyの環境構築を断念してcloud9でやっていたのですが。

simpledancer.hatenablog.com

でも、cloud9だとネットがつながる環境じゃないとできないので時々圏外になりがちな私のポケットwifiだと「せっかく勉強しようと思ったのに。。。。」ってことに時々陥ってました。

実際に開発するならローカルでも整えておきたい。。。でもググってやってみたりドットインストールでも途中でerrorが出て先に進めない。。(泣)

 

そして放置プレイを3ヶ月くらいしてましたが

たまたま参加したブログサロンの中にrubyの環境構築教えますよーと軽く言ってくださったので面識なかったのですが直メでお願いして、お互い時間が合わなかったのでスカイプでやることになりました。

 

言われるままターミナルにコマンドを打ち込むこと30分、全く問題なく環境構築ができました!!

↓こんな感じで。

f:id:simpledancer:20161103131926p:plain

通話しながらチャットがトータルで39分49秒!(内ダウンロード時間が半分以上)

1人でググりながらやってた時は数時間かかってもできなかったのに(泣)

ありがとうございます神里さん!!

そういうわけで普段は直でレッスンをされている神里さんのブログ(直接だと基本は都内限定のようです)

utina.yoshitokamizato.com

神里さんのブログの自己紹介アプリも作ってみたところ簡単にできました!(5分では完成しませんでしたが。15分くらいではできました)

 

まだruby勉強し始めでどっからどうしたらいいのかわからないとか、プログラミングやってみたいって興味のある方は気軽に相談できるようなので神里さんのサービスやブログを是非利用してみてください♪

 

※ちなみにTechcampの方ですが、無理に勧誘することはありませんとのこと!私も一切勧誘されてませんよ(笑)安心してください!

 

 

にほんブログ村 IT技術ブログへ
にほんブログ村

 

 

 

 

 

 

 

 

Wordpressを引き続き構築中です。

やーっとはてなブログに技術ブログを持ってきて、wordpressを私の好きなポールダンスの総合サイトとして構築することにいたしました!

 

まだ、全然

 

コンテンツできてないですが。

f:id:simpledancer:20161030111645p:plain

SNSの連携を作ったのと、メニューバーを作り、サイドバーを作り中です。

サイドバーがもう、なんだかよくわからなかったのですが

 

外観→ウィジット→副ウィジットエリア を選択して

f:id:simpledancer:20161030112044p:plain

テキストのところは入れたい内容(私の場合Profile)を記入。

f:id:simpledancer:20161030112129p:plain

サイドバーに表示が現れました。

まだ記事自体の投稿をしてないので、工事中のページばっかりですが。

 

やっぱり自分の好きなことを発信するのは楽しいです。

目指すは総合ポールダンスwebメディア!!

 

頑張ります!

 

 

wp-exp.com

 

画像は基本フリー画像集と自分の写真を貼り付けてますが

配置が難しいです。いろいろなサイトを見て研究してみようと思います。

liginc.co.jp

 

にほんブログ村 IT技術ブログへ
にほんブログ村