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

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

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

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

 

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

ヨメレバ・カエレバ。

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にしたこともあり、はてなに変更しよう!と決めて

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

 

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

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

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

 

一番簡単な方法

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

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の数字を変更したりすると良いです。

 

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

 

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

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

www.mukaikaze.net

 

railsチュートリアル始めました②

f:id:simpledancer:20170206120749j:image

 

昨日は近所のカフェで大好きなカフェラテ飲みながらチュートリアルをやってました。

wifiあるしこじんまりしててオシャレで店員さんが丁寧。時々行くお店。

simpledancer.hatenablog.com

1章は簡単に10分くらいで終わるかなあ〜なんて思ってたらgemfileのところでちょっと戸惑ったりサーバー接続が良くわかんなかったりでちょっと時間かかってしまいました。

railstutorial.jp

1章のgit,herokuのあたりは今割愛します。これはこれでややこしいので自分で整理するためにも別でまた書きます。

今日は2章〜のToyアプリに入っていきたいと思います。

第2章Toyアプリケーション

Railsアプリケーションの基本的な仕組みを体験するために、別のプロジェクトを作成します。 この章のおもちゃのアプリ (toyapp) では、scaffold (コラム 1.2) を使って短時間でコードを自動生成します。ただしscaffoldで自動生成したコードは非常に読みづらいので、2では自動生成コードの解説は行いません。その代わり、生成されたURI (いわゆるURLs)5 をWebブラウザで確かめるだけにします。

 では、実際にToyappをやっていきます!

 

まずはrails new

1章と同じように新たに rails new toy_appと ターミナルにうちこみ、toy_appフォルダを作成して初めて行きます。

コードは全てrailsチュートリアルにあるので省略します!

Ruby on Rails チュートリアル:実例を使って Rails を学ぼう

gemfileを書き直し、bundle installをしましたが、私はうまくいかなかったので

bundle updateをしてみました。

そうするとsuccessしました。

そのあと使ったことのないBitbucket 

なるものを使うことになるのですが。。なにこれgitとどう違うの?

Bitbucketとは 

私githubは使っていたのですがbitbucketなんて初耳だし!

で、ググってみましたところ

GitHubとBitbucketの比較:Webデザイナーの業務にはBitbucketが向いている | Internet | ウェビンブログ

BitbucketはGitHubと同じ、バージョン管理ツールのリポジトリを預かってくれるホスティングサービスです。

とのことだったので、じゃあgithubでよくないか?と思ったのです。なので私はbitbucketではなくgithubでリポジトリを作ろうと思います。(だって面倒くさいんだもん。。。)と思ったら最初にbitbucketで操作してしまったので

 

Warning: Permanently added 'bitbucket.org,104.192.143.1' (RSA) to the list of known hosts.
Permission denied (publickey).

なんて警告が出た。からおとなしくBitbucketを使ってみます。

1章もまとめてBitbucketでリポジトリ作ったほうがよさげなので1章のappとともにやってみたいと思います! 続く。

 

Wordpressのバージョンをアップデートが必須だった理由

f:id:simpledancer:20170126000720j:plain

 

Twitterで

「いますぐwordpressを更新してください!」と流れてきたました。

 

大至急】WordPressを至急最新版に。いまちょっと検索したら世界で何十万、何百万規模でやられています。

何のこっちゃ〜?と思ったら

WordPress の脆弱性対策について

最終更新日:2017年2月7日

※追記すべき情報がある場合には、その都度このページを更新する予定です。

概要

WordPress.org が提供する WordPress は、オープンソースのCMS(コンテンツマネジメントシステム)です。
WordPress には、REST API の処理に起因する脆弱性が存在します。

 

本脆弱性が悪用された場合、遠隔の第三者によって、サーバ上でコンテンツを改ざんされる可能性があります。

2日ほど遅れてアップデートしました!

私自身のサイトは特に問題なく!

なぜバージョンアップが必要だったのか

 

問題は前のバージョン4.7.0or 4.7.1に脆弱性があり

細工したリクエストをwordpressのサーバに送り投稿内容が改ざんされる可能性があるとのことでした。

 

私のサイトが急にアダルトサイトとかになってたら確かに嫌かも閲覧数増えそうだけど(w)

個人のサイトが攻撃されることは稀でしょうが企業のホームページなんかだと確かに大変な損害ですもんね!

 

以前の意識と変わったこと

私だけかもしれませんが、前までは

「バージョンアップをしてください」って表示が出ても

放置or理由見ずに更新をしてました。

それがちゃんと公式サイトまでしっかり読んで更新するようになりました。(成長)

そんな意識の変化があったなあ〜なんて自分に感心してみました。(普通の人は当たり前にやってることかもしれないけど!)

 

WordpressはIT音痴にはハードルが高めだけど・・・

tabibit.net

サイトの中に経歴を入れてみましたが

レイアウトが下手だし

思うようにいかない!!!!

IT音痴だけど、本当にちょとずつちょっとずつカスタマイズできた時の喜びは

代え難い。でもイライラするけど。子育てのような楽しさ?(産んだことないけど)

地道にちょこちょこ更新します。。

 

話が逸れましたが

更新まだの方は自分のサイトが変な投稿されないようにバージョンアップしましょう!

simpledancer.hatenablog.com

 

Rails チュートリアル始めました①

f:id:simpledancer:20170130013241j:plain

 

最近railsから離れていたので不安になり

初心者お勧めRailsチュートリアルをやってみようと思います。



railstutorial.jp

