ログインなしで誰でも投稿できる!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



LINE@でポイントが貯められるショップカードが登場

2015-11-12 15.49.11 - コピー

2015/10/22よりLINE@でデジタルポイントカードが無料で発行できる機能
「LINEショップカード」の提供が始まりました。
LINE@アカウントを持っている店舗でポイントカードを発行し、
QRコードを読み取るとポイントが貯まるシステムです。

今回は、ショップカードの開設の方法をまとめました。

 

前提条件

●LINE@アカウントを開設している。
●LINE@管理アプリをインストールしている。
※LINE@管理アプリはApp StoreかGoogle Playからダウンロードしてください。

 

ショップカードの作成

LINE@管理アプリより起動します。

2015-11-12 18.31.43

メニューの中に「ショップカード」がありますのでタップします。

メイン

① デザイン
10種類の既存デザインの中から1つを選択します。
※オリジナルデザインには対応していません。

② ゴールまでのポイント数
カードのポイント上限を1~50の間で設定できます。

③ゴール特典
ポイントが全て貯まった際の特典サービスを設定します。
※特典チケットの作成

④追加特典
ポイント集めの途中の段階の特典サービスを設定します。
例えばゴールが10ポイントだが、5ポイント貯まったときにも特典を追加したい。

⑤ 有効期限
ショップカードの有効期限を設定します
・最終利用日から○年○ヶ月
・初回利用日から○年○ヶ月
・無期限

⑥有効期限前通知
有効期限が近づいた際にお客様にお知らせをする設定をします
下記の中から選択します。
・有効期限の前日
・有効期限から3日前
・有効期限から1週間前
・有効期限から2週間前
・有効期限から3週間前
・有効期限から1ヶ月前
・通知しない

⑦初回ボーナスポイント
お客様がショップカードを取得した時点で
ポイントを付与する場合に設定します。

⑧不正防止設定
・同日中に同一アカウントへの付与を許可しない
└お客様は1日1回しかポイントを取得することができません
・設定時間以内に同一アカウントへの付与を許可しない
└お客様は設定された時間が経過しないとポイントを
再取得することができません

⑨ご利用案内文
利用ルールを設定します。

⑩リッチメニューの表示
お店のトーク画面の下部にショップカードの告知の表示設定。

⑪ポイント付与画面設定
店舗側でお客様にポイント付与を行う際の画面の設定を行います。

⑫ランクアップカードを設定
ポイントが貯まった方向けの次のレベルのカードを作成することができます。

⑬サービス公開
設定が終わった段階でサービスの公開します。

 

特典チケットの作成

特典チケットとは簡単に言うとクーポンです。
ポイントを貯めたお客様へのサービス内容を設定します。

③ゴール特典をタップします。

2015-11-12 15.45.07

特典チケットを作成するをタップします。

メイン2

A.チケットタイトル
特典のタイトル(サービス内容)を設定します。

B.注意事項
チケット利用に関するサービス内容詳細や注意事項を設定します。

C.有効期限
チケットの有効期限を設定します。

D.写真
特典のイメージとなる写真をアップロードできます。

E.背景
デザインを既存3種類の中から選択します。

F.プレビューを確認
作成した内容を確認します。

 

 

 

特典は複数用意できますので、追加特典などに使用できます。

2015-11-12 15.47.23

 

基本設定と特典設定が終わればサービスの公開ができます。
公開するとショップページに「ショップカード」が追加されます。

2015-11-12 16.00.04

 

ポイント付与のQRコード

お客様に店舗で用意したQRコードを読み取ってもらうことで
ポイントを付与します。
店舗で用意するQRコードはスマートフォンに表示させるものと
印刷して用意するものと2種類があります。

実際に使うこと考えれば、印刷して使うことが多いと思いますので、
印刷データの作成方法を説明します。

LINE@管理アプリより起動します。

2015-11-12 18.31.43

「ショップカード」をタップします。

2015-11-12 16.02.00

QRコード印刷をタップします。

2015-11-12 16.02.19

・読み取った際に付与するポイント数
1~9ポイントの間で設定

・QRコードの有効期間を設定
ここで設定した期間を過ぎるとQRコードが使用できません。

・ユーザー位置情報を設定
ここを設定すると設定地点から500m以内でQRコードを
読み取られた時のみ、ポイントが付与されるようになります。

・連続でのポイント取得制限
ここを設定すると一定の日や時間内での連続してのポイント付与を制限できます。

 

 

 

2015-11-12 16.02.52

・メールアドレスを入力し、「送信」を押すと、指定されたメールアドレス宛に
「横型2種類」「縦型」の3種類のデザインで印刷できる
QRコード読み取り用紙のダウンロードURLが送られます。

・ダウンロードしたデータを印刷して使います。

 

 

 

 

 

 

ショップカードの取り下げ

LINE@管理アプリよりショップカードの取り下げが行えますが、
ポイント有効期限などの設定をする必要があります。
既存ポイントが終わるまで新たにショップカードを追加することができませんので、
取り下げの際は、慎重におこなってください。

 

 


より手軽にオリジナルグッズが作れる!Canvathを使ってみました。

02

在庫リスクなし!オリジナルグッズを作って販売できるWebサービスまとめ

オリジナルグッズ作成サービスのご紹介。
今回は、Canvath https://www.canvath.jp/を実際に使ってみました。

こちらはすでにネットショップをもっている方向けのサービス。

デザインを決めたら、自身の運営するショップサイトに掲載。
注文があったらCanvathに発注し、直接注文者へ商品を発送をしてもらうシステムです。

02

 

ちなみにネットショップサービスのBASEと連携が可能です。
詳しくはこちら

※ご利用の際はサイトの規約などをご確認ください。
※2015/10/31現在の情報です。

続きを読む より手軽にオリジナルグッズが作れる!Canvathを使ってみました。


とにかく簡単にグッズ作成! SUZURIを使ってみました。

在庫リスクなし!オリジナルグッズを作って販売できるWebサービスまとめ

やることはグッズのデザインと値段を決めるだけ!
作成〜発送まで請け負ってくれるサービスのご紹介。

01

今回はSUZURIを実際に使ってみました。

SUZURI
https://suzuri.jp/

※ご利用の際はサイトの規約などをご確認ください。
※2015/09/30現在の情報です。

続きを読む とにかく簡単にグッズ作成! SUZURIを使ってみました。