動画素材が欲しい!!

最近では、サイト構築に動画を素材として使って『ちょっとシャレた』『ちょっとカッコいい』雰囲気を持たせる事があります。
それ以外でも、動画の素材をサンプルとして使いたいなど、写真と同じように動画の素材も抑えておきたい所です。
たまたま今回、動画を扱う事があり、できる限り『無料』で『登録無し』で利用できるサイトをピックアップ致しましたので、良かったらご利用ください。

まずは、王道中の王道。

「YouTube」

Kaz151127_1

『YouTubeを埋め込んだら?』『YouTubeを利用したコンテンツ案』
など、メジャーなだけに説得力も利用しやすさも飛び抜けているのは言うまでもないでしょう。
また、JQueryなどを使って背景にするなど連携できるプログラムが多いのも言わずもがな。既にお使いになっているのではないでしょうか。
また、『4K』『8K』サイズや『秒60フレーム』に対応しているなど素材としては言う事無しです。
ただし、仕事で使うとなると著作権等の問題も有りますので、検索時に『CC(クリエイティブコモンズ)』を加えて検索した方が安全です。


バリエーション豊富なおしゃれな動画素材がそろています

「Videezy」

Kaz151127_3


コチラのサイト、HDサイズから4Kサイズまで用意されています。
海外サイトなので、キーワードは英語になりますが
数多くの動画を揃えていて、海外サイトの割にダウンロードが分かりやすい。
関連動画も表示してくれるので、より理想に近い動画が探せそうです。
一部に有料の動画もありますが、星マークが付いて分かりやすくなています。


写真も動画もステキな物が多い!!

Life Of Vids

Kaz151127_2


動画に関しては『VIMEO』のアカウンと無いとダウンロードできません。
写真も動画も『これで無料なの』と思ってしまうくらいのクオリティ。
まだ、動画の数が少ないですが何気なくても品のある物が多くそろっています。


もはや完成された作品と言って良いクオリティ

Mazwai

Kaz151127_4


もうココは、実際に行って1本1本のクオリティを見て頂いたほうが良いです。
チョット動画が欲しい!! スグに使える物が欲しい!! そんな即戦力的な動画が欲しいときは、迷わすにコノサイトで探した方がいいです。
サイズはHDサイズの物が多いのですが、画質的には4Kサイズでも使えそうな感じです。
何かのプロモーションやデモムービーなどの素材には良いサイトです。


日本のサイトでは、著作権の関係もあるせいか無料で見栄えのする物が探しにくいので、海外サイトを中心に探した方が見つけやすそうです。海外の人から見た日本の映像と言うのも良いかもしれません。


ログインなしで誰でも投稿できる!Tumblrのゲスト投稿を使ったサイトを作ってみた。【制作編】

こんにちは。yasaiです。

前回に引き続き、「ログインなしで誰でも投稿できる!Tumblrのゲスト投稿を使ったサイトを作ってみた。」の後編、今回は制作編です。
概要編はこちら

 

12241745_1661604864098440_1419330459294015468_n

 

今回作ったサイト

前回のおさらいです。

151116_02

上記の様な構成で作りました。

151116_01
クリックすると拡大します

制作にあたっては次のことをしました、

  • ゲスト投稿の有効化
  • テンプレートの修正(出力部分) タグの有効化とメニューへの追加
  • タグリストの設定
  • 削除依頼ページの作成(Googleフォームを利用)
  • その他のページ制作

になります。ここまでが前回のおさらいです。

 

実際の作業について

それでは、ここから僕が実際にやったことのお話です。

1.Tumblrのゲスト投稿を有効にする。

----- - Tumblr.clipular

Tumblrの自分のブログのダッシュボードから、「外観を編集」します。

そうすると、「ゲスト投稿」を有効にするかどうかのスイッチがあるので、「On」にします。

