スクリーンショットをブログに載せるまでのフロー

今回は実際にスクリーンショットを様々な端末で撮るところから,ブログに貼り付けるまでのフローを書いていく.

スクリーンショットを撮る

WindowsはScreenPresso Proで撮る

www.screenpresso.com 保存先はGoogleドライブに設定する.

MacはMonoSnapで撮る

monosnap.com 保存先はGoogleドライブに設定する.

iOSは通常のスクリーンショットで撮る

support.apple.com

Screenpresso

Screenpresso

  • Learnpulse SAS
  • ユーティリティ
  • 無料
itunes.apple.com 通常のスクリーンショットで撮り,iOS版ScreenPressoを使ってPC版ScreenPressoProに転送する.

https://www.screenpresso.com/how-to-use-screenpresso-on-ios/www.screenpresso.com 転送方法は公式マニュアルを参考.

ScreenPresso Proで加工

ScreenPressoのワークスペースの場所をGoogleドライブにすることで,いろいろな端末で撮ったスクリーンショットを集約することができる.

集約したらあとは加工するだけだ.
注釈やモザイク,トリミング等を行い準備は完了となる.

レンタルサーバにFTP転送

転送したいFTPサーバを設定しておくと,「キャプチャ」ボタンからFTP転送することができる.

FTPの設定項目は「保存先フォルダ」「ホスト」「ログイン名」「パスワード」だけだ.
レンタルサーバを借りている人には簡単だろう.

このように指定した保存先に転送されていることを確認できる.

ZENPHOTOでアクセスしリンクを取得

www.zenphoto.org 直接サーバにアクセスして画像のURLを取得してもいいのだが,多くなってくるとわからなくなってくるため管理用のCMSを導入した.
選考基準は「導入が複雑でないこと」「現在も開発が続いていること」とし、探した結果「ZENPHOTO」を使うことにした.
ZENPHOTOは2005年から開発されておりメディア向けのCMSなようだ.

導入方法は以下を参考にしてほしい. zenlogic.jp

アクセスするとアップロードした画像が並んでいる.
あとは画像の直リンクを取得するだけである.

リンクの取得には「Quote Image As Text」というChrome拡張機能を利用している.

chrome.google.com

ブログはMarkdown形式で書いているのだが,この拡張機能を使うと簡単にMarkdown形式の画像リンクを取得することができる.

ブログに貼り付け

あとは取得したリンクを貼り付けるだけだ.

するとこのように画像が表示される.

まとめ

このフローでスクリーンショットを扱うと、どんなブログサービスでも利用することができる.
自分の場合WordPressとはてなブログを利用しているため、画像が集約されているのは大変便利であると感じられた.
そしてこのフローの最大のメリットはURLの張り替えなしに,画像を更新することができる点である.
この点については次回まとめていこうと思う.

はじめてのMarkdown―軽量マークアップ言語の記法と使い方 (I・O BOOKS)

はじめてのMarkdown―軽量マークアップ言語の記法と使い方 (I・O BOOKS)

ブログ用スクリーンショット置き場を考える

現状と課題

ScreenPresso Proを使ってスクリーンショットを撮り、直接ブログにアップロードしている。

www.screenpresso.com

現在の利用方法の課題として以下の2点が挙げられる.

後から編集すると画像を張り直さないといけないため面倒

アップロードしブログを公開した後「画像のここ修正しないと!」となった場合,ローカルで画像を編集し,再アップロードしてから,ブログも書き換えなければいけない.
これがとても面倒なのだ.
(といってもこういう自体はなかなか存在しないのだが・・・)

Windowsのみしか対応していない

ScreenPresso Proは大変すばらしいスクリーンショット&注釈ソフトなのだが,残念なことにWindows版しかないのである.
一応iOSも対応と書いているが,単純に転送ツールというだけで編集機能などはない.
現在はWindowsしか使っていないのだが,今年発売されるであろう新MacBook12は購入したかったりする.
そういうこともあって今のうちからMac対応しておこうという魂胆である.
(買う前,というか発売前から考えても・・・というの言うまでもない)

そんなこんなで特に重要でもない理由なのだが,すでに半日費やして今ブログを書いているに至る.

対策案

半日いろいろ試して考えた案がこの3つとなった.

Gyazo

