Twitter botで画像付きのツイートをする方法

20151225_01

前回botを使った定期ツイートの方法をご紹介しました。
Twitter botを簡単&無料で作成!MAKEBOTを使ってみました
テキストだけのツイートだとあれで十分なのですが
通常のツイートのように、画像付きでもつぶやけないのかな〜と思いまして
ちょっと調べてみました。

すると、一度投稿した「画像付きツイート」を使うと手軽にできるという情報が!

こちらを参考にさせていただきました。ありがとうございます!

ツイッター(twitter) 画像付botの作り方!【※追記あり※】

 

つまり、botでも反映できる「画像URL」をツイート登録画面に貼付けると
画像付きでbotがつぶやいてくれるようなのです。

「画像URL」の取得方法は色々あるようですが、
自分でやってより手軽だった方法を、今回はご紹介します。

※今現在(2015/12/20)では、一度もつぶやいていない内容の「画像URL」は取得できないようです。

 

Twitterで画像付きでつぶやき、そのツイートの「ツイートアクティビティ」を表示します。

29

 

テキストの下に表示してある「pic.twitter.com/〜」で始まるURL。この「画像URL」をコピーします。

30

 

botの「つぶやき登録」の欄にURLをペーストすると完了です。

 

ちなみにこの画像URLは、Twitterの仕様変更にともない
表示される場所がこれまでに何度か変わっているようです。
今回ご紹介した方法は記事執筆時(2015/12/20)の情報ですので、ご了承の上お試しください。


取扱い注意な『チェックボックス』

WordPressでサイト構築を行った際に
プラグインを使わずに検索部分を作ったのですが
その際に迷走して3時間程悩んだ事を書きたいと思います。

事の始まりは、カスタム投稿で制作された情報追加画面です。
一部、該当する事全てにチェックを入れて頂くために
1つの項目に5つのチェックボックスを設置して
情報を入力して頂くようにしました。
そのチェックボックスの情報を使って
検索ページでは、該当する物だけをピックアップするように
プログラムを組んだつもりでした…

実際、ある項目を除いては問題なく検索できていました。

続きを読む 取扱い注意な『チェックボックス』


Twitter botを簡単&無料で作成!MAKEBOTを使ってみました

20151223_01

AGN Webチームで使用しているこちらのTwitter。


これは!と思ったものや、また読み返したい記事を
半分私的なメモ代わりにツイートするのが中心のアカウントになっています。
あとは打合せ先や、社内のできごとなどなどなど…

その他に、過去のブログ記事や制作事例なども交えて、
ちょいちょいツイートするようにしているのですが
手動でやっていると、自分の仕事のつまり具合でツイートする数がバラバラに…
なので、定期的に少しずつ流したいものは、botでできたらいいな〜
なんて思ってたのです。

Twitterを利用している方にはもう当たり前のように浸透しているbot。
定期的に決められた頻度や時間にツイートしたり、自動返信なんかもしてくれるあれです。
キャラクター系botや時報botなんかが有名ですよね。

でも、作るとなるとなんだか難しそう…
プログラムがかけないと厳しいのではないかと、二の足を踏んでいたのですが
調べてみると、無料でできる簡単なbot作成ツールがいろいろあるらしい…

代表的なものだと、

MAKEBOT
01

twittbot
32

楽ボッツ
31

機能的な制限はそれぞれのサービスによって様々ですが、
日本製の無料のものでもいろいろあるみたいです。

作成にあたってbotにしてもらいたいことをまとめると

  • 過去記事や制作事例などを定期的につぶやいてもらう
  • ランダムにツイートできる
  • 1日に3件ほど
  • 夜間は停止できる

↑のことが簡単に実装できるのと、サイトの作りがわかりやすい印象だったので
今回はMAKEBOTというサービスを使ってTwitter botを作ってみました!

続きを読む Twitter botを簡単&無料で作成!MAKEBOTを使ってみました


制作事例 仏乃蔵様

名称未設定 1

モダン仏壇の専門店
100%国産仏壇を取り扱う、お仏壇のセレクトショップです。

公開 2015年12月19日
URL http://hotokedo.com/butsunokura/

●制作内容
•レスポンシブ対応
•写真を大きめに使う
•パンフレットとイメージの統一
•現代の生活に合わせた「空間デザイン」や「デザイン仏壇」の取扱いをされていることから、従来の「仏壇屋」とは違った、モダンなイメージのデザインとしました。


Googleスプレッドシートと連携!Googleフォームを使ってみた。

yasaiです。師走ですね。師じゃなくて下端なので当然はしりますよ。
今回はGoogleフォームを使ったときのお話です。GoogleフォームのメリットはGoogleスプレッドシートと手軽に連携ができることですね!

151219blog

※goolge→google(goolge様ごめんなさい)

相変わらず前置きが長いので、飛ばして読みたい方はこちらからどうぞ。

 

前回まで「ログインなしで誰でも投稿できる!Tumblrのゲスト投稿を使ったサイトを作ってみた。」の時のことをお話しましたが、今回はその続編です。

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

【概要編】【制作編】

 

