Tuesday,January 26,2016

ミラーレス一眼SonyNEX5Rの中古を手に入れた

NEX-5R_eye

某オークションで格安中古が出品されていました。液晶ヒビ割れありのジャンク品扱いでしたが、完動品とのことだったので、思わず落札してしまいました。



Sony NEX-5R


2012年発売のAPS-CサイズCMOSセンサーを搭載する、コンパクトミラーレス一眼です。
このモデルから無線LANを搭載して、同じLANネットワー内であればスマホなどに無線で画像転送できるようになりました。また、PlayMemories Camera Appsに対応して、スマホをリモコンにする機能やタイムラプス機能などを追加することが出来ます。


NEX-5R | デジタル一眼カメラα(アルファ) | ソニー


Youtubeなどでもレビューが多数あり人気が非常に高かった機種です。
液晶チルトが180度開くことで自撮りしやすいことも人気の理由だったようです。






初めての一眼カメラ


NEX-5R_g1 (1)
一般的な一眼レフカメラと同じAPS-Cサイズのセンサーを積んでいますが、さすがミラーレスコンパクトです。
NEX-5R_g1 (2)
レンズが大きく見えますね。


レンズは別で購入したのですが、初一眼でどう選んで良いのかわからなかったので、標準ズームレンズを中古で購入しました。


NEX-5R_len (1)
Sonyの標準Eマウントズームレンズです。
Eマウントレンズは所謂撒き餌レンズというのか、新品でも安価なレンズが多いですね。
私のような初心者には、選択しやすくて助かります。

NEX-5R_len (2)
18-55o F3.5-5.6標準ズームレンズです。
SonyのAPS-Cは、35o換算するには1.5倍しますので、27-82.5oのズームレンズ相当となります。


実際に撮影してみて分かりましたが、F値3.5でも室内では暗いですね。
以前から持っていたコンデジのほうが明るく撮れます。



NEX-5R_h1 (1)
液晶のひび割れです。光の加減で目立って見えていますが、実際には普段それほど目立ちません。角度をつけて光を当てないとわからないレベルです。
液晶保護フィルムの中でひび割れているので、手で触っても引っ掛りもありません。

NEX-5R_h1 (2)
液晶も正常に映ります。タッチ操作も問題なく出来ています。


気にされる人は気になるのでしょうが、このヒビ割れのおかげで中古相場の半値以下で購入できました。
完動品が超激安で購入できたのですから、良しとします。


NEX-5R_tilt (1)
液晶のチルト機能です。

NEX-5R_tilt (2)
下方向には45度チルトします。


NEX-5R_tilt (3)
上方向へのチルトは180度開きます。

NEX-5R_tilt (4)
上方向はアームが長くボディから液晶を離したり、角度の自由度がわりと高いです。

NEX-5R_tilt (5)
180度開いた状態です。
液晶を完全に正面に向けることが出来ます。

NEX-5R_tilt (6)
180度開くと液晶も映像の上下が反転して正面から見やすくなるのですが、反転するタイミングを任意で選ぶことが出来ません。
ほぼ垂直に近くならないと反転しないので、角度によっては使い難いかもしれません。



撮影してみた


DSC00010
5秒 F22 ISO25600
豆電球とTVの光だけの状態で撮影。


DSC00014
1/100秒 F3.5 ISO3200
近づきすぎて手前がボケてますね。


DSC00138
1/50秒 F3.5 ISO800
窓際の自然光で撮影。


DSC00147
1/50秒 F3.5 ISO6400
手ブレしてしまうので、シャッタースピード1/50秒に固定するとISO感度が上がってしまう・・・


DSC00148
1/50秒 F3.5 ISO6400
もっと解像感がほしい。ISO100で長時間露光したほうが解像感出るのだろうか?
それともレンズの問題?



まとめ


ジャンク扱いの格安スタート品とは言え、ほんの数年前の人気機種だったので、どうせ更新されるだろうと思って入札していたのですが、結局更新されることもなく、思いがけず落札してしまいました。


どうしても欲しくてというわけではなかったのですが、いざ手にしてしまうと一眼カメラの奥深い世界に引き寄せられてしまいます。
カメラ沼に嵌まりそうで怖いです。


液晶のヒビ割れ以外は、まったく問題ない完動品でしたので、一眼特有のボケ感のある画像や、動画撮影にも興味を持ち始め楽しんでいます。
三脚と単焦点のレンズが欲しくなってきました。









posted by taks at 13:48 | Comment(0) | TrackBack(0) | PC
Tuesday,January 19,2016

Youtube動画をレスポンシブで埋め込むcss設定方法

YouTube_umekomi_eye

Youtubeの動画をブログに埋め込むとき、今まではサイズを固定する方法でした。
画面の大きさに合わせて、動画のサイズも自動で変更するようにCSSを追加しました。


Youtube動画の埋め込み