gyazo.com

  • Windows,Mac,iOSに対応
  • 編集は可能だが,編集すると別ファイルとして保存され別URLになってしまう
  • 編集後保存すると再編集はできない
  • 編集機能にモザイク機能がない
  • 有料(380円/月)

Evernote

evernote.com

  • Windows,Mac,iOS対応
  • 編集は可能だが,編集すると上書きされるが別URLになってしまう (同期の段階で別ファイルとして扱われるのだろう)
  • 再編集可能
  • モザイク機能はあり
  • 有料(600円/月) (もともとプレミアムなので気にしない)

ScreenPresso Pro & Xserver

www.xserver.ne.jp

  • Windowsのみ
  • FTPでアップロードするため,編集しても同一URL
  • 編集後も再編集が可能
  • モザイク機能はあり
  • Xserverは972円/月,ScreenPresso Proは2138円で買い切り (XserverはWordpressで使っている&ScreenPressoは購入済み)

まとめ

いろいろ考えた結果,URLの同一性を重視し「ScreenPresso Pro & Xserver」方式となった.
やはりスクショ&注釈ソフトとしてScreenPresso Proが便利すぎるのだ.
iOSではどうせ注釈作業なんてやらないし,Macもスクショだけ取ってリモートデスクトップでWindows機にアクセスして作業すればいいのだ.
とりあえず今回はここまでとするが,次回は実際のフローについて書いていこうと思う.

Evernoteは3年版を買っていたから使っているものの,そろそろ他に乗り換えたい感じもある・・・

はてなブログProで独自ドメインを設定してみた(エックスサーバ編)

エックスサーバ編もなにも単発の予定ですが,気にしないでおきます.
早速ですが当ブログに独自ドメインを設定していきます.

はてなブログProに登録しておく

独自ドメインを使うにははてなブログProに登録しておかなければなりません.
年間一括のほうが安いですが,自分はとりあえず毎月払いにしておきました.

ブログを作る

既に持っている場合は関係ないですが,ない場合は新たに作らないといけません.
作るときに思ったのですが,はてなブログProに登録していても最初から独自ドメインでブログ開設できないんですね.
一度「hatenablog.net」等のドメインで作ってから独自ドメイン設定を行う必要があります.

ドメインを取得する

ドメインを持っていない場合は取得が必要です.
新規で取得する場合は「お名前.com」や「バリュードメイン」がおすすめです.

www.onamae.com

www.value-domain.com

エックスサーバ側の設定

ここからはエックスサーバのサーバーパネルで行います.

f:id:mizuka_123:20160310194941j:plain

「DNSレコード設定」をクリックします。

f:id:mizuka_123:20160310195006j:plain

該当のドメインを選択します。

f:id:mizuka_123:20160310195217j:plain

「DNSレコードの追加」タブに移動し、ホスト名、種別、内容を入力します。  

  • ホスト名:任意

  • 種別:CNAME

  • 内容:hatenablog.com

これでドメイン側の設定は終わりです.

はてなブログ側の設定

はてなブログ側はドメイン側で設定したドメイン名を入力するだけです.

f:id:mizuka_123:20160310200003j:plain

「設定」→「詳細設定」で独自ドメインの欄に入力します.

f:id:mizuka_123:20160310200129j:plain

設定更新後に「ドメイン設定をチェック」をクリックし,設定状況が有効となればOKです.

f:id:mizuka_123:20160310200339j:plain

アクセスしてみて表示されることを確認します.

本来CNAMEレコードと他のレコードの重複はNGなようですが,動いているので良しとしましょう・・・
誰か詳しい方いましたら教えてください.

livedoor Techブログ : CNAMEの間違った使い方

「ぶろぐてくにか」はじめました

何回目の"ブログ始めました"エントリーかはもうわからないですが,また新しいブログを初めてみました.
瑞佳(@mizuka123)と言います.

このブログは私が運営しているブログ「みずかるちゃー」,「みずかのちらうら」の運営ブログです.
もともとブログの運営についてはみずかるちゃーのほうに書いていたのですが,内容がごちゃごちゃになってしまうので分けることにしました.

内容としてはブログ名の通りブログのテクニックに関することを書いていきます.
当ブログははてなブログですがWordpressのことについても書いていくつもりです.
はてなブログもいろいろカスタマイズできるようなので,挑戦してみたいと思います.

それでははてなブログPro初心者ですが,よろしくお願いします.