----- - Tumblr.clipular (1)

  • ゲスト投稿できるように設定すると、このような項目が決められます。
  • ゲスト投稿用のタイトル
  • ゲスト投稿のガイドライン。(注意事項や使い方の説明に)
  • ゲストが使用できるタグ。カンマ区切りで複数設定できます。
  • ゲスト投稿で使う投稿タイプ

以上を設定したらこの画面ですることはおしまいです。
※この画面は自動保存されます。

2.テンプレートの修正(出力部分) タグの有効化とメニューへの追加

今回使用させていただいたテーマ「Simplig-folio」では、グローバルメニューにゲスト投稿の有無があらかじめ書かれていました。(ありがとうございます)

<ul>
    {block:HasPages}
    {block:Pages}<li><a href="{URL}">{Label}<i class="icon_next"></i></a></li>{/block:Pages}
    {/block:HasPages}
    <li><a href="javascript:void(0);" class="tagopen">Tagslist<i class="icon_next"></i></a></li>
    <li><a href="/archive">{lang:Archive}<i class="icon_next"></i></a></li>
    {block:AskEnabled}<li><a href="/ask">{AskLabel}<i class="icon_next"></i></a></li>{/block:AskEnabled}
    <span style="color: #ff6600;">{block:SubmissionsEnabled}<li><a href="/submit">{SubmitLabel}<i class="icon_next"></i></a></li>{/block:SubmissionsEnabled}</span>
</ul>

赤字の部分ですね。ソースを見ると「Ask」のもの入ってますね!(Ask機能をOnにすると表示されます。)

{block:SubmissionsEnabled} content  {/block:SubmissionsEnabled}でゲスト投稿が有効な時に、contentが表示されるので、これでグローバルメニューに{SubmitLabel}が表示されます。{SubmitLabel}には「ゲスト投稿ページのタイトル」に入力した文字列が表示されます。

次に投稿フォームが表示されるページです。

151116_03
クリックすると拡大表示します

ダッシュボードで入力した情報は上記のように表示されます。画像をD&Dでアップロードできるのが初めからついているのとかってステキです。

投稿する際には、非Tumblrユーザーは名前とメールアドレスを入力しないと投稿できません。
また、ガイドラインにはHTMLを書くこともできたので、プライバシーポリシーなど長めのものになる場合は、別ページにリンクしてもいいですね。(フォームページはサクサク進んで欲しいですから)

3.タグリストの設定

ここで述べるタグは、2.で使ったTumblrの独自タグやHTMLタグではなくて、カテゴリーを表す意味でのタグになります。

Tumblrではちょっぴり残念なことに他のブログのようなカテゴリーが設定できません。その代わりにタグを利用します。

Simplig-folio」ではあらかじめタグクラウドを表示するようにプラグインが設定され「Taglist」に表示されるようになっていましたが、今回はタグを固定してしまったので、ダッシュボードの「テーマの編集」から変更できるように<header>内に以下のカスタムテキストを入れました。

<meta name="text:Tag List" content="">

こうすると、ダッシュボードからカスタムテキスト「Tag List」が編集できるので、jQruey使って「Tag List」にリンクのリストを生成しました。

<script>
    $(document).ready(function(){
        //Tag List
        var taglist = [{text:Tag List}];
        var len = $(taglist).length;
        for(var i=0; i<len; i++){
            $('.tag_list').append('<li><a href="/tagged/' +taglist[i] +'">' +taglist[i] +'</a></li>');
        }
    });
</script>

この時、タグに日本語を設定した関係上、カスタムテキストの各項目は‘ ‘(クオーテーション)で囲む必要があります。カスタムテキストはゲスト投稿で指定したタグと、もう1つ「お知らせ」タグを設定しました。

4.削除依頼ページの作成(Googleフォームを利用)

誰かに投稿してもらえるサイトを作りたかったので、投稿してもらったものの削除以来ができないと困るなぁということで。お問い合わせページを作り、お問い合わせフォームをつけました。