www.railstutorial.org

Ruby on RailsチュートリアルはWeb開発者やIT起業家を目指す方向けの優れた入門書として書かれており、Rubyの基礎、HTMLとCSS、データベース、バージョン管理、開発技法などWeb開発のすべてが網羅されています。 本チュートリアルは初心者のみならず、Web開発のベテランにとっても有用です。MVCやREST、ジェネレータ、マイグレーション、ルーティング、ERBなど、Railsフレームワークのコア技術を本チュートリアルでまとめて学ぶことができます。 初心者・ベテランを問わず、Ruby on Railsチュートリアルを最後まで終えることができれば、Rails周辺のさらに高度な内容の書籍、ブログ、スクリーンキャストなどを読み解く力を身に付けられます4 

 私はcloud9で開発をすることにしました。ローカル開発環境も一応整ってはいるのですが、cloud9の方が慣れたので、まずはcloud9からやってみます。

simpledancer.hatenablog.com

このrailsチュートリアルでは13章の中で3つのアプリが作れるようになっていて、まずは最初の第1章での1つ目のアプリについて勉強したことを書いていこうと思います。

まずはworkspaceを作る

cloud9で

workspace→app名→private or publicを選択→rails tutorialのアイコンを選択。

これでrailstutorialのワークスペースができました。

f:id:simpledancer:20170205124010p:plain

railsのフォルダを作成

$ rails _5.0.0.1_ new hello_app

 

とターミナルに入力をするとhello_appのフォルダが生成されました。

フォルダの中にはたくさんのファイルができました!

そのファイルの中のgemfileを開きます。

細かい指示はrailsチュートリアルの中に説明があります。

gemfileを置き換える

リスト 1.5:

のファイルにgemfileを置き換える。

そしてターミナルにbundle installコマンドを実行

私の場合はそこから進まなかったのでbundle updateコマンドも実行しました。

rails serverを立ち上げる

私の場合はcloud9なので

rails s -p $PORT -b $IP 

を実行します。(ローカル開発だとrails s)

チュートリアルだとshareを開く、だったのですが

私の場合ターミナルの中の表示 http://0.0.0.0:8080をクリックすると

f:id:simpledancer:20170205211324p:plain

と無事立ち上がりました。

何度かrailsの演習はしてるものの勝手が違うとこれだけの作業でかなり戸惑いました。

ちなみにサーバーを切断したい場合は

Ctr+cでサーバーが切断できます。

Hello Worldを表示する

1.Applicationコントローラに

 def hello
    render html: "hello, world!"
  end

を追加する。

2.config/routes.rbファイルにを打ち込む。

 root 'application#hello'

そしてまたサーバーを立ち上げる。

f:id:simpledancer:20170205215423p:plain

表示がでました!

 

チュートリアルサイトではこの後gitについて触れていますがgitについては別のブログで書いてみます。未だに慣れません。。

rails自体が久しぶりなのもありで結構hello worldまで時間がかかってしまいました(泣)

引き続きtutorialの実行のブログも同時進行していきたいと思います!

Poledanceのwebsiteをwordpressで構築してます!しかし、、レイアウトがごちゃごちゃしてしまってかなり見にくい。。。こちらのカスタマイズも頑張ります♪

tabibit.net

はてなブログで目次を表示をやってみた。

f:id:simpledancer:20170130013241j:plain

 

 

今日ブログを見てもらって色々アドバイスをいただいたのですが、その中で

「目次を作ったほうがいいです」と言っていただいたのでつけてみました!

 

staff.hatenablog.com

目次を自動生成する

f:id:simpledancer:20170130011426p:plain

この「見たまま」記法の状態で 目次のアイコンをポチッとすると

[:contents]と記述されます。

そのあとに目次にしたい内容が自動生成されますが

内容のタイトルを必ず大見出し・中見出し・小見出しで作らないと表示してくれません。

でも、思っていた以上に簡単にできちゃいました。

 

 目次と言う文字を表示する

 ただ「目次」という文字を表示するにはコードをつけたさなくてはいけないようです。

kotublog.hatenablog.com

こちらのブログを参考にさせていただきました!

.table-of-contents:before {
content: "目次";
font-size: 20px;
font-weight: bold;
}

というcssを書きます。

管理画面から

PCだとデザイン>カスタマイズ>デザインCSSの所に埋め込めば表示されます。

スマホ版だとスマホマークの方を選んで>記事>記事上

です。

f:id:simpledancer:20170130013623j:plain

表記してみると、やはり目次があるのと無いのと印象が違いました。ちょっとわかりやすいかも。確かに本にも必ず目次がありますし。

今後の課題

  • マークダウン記法でコードを書く
  • プロフィールをちゃんと書く(多少のストーリー性)
  • FBの連絡先追加→これに関してはちょっと保留です。Twitterでとりあえずフィードを埋め込んでるのでFBはたさないかもです。

カスタマイズもなかなかうまく思うようにいかなかったりで前途多難ですがゆるゆる進めていこうと思います。

 

今日はプログラミングのオンラインの勉強会で色々参考になりました!

時々こうやってダイレクトに意見を聞くのも大事ですね〜。カスタマイズに精を出しすぎてプログラミングが疎かになってるのでちょいちょい頑張ります♪

ちなみに背景色を変えてみましたが、見やすいのか見にくいのか自分でやっているとよくわからなくなってきました。。

久しぶりに数ヶ月前のブログを読んでみた。↓

私がプログラミングを始めた理由☆ - アスリート系ですがプログラミング始めました。