Ry0 Note

ガジェットレビューと技術メモ

初めての投稿

はじめまして。ここにはひとことを書いていきます。

GitHub + Octopressとかいう組み合わせで簡単にブログが書けるということなので作ってみました。
エディタとターミナルだけでポーンと投稿できるので一回環境を整えてしまえば、かなり便利??
しかも記事はMarkDown記法で書けるのがいい!
いろいろプラグインを入れたので、それのテストを兼ねて書いてみます。

画像のテスト

直接pushしたら…

GitHubに直接、画像をアップして表示するときのテスト

MBA

参考サイト: http://toshikaz55.github.io/blog/blog/2013/04/04/octopress-image-dir/

Flickrを使う

直接GitHubにばんばん画像をアップデートしたらGitHubを圧迫するので、Flickrを使ってみた
どうやらスマホじゃうまく拡大表示できてないっぽい(/_;)
[2015.8.15 更新] Flickrのプラグインは開発が止まっているっぽいのでやめました。

参考サイト: https://github.com/neilk/octopress-flickr

SNSの引用テスト

Twitter

Twitterの投稿も簡単に引用できる!


ジェシカさんかわいい(´艸`)

参考サイト:
https://github.com/shogo82148/ruby-oembed
http://shogo82148.github.io/blog/2012/08/09/oembed/

instagram

いろいろ試してみたけど、うまく表示できなかった
instagramもTwitterみたいに表示できたらいいなあ
↓これを試してみたんだけどうまく行かなかった…
参考サイト: https://github.com/longkey1/jekyll-instagram-plugin
(2014.12.19 1:59 追記)
結局、Embedに頼った。

Youtube

なんかレスポンシブじゃない気がする
最悪ふつうにHTMLで表記したらいいか

(2014.12.18 1:11 追記)
なんとかレスポンシブに対応できないかなと思ったら、発見。
プラグインを使わずにやる方法みたい

Adding Responsive YouTube Videos to Octopress Without Any Plugins.

参考サイトにあるように設定した後は

1
2
3
<div class="video-container">
  <iframe width="640" height="360" src="//www.youtube.com/embed/wq7ftOZBy0E?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

というようにYoutubeの共有タブにある埋め込みコードを貼り付けるだけで成功。すばらしい。
その結果が下のような結果

これでもできた
参考サイト: https://github.com/erossignon/jekyll-youtube-lazyloading

プログラム関連

マークダウンで書いてるので、cd Desktopとかlsとか書ける
ソースコードも

1
2
3
4
5
6
7
8
#include <iostream>
using namespace std;

int main(){
  for(int i = 0; i < 10; ++i){
      cout << "Octopressやるじゃん!!" << endl;
  }
}

どうやらファイル自体から持ってきてもいいっぽい

(test.cpp) download
1
2
3
4
5
6
7
8
#include <iostream>
using namespace std;

int main(){
  for(int i = 0; i < 10; ++i){
      cout << "Octopressやるじゃん!!" << endl;
  }
}

参考サイト: http://www.tokoro.me/2012/07/15/octopress-part-of-codes/

おわりに

とくにバリバリ、ブログやるぞっていう気持ちはないんだけど
とりあえずこういうことができるんだ〜って感じ。
何かメモを書いておく場所にできたらいいなと思います。