画像・動画・ツイート埋め込みアプリ CodeCapture はブログエディタと簡単に連携できる!(追記あり)

前の2つの記事

Fuzel Collage:複数画像を動画的に見せられるコラージュアプリ | こてつは内臓ではない2

PicPlayPost:動画も埋め込めるコラージュアプリ | こてつは内臓ではない2

で、さり気なく紹介した、画像・動画・ツイートなどを簡単にブログ記事などに埋め込めるアプリCodeCapture。

 CodeCapture
カテゴリ: ソーシャルネットワーキング, ユーティリティ
¥240(記事作成時点)




私はMacで記事を書くので、取得したコードをコピーしてメモに貼り付けてMacで参照することが多いんですが。
モブログ(スマホやタブレットでブログ記事を作成)する人は使っているエディタに直接貼り付けると楽ですよね。 

そこで、エディタに貼り付けるやり方をおさらいしておきます。
私は SLPRO X を使っているのでそれを例にしますが、他のエディタでもほぼ同じだと思います。

SLPRO X (WordPress & Movable Type対応)
カテゴリ: ソーシャルネットワーキング, 仕事効率化
¥1,600(記事作成時点)



(参考:CodeCaptureで直接コードを貼り付けられるエディタ)

SLPRO X
PressSync
AmeEditor for WordPress
Textwell



【エディタに貼り付ける〜オーソドックスな方法〜】

たとえばこんなYoutube動画を貼り付けることにします。


 記事「【アプリ】Slow Fast Slowがアップデートで標準速動画も取り込め、スピード変化ポイントも増減可能に! | こてつは内臓ではない2」で紹介した「Slow Fast Slow」というアプリで作成。

Slow Fast Slow – Control the Speed of Your Videos
カテゴリ: 写真/ビデオ, ユーティリティ
無料(記事作成時点)

 

 

 

準備として、エディタ(今回はSLPRO X)で記事の編集画面を開いておきます。
とりあえずエディタを閉じて、Youtubeアプリを開きます。
(エディタはドックから削除しても大丈夫です。:普通はそんなことしないけど) 

Youtubeでお目当ての動画を開き、共有(動画右上の「右折のみ」標識みたいなアイコンをタップ、リンクをコピーをタップ)

2016 11 09 17 30 19

 

CodeCaptureで、URLをペースト。

2016 11 09 15 00 52

 

「検索」をタップするとコードが表示されます。

2016 11 09 15 01 11

こんな感じ。
普通は「HTML」で良いと思いますが、動画を画像で表示したい(例えばアイキャッチ画像として使いたい)場合は「Thumnail」、 動画もサムネールもほしければ「HTML+Thumnail」ですね。

コード部分をタップすると、こんなポップアップメニューが出ます。
 2016 11 09 15 07 46

Copyして好きなアプリにペーストしても良いですが、「Send Other App…」をタップすると、
 2016 11 09 15 07 51

こんなふうになるので、お使いのエディタを選びます。
すると、選んだエディタアプリが開きます。
SLPRO Xではこういう感じ。
 2016 11 09 15 01 17

「本文」を選ぶと、本文末尾にコードがペーストされます。
 2016 11 09 15 01 28

SLPRO XではHTMLコードの扱いが特殊で [html=“〜」という書式を使いますが、それも自動的につけてくれます。

「続き」を選ぶと、記事中の「More」とか「続きを読む」の中にペーストされます。

「ペースト」を選ぶと、こんな画面になります。
 2016 11 09 15 02 06

ここで、好きな挿入場所にカーソルを置きます。今回は「初めの行」と「終わりの行」の間。
するとこうなります。
 2016 11 09 15 02 13

とても楽ちん!

プレビュー表示してみると、ちゃんと埋め込まれています。

2016 11 09 15 02 35

 

【エディタに貼り付ける〜エディタ決め打ち!〜】

いつも使うエディタが決まっているならもっと楽な方法があります。

まず、CodeCaptureの右上のギヤアイコンをタップし Setting を開きます。

2016 11 09 15 03 04

「URL Scheme」をタップし、エディタを選びます。

2016 11 09 18 47 01

【追記】
作者からご指摘あり!

この送信先のエディタは、自分で追加することができます。 
上の画面で右上の「Edit」をタップ、

 2016 11 09 18 47 07

「+」をタップすると、

2016 11 09 18 47 13

アプリの正確な名前とURL Schemeを記入するので、私のスキルを超えていますが(^_^;) わかる方はご自分の好きなエディタを追加してください!

【追記終わり】

ホームに戻って先ほどと同じようにURLを入力したら、表示されたコードを長押しします。

すると、お使いのエディタがダイレクトに開くのです!

あとは「オーソドックスな方法」と同様に操作してください。
オーソドックスな方法では3タップでエディタに行き着きますが、このやり方だと1タップです。すごいです!

あ、CodeCaptureでコードを取得できるのは以下のとおりです。 

Instagram
SlideShare
Twitter
Youtube
Vimeo

個人的にはSlideShareに対応しているのが地味に嬉しい!
対応アプリはこれから増やしていくそうなので、作者の@feelingplace さんのブログをちょこちょこ確認しましょう。

Feelingplace

 

 

 

【おまけ】

最初に書いたとおり、私は基本的にMacでブログ記事を書いています。
ですのでCodeCaptureはコードをコピーしてアップルバンドルのメモアプリに貼り付け、Macでコピーして使うことになります。

と書きましたが、もう少し楽な方法があります。
先程の、「コードをタップすると出てくるポップアップメニュー」の中に、「Open in…」という選択肢があります。

2016 11 09 15 07 46 

これをタップすると、こんな画面が出てきます。

2016 11 09 15 09 20

(「・・・」をタップすれば他にもアプリを追加できますが、Facebookなんかを追加しても使いみちがありませんよね)

で、「Add to Notes」を選べば新規メモにコードをペーストしてくれます。
これもとても楽ちんです! 




こてつは内臓ではない!2 のFacebookページ
よろしければ「いいね!」してください!

このブログのフィードをFeedlyに登録
follow us in feedly

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です