Youtubeの動画を埋め込む時は、通常埋め込みたい動画の画面から共有用のコードを取得します。

YouTube_umekomicode
このまま貼り付けても動画再生可能ですが、貼り付けサイズが固定されていますので、スマホやブラウザのサイズによっては、レイアウトがはみ出てしまいます。

スマホなどさまざまな画面サイズに合わせて、自動でリサイズしてくれるCSSを設定しました。


CSSコードを追加する

Seesaaブログの管理画面から、[デザイン]→[デザイン設定]→[自分の使っているCSS名]をクリックして編集画面を開きます。

次のコードを追加します。クラス名は、自分で分かりやすいものに変更して使ってください。

/* 動画埋め込み */
.movie-wrap {
  width: 500px;
  max-width: 100%;
}

.movie-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.movie-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

[.movie-wrap]で全体の最大幅を指定しています。最大幅を指定せず、完全可変させたい場合は、削除してください。


記事中の埋め込みコード記述法

記事中に埋め込むコードは、divタグにクラス指定をして使います。

<div class="movie-wrap">
  <div class="movie-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/FlKVzLe-vys" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

このコードで埋め込んだ動画がこちら ↓

PCブラウザでもスマホで見てもリサイズされて綺麗に見れます。

まとめ

え〜設定しては見ましたが、よく考えたら自分のサイトを、まだレスポンシブ化してないので、あまり意味はなかったような気がします^^;

HTMLやCSSの勉強をして、少しずつデザイン変更やテクニック的なことも覚えているので、レスポンシブ化も将来的には実践していきたいですね。

posted by taks at 12:38 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Tuesday,January 12,2016

ソースコードを分かりやすく表示するSyntaxHighlighter

SyntaxHighlighter_eye

ときどき見かける、ソースコードを見た目もカッコよく、色分けされていて読みやすい表示。
なんとかSeesaaブログにも導入できないか試してみました。

SyntaxHighlighter

Preタグのクラス要素を使って、HTMLやCSS、Javascriptその他の言語を見やすく表示したり、コピーなど再利用をしやすくしてくれるJavascriptライブラリです。

SyntaxHighlighter

自分で編集もできますが、スクリプトファイルとCSSファイルをアップロードして、HTMLに読み込ませるだけで使えるようになります。

SyntaxHighlighterをダウンロード

2011年から更新は止まっていますが、今でも十分使えます。

SyntaxHighlighter - Download

「Click here to download」のリンクをクリックして、zipファイルをダウンロードします。

Seesaaへアップロード

ダウンロードしたSyntaxHighlighterのzipファイルを展開して、必要なファイルをSeesaaブログのファイルマネージャを使ってアップロードします。

zipファイルを展開すると、このような構成になっています。

SyntaxHighlighter_folder
実際に使うのは、[script]フォルダと[styles]フォルダの2つだけです。
[script]フォルダにjavascriptファイル、[styles]フォルダにcssファイルが入っています。

Scriptsフォルダには各言語に対応したJavascriptファイルが収められています。
この中から自分が使用したい言語を選択して、Seesaaブログのサーバへアップロードします。

Syntax_script3
CSS、Javascript、HTMLの3ファイルを選んでアップロードしました。
コアファイルはどの言語使う時でも必要となるファイルです。必ずアップロードします。

stylesフォルダには、実際に表示されるスタイルテーマがCSSで収められています。
テーマの適用方法は、2つの方法あります。

Syntax_styles(1)
1つ目は、コアファイルと呼ばれる表示デザインを指定しているファイルと、カラーなどの装飾部分を担当しているテーマファイルの2つをセットで使う方法です。
色指定などを自分で変更したい場合は、こちらのほうが分かりやすいかもしれません。

Syntax_styles(2)
2つ目は、コアとテーマが一緒になっているファイルです。
1つのファイルだけで使用可能ですので、読み込みが1つで済みます。
[shCoreDefault.css]を選びました。

Seesaaブログのファイルマネージャからアップロードします。

Syntax_upload
わかりやすくするために、アップロードオプションから新たに「syntax」というディレクトリを追加してアップロードしました。

SyntaxHighlighterの読み込み

アップロードしたファイルをSeesaaブログのHTMLを編集して読み込みます。

Seesaaブログの[デザイン]→[HTML]から使用しているHTMLを開き、<head>タグ内に下記のように読み込みタグを記載します。

<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shCore.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushJScript.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushCss.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://weblog10.up.seesaa.net/syntax/shCoreDefault.css">
<script type="text/javascript" >SyntaxHighlighter.all();</script>

アップロードした各ファイルのURLは、ファイルマネージャーから取得できます。
自サイトのものに置き換えてください。

Syntax_seesaa_url1
ファイルマネージャーの各ファイル名をクリックすると、ファイル編集画面が開きます。
ファイルのURLが記載されていますので、コピー貼付けして使うと確実です。

SyntaxHighlighterの使用法