どこまでも無料で作りたいのでお問い合わせフォームはGoogleフォームを初めて使ってみました。(Googleフォームを使った感想はまた今度)
Googleフォームの設定をポチポチして埋め込みます。

実はこの部分、初めはTumblrの質問(Ask)機能で実装するつもりだったんです。

なぜ断念せざるをえなかったかというと、Ask機能ではTumblrユーザー同士ならば非公開でやり取りできるようなのですが、非Tumblrユーザーとは公開状態でしか、やり取りできないみたいなのです。(おそらくやり取りを出力する場所がないから?)
個人的に好きなTumblrですがユーザーの割合を考えると、ちょっとそれはなぁ、ということで断念せざるを得ませんでした。

5.その他のページ制作

これで、TopPage、Tagpage、SubmitPage、ContactPageができたので、残りのサイトの趣旨を説明するAboutPageと、これは守ってねという内容のPolicyPageを「ページの追加」からサクッと作ります。

これでサイトの体裁が整ったので、ここまで非公開で作っていたので公開してしまいます。

 

Tumblrのゲスト投稿のいまひとつなところ

さてここまで作ってみて、今ひとつというか、もうちょっとこれができたら良かったな、という所をまとめます。

  • 非Tumblrユーザーの場合、投稿者の名前を出力できない。
  • 承認制なのでリアルタイムに更新しない。
  • 管理者へのメッセージは公開すると「消えてしまう」。
  • Tumblr人口がまだまだ日本だと少ない。

特に「非Tumblrユーザーの場合、投稿者の名前を出力できない」点は大きかったです。せっかく投稿してもらっても、投稿者様の名前を表示できないので。

Tumblrユーザーの場合は

{block:Submission}<a href="{SubmitterURL}" target="_blank">{Submitter}</a>さんからの投稿です{/block:Submission}

といった形で名前とリンク先が表示できるのですが、非Tumblrユーザーの場合は{Submitter}は「匿名」と表示されます。これがとても残念なとこですよね。
しかたないから今回は、お名前の表示を希望される方はキャプション(画像投稿のみなので)にコピーライトとして名前を入れてもらうことにしました。とても苦肉の策です。

ちなみに、その投稿が、ゲスト投稿によるものかどうかは、ゲスト投稿の場合はタグに「#submission」が表示されるので、それで判断できます。

そういった部分でも、Tumblrユーザーがもっと増えたらいいのになぁと思います。

 

まとめ

2回に渡ってまとめてきましたが、いかがだったでしょうか?
なかなかアカウントもログインもなく、デザインを自由に投稿できるようにできるのって、あまり選択肢がないように思いますので、制作する際の1つの選択肢になれば嬉しいです。

なにか質問や、もっといい方法あるぞ、っていうのを教えてもらえたら嬉しいのでコメントくださいね。Tumblrもチャット機能をリリースする話もありますし、まだまだ目が離せないですね。

せっかく作ったので、Nagamelもどうぞよろしくお願いします。ぼぉっと空眺める時間、欲しいじゃないですか(笑)

 

 

今回作ったサイト
空を投稿するサイト Nagamel

12241745_1661604864098440_1419330459294015468_n



ログインなしで誰でも投稿できる!Tumblrのゲスト投稿を使ったサイトを作ってみた。【概要編】

こんにちは。yasaiです。

めっきり寒くなって、冬もう間近ですね。みなさんは冬が待ち遠しいですか?
昨日は鶏肉とネギ焼いて食べました。串に通さない焼きとりです。
きっと冬には冬の楽しみ方があるんですよね。僕は布団にもぐって読書です。(こたつならなお良し)

さて、先日ユーザーから写真を投稿してもらうようなものを作りたいというお話を聞く機会がありまして。気軽に写真投稿するのって、写真に限らず文章でもなんでもそうですが、ちょっと難しいんだな、と思ったのです。

※SNSでいいじゃん、っていう話はさておき。こういうことが手軽にできるようなってるのも、SNSのすごさの1つですよね。

 

