2017/08/30

リンクカードを改良してみた

はてなブログでよく見るタイトルやらサムネイルやらが一緒になったリンクのことをブログカードと呼ぶらしい. 我がブログでもそれっぽいものを作ってみたいなあ,と思って調べたのだが,あれははてなが提供しているサービスらしく,そのままBloggerでは使えない.外部から利用する方法...

これを作ってからというものの,密かに気になっていたのが画像のアスペクト比.元の画像の上下がややカットされ,少し横長になった印象を受ける.

このカードを作ろうと思ったきっかけははてなブログで見かけたカードなのだが,そちらの画像で横長の印象を受けたことはない.

調べたところ,OGPという観点から言えばBloggerが提供するやや横長の画像が標準.はてなのカードははてなのオリジナルアスペクト比になっているようだ.

このカードの配置ははてなブログのそれを参考にしたのだが,どうも横長の画像との相性が悪いように感じる.

↑の記事でも書いたとおり,画像を直リンクしている都合上他所様のブログにリンクを貼るときには使えない(と思う)ので,自サイトの横長の画像が返ってくることを前提に,吐き出すHTMLコードを書き換えてみた.

はてなブログでよく見るタイトルやらサムネイルやらが一緒になったリンクのことをブログカードと呼ぶらしい. 我がブログでもそれっぽいものを作ってみたいなあ,と思って調べたのだが,あれははてなが提供しているサービスらしく,そのままBloggerでは使えない.外部から利用する方法...

それがこれ.

無駄なスペースも減り,HTMLもシンプルに.一石二鳥.

【CSS】

/*ブログカードver2*/
.Rblogcard2 {
border: 1px solid gray;
display:inline-block;
max-width: 400px;
padding: 5px;
margin-bottom: 10px;
box-shadow:1px 1px 6px 3px #c9c9c9;
-moz-box-shadow:1px 1px 6px 3px #c9c9c9;
-webkit-box-shadow:1px 1px 6px 3px #c9c9c9;
}
.Rblogcard_title2{
font-weight: bold;
}
.Rblogcard_des2{
font-size:70%;
}
.Rblogcard_img2{
max-width:400px;
min-width:200px;
}
.Rblogcard_url2 {
font-size:90%;
}
/*ブログカードver2*/

【javascript】

javascript:(
function(){  
  var metas = document.getElementsByTagName("meta");  
  function searchTitle(ms){
      for(i=0; i<ms.length; i++){
          if(ms[i].getAttribute("property")=="og:title"){
              return ms[i].getAttribute("content");
          }
      }
      return "";
  }
  function searchURL(ms){
      for(i=0; i<ms.length; i++){
          if(ms[i].getAttribute("property")=="og:url"){
              return ms[i].getAttribute("content");
          }
      }
      return "";
  }
  function searchDescription(ms){
      for(i=0; i<ms.length; i++){
          if(ms[i].getAttribute("property")=="og:description"){
              return ms[i].getAttribute("content");
          }
      }
      return "";
  }
  function searchImgURL(ms){
      for(i=0; i<ms.length; i++){
          if(ms[i].getAttribute("property")=="og:image"){
              return ms[i].getAttribute("content");
          }
      }
      return "";
  }
  var title = searchTitle(metas);
  var URL = searchURL(metas);  
  var des = searchDescription(metas);
  var img = searchImgURL(metas);
  var s = '<div><div class="Rblogcard2"><div><img class="Rblogcard_img2" src="' + img +'"></div><div><span class="Rblogcard_title2"><a href="' + URL +'" target="_blank">' + title +'</a></span></div><div><span class="Rblogcard_des2">' + des + '</span></div><div><a class="Rblogcard_url2" href="' + URL + '" target="_blank">' + URL + '</a></div></div></div>';
  if(img==''){
    var s = '<div><div class="Rblogcard2"><div><span class="Rblogcard_title2"><a href="' + URL +'" target="_blank">' + title +'</a></span></div><div><span class="Rblogcard_des2">' + des + '</span></div><div><a class="Rblogcard_url2" href="' + URL + '" target="_blank">' + URL + '</a></div></div></div>';
  }
  var d = window.open().document;
  d.writeln('<textarea rows=15 cols=80>'+s+'</textarea>');
  d.close();
})();

画像を右にしてーみたいな細かいあれこれがなくなったのでHTMLは大幅にシンプルになった.あの処理苦手,というより未だに理屈がよくわかっていないところもあるのでシンプルにできてよかった.