Tumblrのゲスト投稿機能を使って、写真をログイン無しで投稿してもらえるように作ったNagamelでしたが、複数の人に投稿してもらえることを考えると、自分の投稿を削除したいことや、投稿そのものが何かの違反ですよってお知らせできる機能が必要かな、と思いました。
無論メールでお知らせしてもらうようにしても良かったのですが、メールってクリックしてメーラーが立ち上がって、空白の画面に文字を入れていくのが、少し気分的に障壁があるように感じるですね。やっぱりフォームの方がいいな、と。

NagamelはTumblr使っているので、FTPでフォームのPHPをアップして、ということができません。別サーバにフォーム用のページおいてもいいんですが、気軽にサクッと作りたかったという今回の趣旨に反するので、これは却下。
DISQUSでコメント欄を作るのもありかなと思ったのですが、今回はGoogleフォームを使って作ってみました。下は実際のフォームのスクリーンショットです。

Nagamelのフォームページ
Nagamelのフォームページ

続きを読む Googleスプレッドシートと連携!Googleフォームを使ってみた。


CRONジョブのを使って一定時間毎にphpを動かす( コアサーバーの例)

f157251c72cafb1542af36151665e17b_s
一定時間おきにサーバー上のプログラムを動かすCRONジョブ。便利です。
某案件で、一日一回海外の為替レートを見て、ショップの売価に反映させるPHPを動かす必要があって使っています。この案件ではコアサーバーを利用していますが、たいした知識も無くCRONジョブを使おうとして、設定にはまったので、反省と備忘録を兼ねて記事にしておきます。
設定画面
そのものずばり、管理画面のメニューに「CRONジョブ」があります。
 cron01
設定画面を見るとなんとなく、時間とプログラムの場所を書いておけばいいのだなと思いますね。そしてページの下には記述例もありましたので、参考にして処理を書き、該当PHPファイルまでのフルパスと、動かしたい時間(毎朝9時)を書いて設定しました。
こんな感じでした。
間違った記述例
しかし、いつまでたっても動きません。
時間を書き換えてみたり、PHPの内容を確認してみたり、やたらと沢山設定してみたりと、
数日ムダにしてはじめて気がつきます。「たぶん根本的に間違っている。
そこで改めて説明文をよく見てみます。
・上段にCRONジョブの例
・下段にシェルスクリプトの例
が記述してあります。
ここでようやく気がつきます。
CRONジョブはシェルスクリプトを書いて、そのスクリプトを指定時間に動かすサービスである、と。と言うことは「PHPを動かす処理を書いたシェルスクリプト」を書いてサーバーにアップしなくてはなりません。
UNIX使いの方や、サーバー屋さんには当たり前なんでしょうけど、全然分かっていませんでした…。
そもそも説明に

「 「分 時 日 月 曜日」で指定した時間に「/virtual/car/~」で指定したシェルスクリプト(/bin/sh)を実行します。」と書いてあります。よく読まないとダメです。


結局正解はこうなります。
1.シェルスクリプトrate.shを書く
動かしたいPHPをサーバーのフルパスで書いておきます。
#!/bin/sh
#PHP
/usr/local/bin/php /virtual/ユーザーID/public_html/www.aaaa.com/rate.php
exit
2.rate.shをサーバーに置く
 FTPでアップ。
 3.CRONジョブ設定画面でrate.shを動かす時間を指定する。
rate.shをフルパスで記述します。
1日1回毎朝9時だと図のようになります。
cron03
 4.指定時間まで待つ。
動けば、完了です。
これでめでたく動くようになりました。
同じバリュードメイン系サービスのxreaやvalue serverもほぼ同じようです。
上手く活用することで、一定時間おきの処理などをサーバーサイドの時間設定で動かすことが出来ますね。
そして何事も説明はよく読みましょう。

イベントの出欠管理に便利なLINEスケジュール

年の瀬も近づき、これから忘年会や新年会など幹事を任されている方がいると思います。
幹事って大変ですよね。お店の予約や日程の調整、出欠の有無なとやることがいっぱいあります。
とくにスケジュールは調整するが、難しい・・・
そんな大変な幹事の手間を軽減するLINEスケジュール使い方を紹介します。

 

どんなことができるのかというと
LINEのグループもしくは友達に内容と開催日を簡単に一括で送ることができ、
返事を○△×の形式でくるので結果が一目でわかるようになっています。

 

その他メニューの「LINE App」の中に
「LINEスケジュール」があります

 

2015-12-11 19.40.55

 

 

 

新規スケジュールを作成します

 

2015-12-11 19.41.19
イベント名、内容、開催予定を選びます。

2015-12-11 19.43.11

 

グループもくしは友達に送信します
参加者が入力すると

2015-12-11 19.48.32

 

このようにセットした日付に対して入力した○△×が入り
一目でわかるようになります。

意外知られていない機能なので、使ってみてください。

 


動画素材が欲しい!!

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

まずは、王道中の王道。

「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」では、グローバルメニューにゲスト投稿の有無があらかじめ書かれていました。(ありがとうございます)

赤字の部分ですね。ソースを見ると「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>内に以下のカスタムテキストを入れました。

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

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

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

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

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

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

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

5.その他のページ制作

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

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

 

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

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

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

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

Tumblrユーザーの場合は

といった形で名前とリンク先が表示できるのですが、非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