それでタイトルにしたように「ログインなしで誰でも投稿できる!Tumblrのゲスト投稿を使ったサイトを作ってみた。」ってことをしてみたので、その際のお話です。

12241745_1661604864098440_1419330459294015468_n

 

投稿できるいろいろな方法

誰でも投稿できるサイトの様なものの実現手段について考えてみましょう。
深く考察していませんが、パッと思いつく所はこんなものでしょうか?

  1. SNSのハッシュタグで集める
  2. 会員制のサイトを作る
  3. WPのプラグイン使う
  4. フォームで投稿してもらいかき集めて静的HTMLで表示

それぞれの問題点

「1.SNSのハッシュタグで集める」の場合

基本的に承認制ではないのでどうのような投稿も拾ってしまう。
SNSのアカウントが必要になる。

「2.会員制のサイトを作る」

ログインしないと投稿できない。

「3.WPのプラグイン使う」

サーバなどの初期コストがかかる。

「4.フォームで投稿してもらいかき集めて静的HTMLで表示」

1件1件HTML追加するのは大変。自動追加したりするのにプログラムが必要になるかも。

 

こうなってくると、それぞれに一長一短ありますね。
今回やってみたいことの要件は、

  • 誰でも投稿できる
  • アカウントやログインはしたくない
  • 主旨に反するような投稿は掲載したくない

ということにで考えます。

Tumblrのゲスト投稿について

そこで今回はTumblrのゲスト投稿を使ってみます。

そもそもTumblrってなんだという方はこちら。

Tumblrとは、アメリカのDavidville.incが運営する、世界中で注目のメディアミックス・ウェブログサービスです。「リブログ」というWeb上の画像、動画、記事を自身のブログにて引用・転載する機能があり、「ネット上のスクラップブック」として非常に人気が高いんです。またCMSとしての機能も備えていて、注目をあびています。

Tumblr(タンブラー)の使い方まとめ!【カスタマイズサイト例つき】
LIG 様のブログ より

IMG_3752
iPhoneアプリからの投稿画面

Tumblrのいいところはデザインのカスタマイズができて、サーバーが不要。
僕も簡易的なCMSとして使えると思うのです。また設定でFacebookやTwitterと簡単に連携できるのも嬉しいですね。

あとはWordpressなどに比べるとスマホアプリからの投稿が容易だと思います。(投稿への心理的な障壁が低い)
するっとボタンが出てきたりして、使っててちょっぴり楽しくなります!!

 

Tumblrのゲスト投稿について

  • Tumblrアカウントがなくても利用できる。
  • デザインの変更が比較的容易。
  • 管理者の承認で公開される。
  • 投稿の種類を選択できる。(テキスト・画像・引用・リンク・動画)
  • 使用するタグを指定できる。
  • TwitterやFacebookにそのまま流せる。

これで今回の要件は満たすことができそうですね♪

今回作ったサイト

今回作りたかったのは「誰でも投稿できる『空』の写真を集めたサイト」です。
※単純に写真集めるだけだとつまらないので、「空」シバリです。写真って書きましたけど、写真じゃなくてもOK。イラストでも加工したものでも。
※できたら素材集サイトみたいにできたらいいなぁって思いました。投稿者様の許可必須ですかね。

コンセプトは何となくぼぉっと「空」を見上げられるサイト、です。
(ぼけっと空を眺めている気分になれたら良いなぁ)

151116_02

上記の様な構成で作ります。そのために今回やったのは、

  • ゲスト投稿の有効化
  • テンプレートの修正(出力部分) タグの有効化とメニューへの追加
  • 削除依頼ページの作成(Googleフォームを利用)
  • その他のページ制作

になります。

まずやったことの前に、ゲスト投稿が公開されるまでの流れを説明します。