苦手だったCSSはようやく色々わかってきたけど,HTML5は全然わからないから体系的に勉強してみたいなあと思いつつ,さすがにそこまでの時間がない.

2017/08/27

よく言われるα7IIに対する不満の実際のところ【バッテリー減るの早すぎ問題編】

衝撃のフルサイズミラーレスα7の正統進化後継機として比較的高い評価を得ているα7IIだが,当然完全無欠というわけではなく,不満点としてよく挙げられるポイントもちらほらある.

一方で,そうした不満は非常に主観的なものも多いし,それまでのカメラ経験がその感覚に影響することは多い.

なので,α6000でカメラ沼に入り,そして勢いでα7IIへと移行したという経験をもつ身として,よく言われる不満点に対する感想をつらつらと述べたいと思う.

α7IIのバッテリー減るの早すぎ問題

今回は多分最も多くの人に触れられているであろうα7IIのバッテリーが減るの早すぎ!という件について考える.

α7IIについて色々調べている中でこの点に関する不満を表明する様々なブログの記事を見ながら,実は私はこう思っていた.

レフから移行した奴がそのノリで電源つけっぱにしてるだけだろ,バカめ.

従って,ミラーレス機α6000から移行する私はその問題は大して気にならないだろうと.何故なら電源をこまめに消す癖がついているから.本気でこう思っていた.

使ってみた結果

α7IIのバッテリー減るの早すぎ.

正直びっくりしたね.マジで減るのが早い.

α7IIデビュー戦となった西新井大師の風鈴祭りだが,1時間程度彷徨きながら撮影し,バッテリー消費量はおよそ20%

手元にα6000が無いので確認しようが無いが,旅行でぶらつきながら1日使ってもせいぜい50%を切るか切らないか,くらいの消費量だったと思う.

α6000でさえバッテリー減るの早すぎ!とボヤくヘビーユーザーが結構いるわけで,そういう意味では私の使い方は割とライトなほうだと思う.

そんな私でさえα7IIはこの減り方.正直,旅行に持ち出すことを考えるとちょっと不安になる減り方だった.

ほならね,交換用バッテリー買えって話でしょ.

んじゃ,予備のバッテリー買うか,という話になるのだが……

お値段およそ7,000円.

高い!

ちなみにこれはバッテリー単体で,本体無しでバッテリーを充電できるチャージャー付きだと10,000円近くなる.

度重なるカメラの購入で金銭感覚は既にぶっ壊れているが,それでも電池にこのお値段はちょっと……と言わざるをえない.

そこでよく言われるのが,そんな時に役立つのは互換バッテリー!

……なんだけど,何となく不安になってしまったり.

結構たくさん売れていて,レビューも多くて好評もかなり多い.だからある程度信用はできると思うのだが,個人的にはどうしても不安.

万が一,万が一のことがあると十云万の本体がパーになる可能性を考えると,どうしても互換バッテリーに手を出せないのだ.

純正は高いと文句を垂れ,互換は安くて不安だと言い,我ながら面倒くさいやつだ(笑)

とりあえずみんな大好きポータブルバッテリー

というわけで,結論としてはありふれたバッテリー論争の果てということで,とりあえずポータブルバッテリー使う!

手元には3年ほど前に購入し,これまで幾度となく訪れた(スマホのバッテリー的に)窮地を乗り越えてきたAnkerのポータブルバッテリーを使うことにした.

私の持ってるE4の後継機っぽいのはコレ.

Ankerに限らずポータブルバッテリーは種類がありすぎてどれを選べばいいのかわからないので,機会があれば調べてみたいなあ,と.

まとめ

後半はあまりのバッテリー消費の速さを受けての対処法についてだったが,記事の本題としてはα7IIのバッテリーの減り方の実感報告.

1時間ほど使ってみた感じ,噂に聞く以上にバッテリーの減り方は激しいな,というのが実感.

ただ,西新井大師での1時間は旅行のときとは違って写真に撮ることに完全に集中した1時間だった.

旅行のときは移動時間も結構あるわけで,今回のような激しい減り方はしないかもしれない.

その辺は実際に旅に出てみないとわからないので,今後要検証,といったところ.その時はとりあえずピンチヒッターとしてポータブルバッテリーを持っていけばいいかな,と思っている.

2017/08/24

リンクの見栄えを良くすべくブログカードリンク的なものを作ってみた

はてなブログでよく見るタイトルやらサムネイルやらが一緒になったリンクのことをブログカードと呼ぶらしい.