SyntaxHighlighterは、<pre>タグのクラス要素で、各ソースを指定します。
今回アップロードしたHTML、CSS、Javascriptは、下記のように記述します。

<pre class="brush:html"> ホニャララ </pre>  HTMLソースを表示する
<pre class="brush:css"> ホニャララ </pre>   CSSソースを表示する
<pre class="brush:js"> ホニャララ </pre>    JavaScriptソースを表示する

そしてとても重要な事があります。

Syntax_kaigyou
Seesaaブログの記事投稿時は、「改行HTMLタグ変換」の項目を改行を<br/>タグに変換しないにチェックを入れてください。

大事なのでもう一度言います。改行を<br/>タグに変換しないでください。

改行されなくなります。

オプションの指定

便利なオプションも用意されています。

・指定した行をハイライト表示する

<pre class="brush:html highlight:[2,4]"> ホニャララ </pre>
ソースの変更や挿入などの説明をする時に役立ちます。
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shCore.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushJScript.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushCss.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://weblog10.up.seesaa.net/syntax/shCoreDefault.css">
<script type="text/javascript" >SyntaxHighlighter.all();</script>


・開始行番号の指定

<pre class="brush:html first-line:125"> ホニャララ </pre>
行数がわかっているような場合、行番号を合わせて表示することが出来ます。
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shCore.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushJScript.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushCss.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://weblog10.up.seesaa.net/syntax/shCoreDefault.css">
<script type="text/javascript" >SyntaxHighlighter.all();</script>


・オートリンク解除

<pre class="brush:html auto-links:false"> ホニャララ </pre>
ソース中にURLがある場合、自動的にリンクが貼られます。リンクを解除するオプションです。
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shCore.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushJScript.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushCss.js"></script>
<script type="text/javascript" src="http://weblog10.up.seesaa.net/syntax/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://weblog10.up.seesaa.net/syntax/shCoreDefault.css">
<script type="text/javascript" >SyntaxHighlighter.all();</script>


・タイトルを表示する

<pre class="brush:html" title="タイトル"> ホニャララ </pre>
表示するソースにタイトルを表示します。
 ホニャララ 

まとめ

デフォルトテーマのCSSを入れただけですが、見た目が一気に変わりました。
数種類のテーマファイルが入っていますので、自分の環境に合わせて選ぶことが出来ます。

デザインを自分でいじることも出来ますので、自作のデザインにすることも可能です。

Javascriptライブラリは、便利ですね。上手く使えば一気に自分のサイトが便利になりますね。

posted by taks at 12:23 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
Tuesday,January 05,2016

増量期2ヶ月経過

WGain2015_2mon_eye

2ヶ月目経過しました。僅かに増量し始めたかなと言った感じです。
以前は太ったら減量といった感じだったので気付きませんでしたが、いざ意識して増量しようとすると、なかなか太りません。
今更ながら、自分は太りにくい体質だったのかと、実感しています。



やっと増え始めた?


最初の1ヶ月目は、まったく増量できていませんでした。


増量期1ヶ月経過

1週間で0.5kg増量の予定でしたが、ほぼ増量できていませんでした。


筋トレの成果か、以前に比べて筋肉量が増えているため、代謝が上がり太りにくくなっているのでしょう。
本来であれば喜ぶべきことなんですが、増量するにはネックになっています。


WGain2015_2mon_W (2)
2ヶ月目の12月は、トータルで約3kg増量しました。


非常にスローペースですね。
当初の目標では、5kgほど増量してないと行けないはずなんですが、思い通りに増えていきません。


WGain2015_2mon_F (1)
増量開始の11月から見ても、3.3kg増です。


当初タンパク質と炭水化物の量を増やして増量する予定でしたが、あまりにも増えないので12月入ってから、脂質が増えるのも覚悟で、食べ物の摂取量を増やしていました。



WGain2015_2mon_W (1)
その結果、体脂肪率が増えていっています。
20%を超えてきました。


WGain2015_2mon_F (2)
これを見ていると脂肪だけで太っているように見えるのは、考えすぎでしょうか?


減量していた時にも感じましたが、家の体組成計は体脂肪率を多めに表示しているような気がします。
目安程度に見ておけばよいのはわかっているつもりですが、さすがに気になりますね。



まとめ


過去最大に太ったときで、80kgでした。
特に運動もしていなかった時なので、単純に不摂生の賜物でした。


80kg超えた時に一念発起してダイエットを始めました。その時は、4ヶ月で20kg減の60kgまで落としました。
どうやら基本的には太り難い体質にもかかわらず、不摂生すぎて脂肪太りしていただけのようです。


最近は有酸素は全くしていませんが、筋トレである程度筋肉量が増えて代謝が上がってくると、太りにくくなるようです。


増量には不向きな体質ですね。プロテイン使わずにやって来ましたが、使いたくなってきました。













posted by taks at 12:37 | Comment(0) | TrackBack(0) | Exercise