151116_01
クリックすると拡大します

 

  1. 上記の図のように、投稿するためのページが用意されます。(Tumblrのもともとのオプションで!! 作らなくていいんです!)
  2. そのページから投稿があると、ブログの管理者へメッセージが届きます。
  3. 管理者がメッセージから「公開」すると、投稿が公開されます。(もちろん承認しないことも、日付を指定して投稿することもできます)
    ※ここで注意点。実際に公開される時に投稿者は管理者となります。(後述)

 

 

一気に書き上げようと思いましたけど、ちょっと長いですね(汗)
続きは次回。なるべくすぐ書きますね。

 

今回作ったサイト
空を投稿するサイト Nagamel

今回はTumblrテーマSimplig-folioを使わせていただきました!!ありがとうございます!

12241745_1661604864098440_1419330459294015468_n



Kindle本を読める端末について

先日、弊社で電子書籍を発売しました!

★バスケットボールスピリッツ6号★
バスケットボールスピリッツKindle版6号

Kindle版ですので、アマゾン限定発売です。
発売にあたり誤解が多かったのが、Kindle端末を持っていないと読めないのでは?と言う声でしたが、Kindle本は「専用端末を持っていなくても」読めます。
必要なのは、アマゾンのアカウントだけです。
無料の書籍もマンガや雑誌を含め多数有りますので、この機会に是非
アカウントだけでも作ってみることをオススメします。

Kindle本は、確か最初の頃はリーダー端末を買うしかなかったはずなんですが、いつの間にか、あらゆる環境で読めるようになっていました。試しに手持ちのKindleアプリが用意されている端末すべてに入れてみました。↓こうなります。

kindlebook02
後ろ、PC、手前左から、iPad mini / Xperia Z ultra / Xperia Z3 /Kindle Fire HD

今後、電子書籍の読み方、のようなコンテンツを作るかもしれないので、現状のKindleアプリの守備範囲を調べてみました。
(2015年11月15日現在の情報です。)

先に簡単に利用までの流れを説明しますと、
利用開始までには、
1.アマゾンでアカウントを作る。
2.アプリをインストールして、アカウントを登録する。
3.Amazonのサイトかアプリから書籍を購入。
4.読む!
と言った手続き、設定が必要になります。

★はじめにアマゾンのアカウント

どの端末で読むにしても、アマゾンのアカウントは必須です。
こちらから作っておきます。もちろん無料です。
www.amazon.co.jp/login2
引き続き、電子書籍を購入するのですが、とりあえず試してみたいだけなら、
無料本を購入(と言うのも変な表現ですが、)しておきましょう。
買った本は、下記で紹介する、各リーダー(Kindleアプリ)で読むことが出来ます。

★パソコンで読む

kindlebook06
○大画面で快適読書。
×最近のPCは横長ワイドが基本なので縦長のコンテンツは読みにくいかもしれない。
パソコンソフトKindle for PC を使えば、Windows PC上でKindle書籍が読めます!
PCの大画面で読めることは最大のメリットです。
下記リンクからダウンロードしてインストールするだけ。後は、先ほど作ったアカウントでログインします。
Mac版やブラウザ版もあります。ブラウザ版ならインストールも不要です。
kindle for PC
http://www.amazon.co.jp/gp/feature.html/?ie=UTF8&docId=3078592246
kindle for Mac
http://www.amazon.co.jp/gp/feature.html?docId=3077089416
Kindle cloud reader
https://read.amazon.co.jp/

★Androidで読む

kindlebook04
○アプリ内で購入まで出来、専用端末と大差ない操作感。
×端末によってばらつきが大きいので、液晶の品質によっては読みにくいかも。
Android系のスマホ&タブレットでそれぞれ無料のKindleアプリが出ています。
アマゾンのアカウントでログインすれば、いつでも電子書籍が読めます。
もちろん画面の大きなタブレットの方が読みやすいですが、テキスト主体の書籍なら、
スマホでも本によっては十分実用的です。最近は画面も大きいですしね。
Androidではアプリ内で書籍の購入もできるので、さらにお手軽です。
雑誌は片面ずつ、拡大して読むスタイルになります。
Google Play
https://play.google.com/store/apps/details?id=com.amazon.kindle&hl=ja