我がブログでもそれっぽいものを作ってみたいなあ,と思って調べたのだが,あれははてなが提供しているサービスらしく,そのままBloggerでは使えない.外部から利用する方法も無いわけではないが,やや裏技的になるので仕様変更等で使えなくなる可能性があるとのこと.

どうにかならんものか,と調べてみるとブックマークレットを使えばオリジナルのブログカードリンクを作成することができるようなので,作ってみることにした.

出来上がったのはこんな感じ.

今回の旅行は“反省会”的に書きたいことが少しだけあるので,最後に別記事にまとめてみることにした. 旅の費用 今まで費用を公開したことはないが,今回はLCCセールを使って貧乏旅しようというのが主旨のひとつでもあるので,ここで費用を整理して発表してみる. 総額は...

サムネイルが無い場合には↓みたいな感じになるようにした.

リンク先のOGPを読み込むようにしているので,OGPの設定がないサイトでは当然うまくいかない.他のmetaタグやらtitleタグを読めばどうにかならんこともないような気がするが,それは今後の課題ということで.

ちなみに本家のブログカードリンクはiframeを使っているのだが,iframeの使い方は知らないのでdivタグを使いまくっていい感じの配置にするHTMLを吐き出すようにした.

こんなもの使いたい人がいるとは到底思えないが,HTMLやCSSに詳しい人に突っ込んでもらう余地を残すためにソースを書いておくことにする.

まずはCSS.これをブログのCSSに書き加える.

/*ブログカード*/
.Rblogcard {
  border: 1px solid gray;
  display:inline-block;
  padding: 5px;
  margin: 10px;
  box-shadow:1px 1px 6px 3px #c9c9c9;
  -moz-box-shadow:1px 1px 6px 3px #c9c9c9;
  -webkit-box-shadow:1px 1px 6px 3px #c9c9c9;
}
.lhs {
  float:left;
  max-width:300px;
}
.rhs {
  float:right;
  padding-top: 10px;
}
.down_url{
  clear:both;
}

.Rblogcard_title{
  font-weight: bold;
}

.Rblogcard_des{
  font-size:70%;
}

.Rblogcard_img{
  max-width:250px;
  min-width:200px;
}
/*ブログカード*/

そして↓がjavascript.これをブックマークレットとして使う.Chromeの場合はブックマークバー上で右クリック→ページを追加→URLのところに↓のコードをコピペすると使える.

javascript:(
function(){  
  var metas = document.getElementsByTagName("meta");  
  function searchTitle(ms){
      for(i=0; i<ms.length; i++){
          if(ms[i].getAttribute("property")=="og:title"){
              return ms[i].getAttribute("content");
          }
      }
      return "";
  }
  function searchURL(ms){
      for(i=0; i<ms.length; i++){
          if(ms[i].getAttribute("property")=="og:url"){
              return ms[i].getAttribute("content");
          }
      }
      return "";
  }
  function searchDescription(ms){
      for(i=0; i<ms.length; i++){
          if(ms[i].getAttribute("property")=="og:description"){
              return ms[i].getAttribute("content");
          }
      }
      return "";
  }
  function searchImgURL(ms){
      for(i=0; i<ms.length; i++){
          if(ms[i].getAttribute("property")=="og:image"){
              return ms[i].getAttribute("content");
          }
      }
      return "";
  }
  var title = searchTitle(metas);
  var URL = searchURL(metas);  
  var des = searchDescription(metas);
  var img = searchImgURL(metas);
  var s = '<div><div class="Rblogcard"><div class="lhs"><div><span class="Rblogcard_title"><a href="'+URL+'" target="_blank">'+title+'</a></span></div><div><span class="Rblogcard_des">'+des+'</span></div></div><div class="rhs"><img class="Rblogcard_img" src="'+img+'"></div><div class="down_url"><a class="Rblogcard_url" href="'+URL+'" target="_blank">'+URL+'</a></div></div></div>';
  if(img==''){
      var s = '<div><div class="Rblogcard"><div class="lhs"><div><span class="Rblogcard_title"><a href="'+URL+'" target="_blank">'+title+'</a></span></div><div><span class="Rblogcard_des">'+des+'</span></div></div><div class="rhs"></div><div class="down_url"><a class="Rblogcard_url" href="'+URL+'" target="_blank">'+URL+'</a></div></div></div>';
  }
  var d = window.open().document;
  d.writeln('<textarea rows=15 cols=80>'+s+'</textarea>');
  d.close();
})();

以上.作る上で参考にさせて頂いたのは,絶版あかみる:javaScriptでmeta内のproperty属性から画像を取得する方法

ちなみにこれ,画像はOGP設定されているURLから引っ張っている(直リンク)だけで当然キャッシュとかはしてないので,他所様のブログ相手に使うのは微妙かも…?OGPのサムネイル画像を直リンクして良いのかとか,その辺のお作法も調べる必要があるなあ,と.

しかし,久しぶりのjavascriptだったので大変だった.やっぱりPythonがNo.1!

2017/08/19

夏の風物詩 “風鈴” (α7IIデビュー戦)

【2017/07/18】

α7IIを購入し数日.そろそろ使ってみたくて仕方がなくてウズウズしてきたのだが,さて何を撮りに行くか.

既に夏も本番,外はどこも暑くて最寄り駅に行くだけで汗が吹き出す.

そんなわけで外に出るのは避けたいのだが,しかし外に出なければ撮るものがない.

いろいろ考えて,せめて涼を感じられる何かはないか!ということで選んだのは風鈴

調べてみると西新井大師で風鈴祭をやっているということで,カメラをぶら下げて出かけてみることにした.

遠いな,西新井(笑)

横浜で生活が完結している人間としては品川でギリギリ,東京以北は遠い.

恒例の寝坊をかまして北千住で昼食(これまた恒例のサイゼ)とし,乗り慣れない東武で大師前へ.

そうそう,この大師前駅だが,本線系統のスカイツリーライン・西新井駅から伸びる大師線の終点.
大師線は西新井と大師前のわずか1駅間を結ぶ路線ということもあり,ここ大師前駅には改札がない.
西新井駅の大師線専用ホームへの入り口に改札機があり,そこで運賃が引かれるという合理的な運用.それによって大師前駅を無人駅として運用することができているようだ.

肝心の西新井大師はというと,大師前駅から歩いてすぐ.

境内に入ると,遠くからチリンチリン……という風鈴の音が聞こえる.

西新井大師・風鈴祭り

境内の一角に大量の風鈴が展示され,購入することも可能.

だいたいの写真は露出補正をかけただけで色味は弄っていない.F値は1.8(開放)がほとんどで,一部少し絞ったものもあるがせいぜい2.8か4.0くらいである.

考えてみればF値2.8未満の世界は初体験で,思った以上にピントがシビア.

しかも風鈴というのはガラスでできていて透明なものが多く,その上曲線から成り立っているのでピント合わせが難しいったらありゃしない.

帰宅して確認してみると微妙にピントが甘い写真が多くて萎える.

風鈴祭り開始からしばらく時間が経っていて,ちらほら完売している風鈴も.

どこにでも出現するクマ.本当全く関係のない観光地でもグッズが売られてたりするのでよく見かける.

あまり使わない縦構図.α6000より大きいからか,縦位置でもそれほど持ちにくいわけではないので今後は縦構図も意識してみたい.

風が吹くと風鈴が揺れて,一斉にチリリン…と鳴り出す.さすがにこれだけの数が一度に鳴ると少しうるさくも感じる(笑)

インバウンドを意識してか英語の購入案内もあった.まだ外国人への認知度は低いのか外国人観光客は見かけなかったが,今後名所のひとつになっていくかもしれない.

この日の一二を争うくらい好きなショット.一方でもう少し高くから撮って風鈴本体が写り込むようにすればよかったなあ,という後悔も少し.

これだけ種類があるので変わり種もいくつか.ピントが甘い,というか籠の中の風鈴本体にピントが合ってる模様.外側の籠に合わせればよかったなあ.

さっき“一二を争う”とか言っておいて何だ,という感じだが個人的にこの日のベストショットはこれかな.前ボケ,後ボケも綺麗で主題の風鈴に描かれる花火も綺麗.

賑やかな感じがするこの写真もお気に入り.今まで後ボケばかり多用してきたが,こういう前ボケもおもしろい.


結局,テントいくつか分の風鈴を見て回るのに1時間近くかけて退散.

この日は都心で雹が降るなど大荒れ,横浜でも大雨が降ったが,雲は帰宅中に通り過ぎてくれたらしく,珍しく間が良い行動だった.

機材は間違いなくアップグレードしたので,今後は写真の腕を磨かねばならんなあ.

2017/08/15

α7ii 購入を決めた思考プロセスと実際の購入