★iOS(iPhone,iPad)で読む

kindlebook05
○美しいレティナディスプレイで読書
×書籍の購入はブラウザから
iPhone&iPadでももちろんアプリが出ていますので、Android同様読めます。
Androidと違ってアプリ内でストア機能は使えません。書籍はsafariなどのブラウザを通して購入することになります。
ちょっと不便です。こちらもタブレットのiPadの方が読みやすいですが、retinaディスプレイもあって、iphoneも実用的ですね。iphone6 plusなどは大きさと重さのバランスが良く、電子書籍に向いていると思います。
apple app store
https://itunes.apple.com/jp/app/kindle-ben-dian-zi-shu-ji/id302584613?mt=8

★書籍を買う

kindlebook03

アプリの準備ができたら、とりあえず、無料本でも何でもいいので、買ってみましょう。
カードでの支払設定が済んでいると、クリックひとつで購入になりますので、気をつけて下さい。
購入時にどの端末にダウンロードするかを選べますが、後から別の端末でダウンロードもできるので、大丈夫です。

★どれがいいのか。

個人的には上記に上げた全ての端末に加えkindle fire HDも使っていますが、単純に画面が大きいほど読みやすいです。(当たり前です。)
ただ画面が大きいと、端末が重く手が疲れるという別の問題が出てきます。じゃあPCがいいのかというと、書籍はやはり板状のものを手にとって眺める方が見やすいのです。
どれも一長一短有るので、使い勝手は実際に使って頂くしか有りませんが、あえてお薦めするなら、7~8インチ以上のタブレット端末です。

弊社で発売したような固定レイアウト型の雑誌なら、高解像度カラーのタブレット端末がやはり読みやすいです。コンパクトな7インチ(NEXUS7クラス)、8インチ(iPad miniクラス)サイズでも十分実用的でしょう。5インチクラスのスマホだと、拡大すれば問題なく読めますが、雑誌のように眺める読み方にはやや不向きです。(個人的に出たばかりのiPad Proで見るとどうなるか、興味あります。見開きでいけるのか?)

また、Kindle各アプリは複数端末で読んだ箇所を同期できます。日中スマホで読んだ書籍の続きを夜に自宅のタブレットで読むと言うこともできますので、複数台あっても便利に使えます。

とりあえず、アカウントは無料ですので、手持ちの端末にKindleアプリを入れて頂き、無料本を楽しんでみてください。
そしてバスケットに興味があれば、弊社発行のバスケットボールスピリッツを是非ご購読ください。書籍の方もアマゾンで買えます。

★Kindle無料本
http://www.amazon.co.jp/s/ref=amb_link_68378709_10?ie=UTF8&field-price=0-0&rh=i%3Adigital-text%2Cn%3A2250738051&pf_rd_m=AN1VRQENFRJN5&pf_rd_s=merchandised-search-1&pf_rd_r=1XM4W40TRS423965C3DG&pf_rd_t=101&pf_rd_p=205067909&pf_rd_i=2275256051

★バスケットボールスピリッツ
https://www.amazon.co.jp/s/ref=sr_nr_i_2?rh=k%3A%E3%83%90%E3%82%B9%E3%82%B1%E3%83%83%E3%83%88%E3%83%9C%E3%83%BC%E3%83%AB%E3%82%B9%E3%83%94%E3%83%AA%E3%83%83%E3%83%84%2Ci%3Adigital-text&keywords=%E3%83%90%E3%82%B9%E3%82%B1%E3%83%83%E3%83%88%E3%83%9C%E3%83%BC%E3%83%AB%E3%82%B9%E3%83%94%E3%83%AA%E3%83%83%E3%83%84&ie=UTF8&qid=1447583383

そして…12月には最新7号がでます!(なにげに告知)