PSVR売却で発生した余剰資金とSONYのキャッシュバックキャンペーンに触発されてα7ii購入を決意した私.

実際の購入に至るまでに色々と策を弄したので,その記録.

レンズキットか?本体+単焦点か?

まず考えるのは,レンズキットを買うか,本体とレンズを別々に買うか.

レンズキットなら,まあ特に深く考える必要はない.特に問題なく使えるだろう.

ただ気になるのが,キットレンズFE 28-70mm F3.5-5.6 OSSの評判の悪さ.

Amazonではそれほどではないが,価格コムでの酷評はさすがに購入をためらうレベル.

だいたい,はじめてカメラに手を出すような人は比較の対象がスマホであったりコンデジであったりするので,多少周辺の解像が甘かろうが,多少暗かろうが「すごく綺麗に写ります!」と言う.

一方でカメラマニアは目が肥えているのでやれ解像が甘いだの暗いだのデカイだの,まあまあ中々の辛口コメントをする.

だからキットレンズはダメだと言いたいわけではない.むしろ,キットレンズとはそういうものである.

初心者には感動を与え,玄人には物足りない.それがキットレンズが埋めるべきポジションだから,そういう意味ではむしろこのレンズは素晴らしい働きをしていると言える.

すると問題になるのは,私は初心者なのかカメラマニアなのかということになる.

マニアか,と言われるとそうでもない.彼らのように等倍にして粗を探してみたり,ピクセル単位であーだこーだ言う趣味はない.

一方でキットレンズをつけて「すごーい!綺麗に写すのが得意なレンズなんだね!」とはしゃぐフェーズはもう過ぎた.

だいたいキチガイじみたカチカチの解像を見せつけたSIGMAのレンズのせいでな.

α6000と共に愛用していたSIGMA 30mm F2.8 DN.こいつのせいで並の解像では満足できない身体になってしまった.許さんぞSIGMA.

こいつのせいでもうキットレンズで我慢できなくなる未来は目に見えている.ならば買うしか無い,単焦点を.

んで,単焦点を漁る.結果,良さげなのはこれ.

FE 50mm F1.8

FEレンズ唯一の撒き餌レンズ.これしかない.

予算的にそれしか買えないだけだろ!というご指摘はごもっとも.確かに他のレンズは高い(血涙).

一方でちゃんとした理由もある.それはまたしてもSIGMA 30mm F2.8 DN.こいつだ.

実はこれを購入してから,キットレンズのSELP1650はほとんど使用せずSIGMA 30mmだけでウロウロすることばかりだった.

従って,この画角なら問題なく運用できることはわかっている.そしてAPS-Cにおける30mmレンズはフルサイズ換算で45mm.

5mmの差はあるが,当面は50mmの単焦点レンズだけでも困ることはない.それは確信できる.

どうしても広角や望遠が欲しくなったらどうするんだ?いや,その通りなのだが……

RX100.こいつがいれば問題ない.

圧倒的にRX100の使用率が高かった函館旅行でこの子のポテンシャルの高さは十分すぎるほどわかった.

α7ii with FE 50mm F2.8 + RX100.当面の構成はこれで問題ない.いけるぞ.

キャッシュアウトを避けながら

さて,構成を考えたところで実際の購入に移る.金額が大きい買い物になるので(キャッシュバックで戻ってくる分もあるが)できる限り瞬間的な現金の減少を減らすべく策を弄してみる

まずα7ii本体だが,これは以前紹介したとおりマップカメラの箱スレをYahooショッピングで購入.

楽天が嫌いなのでYahooにしたが,よく考えたらソフトバンクも嫌いだった.もう何も買えないじゃん……

そしてFE 50mm F1.8はAmazonで.以前Amazonカードを作った時にもらったと思われるポイントを使って出費を減らした.

最後にアクセサリ.α6000購入時にある程度のモノは揃えているので,今回必要になるのは液晶保護フィルムレンズのプロテクタ

液晶保護フィルムはこれを.純正はちょっと高いからね.

レンズのプロテクタはこれを.ちょっとお高いが,せっかく防塵防滴に配慮した設計なので,大雨の中で使うつもりはないが少し水滴がついても問題ないように撥水コーティングのものを選んでみた.

フィルムとプロテクタはヨドバシの実店舗で購入.その理由はVIEWカードのポイントでチャージしたSuicaで購入するため.

こんな感じで色々と手を回しながらα7iiとレンズ一式がいよいよおうちにやってきた.

次回,α7iiをぶら下げてのお出かけ編へ続く.