灰色の棚

適当な話を適当に書くので、適当に見ていってください

はてなブックマークを便利にするブックマークレット作成を試みたが

f:id:syunki-gt:20161105205628j:plain
 今日は久々に技術系っぽい記事を書きたいなと思い、はてなブックマークをより便利にするブックマークレットを作ろうと試みました。

 試みたんですが、凝ったものからスタートした割に、二転三転してシンプルなものに落ち着きました。

 途中で調べて使おうとした技術とか、完成したものについて書いてみたいと思います。では、いってみよー。

作ろうとしたもの、できたもの

 最初は、ブックマークレット(お気に入りのリンクを押すと動作する仕組み)ではてブできる何かを作ろうとしました。

 ブックマークレットを押すとページが出てきて、そこでコメントを書き込んだらはてブができるとかですね。


 ですが、はてブAPIではAuth認証が必要っぽくて、挫折しました。

 で、結局完成したのは、

 はてブを表示

 これです。ソースは、

javascript:window.open('http://b.hatena.ne.jp/entry/'+location.href);

 これ。

 使い方を知らなかったら、

www.lifehacker.jp

 ここを読んでみてください。


 はてなブックマークを確認したかったり、付けたいページでこの「はてブを表示」を押すと、そのページのはてなブックマークページにジャンプします。まだブクマが付いてなかったら新しいページに、付いていれば過去のコメントとかも見れるページに行きます。

 ちょっとだけ便利じゃないかなと思いますが、どうでしょう?

調べたらすでにあるし

 やろうと思ってたことですが、調べたらすでに公式で用意してありました。

www.hatena.ne.jp

 作るまでもなかったですね^^;

 今回私が作ったほうもたぶん探せばいろんなところにあると思いますが、まぁいいということにします。


 ブックマークレットは結構いろんな面白いことが出来るので、「こういうのがあればな」ってアイデアもらったら作ってみますよ。実現可能かはものによると思いますが!

使おうとした技術

複数行を変数に代入する方法

kimizuka.hatenablog.com

 最初に作ろうとした時に、ダブルクォーテーションとシングルクォーテーションが入り混じった文字列を変数に代入したくなり、調べて発見したのがこちらです。

var txt = (function(param) {return param[0].replace(/\n|\r/g, "");})`
<script type="text/javascript">
function post() {
	var comment = 'test';
	
	// 以下続く
}
</script>`;

 こんな風なことが可能です。

Ajaxxmlをポスト

 最初ははてなブックマークAPIAjaxで投げようとしていたので、どうやったらポストできそうか調べていました。

$.ajax({
	type: 'POST',
	url: 'http://b.hatena.ne.jp/atom/post',
	data: '<entry xmlns="http://purl.org/atom/ns#">
  <title>dummy</title>
  <link rel="related" type="text/html" href="http://www.example.com/" />
  <summary type="text/plain">サンプルコメントです</summary>
</entry>',
	contentType: "text/xml",
	dataType: "xml",
	cache: false,
	crossDomain: true,
	success: function(data, textStatus){
		alert(data);
	},
	error: function(data, textStatus) {
		alert(textStatus);
	}
});

 こんな感じのものを動かしたら、「認証通してくれよ」って感じで帰ってきたので、たぶん飛ばせたんだと思います。

 参考にしたページは、

oshiete.goo.ne.jp
stackoverflow.com
はてなブックマークAtomAPI - Hatena Developer Center

 この三つでした。

おわりに

 なんだか思ったものはできませんでしたが、久々に調べながらいろいろ触って楽しかったです。完成品のはてブページを見るブックマークレットも、適当に使おうと思います。


 とりあえずなんとなくは技術系っぽい記事になったかな? 詳しくない人が見た時に「全然わかんねぇ」ってなったら成功です(笑)

 調べものしている人が見つけたらちょっと役に立つ可能性もあって、本当に詳しい人が見たら「普通」って言われそうな記事ですけどね!


 ブックマークレットを作ってみた記事でした。

 では、今回はこのへんで。おわり!

適当に文章を書きたい人のための、ブログの次のサービスが欲しい

f:id:syunki-gt:20151009232650j:plain
 私はブログに夢を見ています。ブログというものは、書けば筆者の人となりの一部が表出し、読めばそれらが物語として見えてくる、面白いものだという夢です。
 
 個人的な好みとしては、落ち着いた言葉で考えとか出来事を書いたようなものが好きですが、雑多だからいいと思う節もあります。ある人は日記として使い、ある人はお金儲けを目指し、ある人はポエムを書き、といろいろあるのがまた楽しい気がします。

 なので、ブログはこのまま適当に動いていくのが、私の理想です。画一化されるでもなく、荒れ果てて焦土と化すでもなく、誰もいなくなることもない、そんな状態を望みます。
 そして、その望みはある程度は叶い続けるのではないかと思っています。ブログサービスは一つじゃない。誰かが天下統一できるとも思えない。インターネットが無くなったら色々厳しいけど、会社がちょっと潰れたくらいじゃ無くならない。いきなり全然ダメになるってことは無さそうです。


 でも、ちょっと違ったものも欲しいなという気がしてきました。
 そんなことについて書いてみたいと思います。いつものことながら適当ですけどね。いってみよー。

コミュニケーションは要るが要らない

 私がブログでしたいことの中に、人と交流したいというものがあります。感想を書いたり書かれたり、応援したりされたり、そういうことがしたいと思います。
 でも、面倒なつながりは嫌です。書きたいことを書けなくなったり、感想を書くのが義務みたいになったり、応援しないとという強迫観にかられたり、そういうのは嫌です。

 私はそういう好き嫌いがありますが、それも人それぞれ。どういう種類のどのくらいの深さの交流を望むのかなんて、千差万別で当然ですよね。そしてその願望自体は制限されたり非難されるようなことでは無いと思います。

 まぁ、それはわりとどうでもよくて。私には私の好き嫌いが、願望が、基準があるということです。
 そして、それに合致してくれるサービスがあったらいいなと思うという話です。


 軽く適当に交流したい。でも、しがらみは作りたくない。
 今の「ブログ」と言われるものは、いろいろ難しいです。はてなは交流はしやすめだけど面倒さが結構あるし、面倒さが少ないところは交流しづらすぎたり、難しい。
 なので、私の持つニーズを満たしてくれる「何か」が欲しいなと思いました。

いくつかあった、ような?

 で、いろいろ考えてみると、そういう方向性を目指していたのかもしれないサービスはいくつかあった気がします。

 名前が思い出せないものが多すぎるんですが、過去のログが残らず評価も誰がしたかわからないような詩か何かの投稿サービスがあったような気がしたり、文章を書くことに重点を置いたと銘打ったミニブログっぽいサービスもあった気がします。ちょっと方向性が違うけど、文章などを売りやすくするってのもあったような、あれどうなったんだろう。

 結構いろいろ触ってきたんですが、名前も忘れるくらい定着してないんですよね。少なくとも私は。合わなかったんだと思います。

 では、どうするか。
 そうです。いつものあれです。昔ながらのあれです。

 無いなら作っちゃえばいいじゃない?

どんなものが欲しい?

 必要な事項を並べてみます。

  • 文章を書いて公開したい
  • 交流できる仕組みは欲しい
  • しがらみは作りたくない
  • キツイ言葉が飛んで来る恐怖に怯えたくない
  • 人に迷惑かけない範囲で好き勝手書きたい
  • (今回は)お金稼ぎは置いておきたい
  • 人と競うより自分の中で目標を立てたい

 って感じかなぁ。


 とりあえず、掲示板とかブログみたいな文章を投稿するサービスではあると思います。
 コメント的な何かもあるといいと思います。でも、しがらみを作りたくないというのが難しい。これはローカルルール的なもので対応できるでしょうか。

 好き勝手書きたいが、キツイ言葉は見たくない。これははてなブックマークコメントを拒否した上で、ローカルルールと通報機能を作り運営で対処するのが一番無難そうです。流行ると手間がすごいことになりそうだけど、まぁそんなこともないよね(フラグにしたいようなそうでないような)

 お金稼ぎは置いておくってのは、ユーザーが広告を貼ったりできないようにすればいいですね。アピールポイントは減るけど、そもそも万人向けじゃないしいいかな。
 目標の話は人それぞれのことだけど、マイページか何かに自分で目標を作れるような機能を作るとかして、軽く誘導する形でしょうか。それでもいろいろ起こるだろうけど、あとは好きにやってねってスタンスで。


 どうだろう。あまり全体像が見えないけど、面白いかなぁ。

イデアあったらぜひ書いてみてください

 「どんなのか分かんないけど、興味あるから作ってみろYO!」という人は、こんな感じだったら嬉しいとかそういう意見をコメントで書いて下さい。ブコメでも悪くはないけど、100文字は少ないし、拡散しても面倒なのでできればコメントでお願いします。

 まぁ作るとしても私基準で作るので、全部採用とか無理だと思いますけどね。そもそも作るのかってところがハードル高いですし。
 作るなら、何を使って作るかな―。実現可能性で言えば、PHPMySQLとか使い慣れてるものでさくっと作って、面白くなったら全面改訂も考えるってのが無難か。いきなり慣れないものに手を出すのはエターの元。

 どうかなぁ。面白そうな匂い、しますか?

おわりに

 「作ってみよう~!!」ってノリノリな状態になっていないし、「作るとしてもどう作るかねぇ」って感じだし、実際にものになる可能性は今のところ低いです。

 あとは、「やってみろYO!」「見てみたいYO!」っていう言葉を貰えるようなアイデアなのかと、気分が乗るかどうかですね。言葉もらえても気分が乗らなければ完成しないと思うし、言葉もらえなくても気分が乗ったら何かしらできると思います。


 完成しても「これがブログの『次』です」とかいう押し方はできないと思いますけどねー。宣伝用に言うかもしれないけど、おそらくそんな自信は持てないだろうなと。大したものが作れる自信もないしなー。

 タイトルは正しくて、「欲しい」とは思います。けど、「だから作る!」かといえばどうかなという話。うーん、最近あまり物を作ってないし、やりたい気もするけど……。

 という感じで今回はここまで。おわり!

12年前に戻りたいとは思わない。けど、今の言葉は紡ぎたい。

f:id:syunki-gt:20150413212100j:plain
 昨日、4月12日は誕生日でした。27歳になったようです。あー、いろいろプロフィール書き換えないとか。後でやろう。

 さて、誕生日だったのですが特に何もないなぁと思い、ちょっとしたものを作ってみました。

 灰色の時

 ここです。この記事ではこの「灰色の時」についてちょっと紹介したりしてみたいと思います!

「灰色の時」

 「灰色の時」という名前は、11年くらい前から私が個人サイトのタイトルとして使っているものです。このブログが「灰色の棚」という名前なのも、この「灰色の時」が由来です。「棚」部分に深い意味は無いですが。

 その「灰色の時」というサイトもここ数年は開いているような閉じているような状況でしたが、誕生日にかこつけて復活してみようかと考えました。


 というわけで復活、……と言っても何を置くかが問題ですよね。

 何をしようかなと考えた時、思い当たるものがありました。

詩・小説

 11年前の初代灰色の時に何が置いてあったか考えた時、おそらく日記と詩だったはずと思いました。

 そして、灰色の時という名前を使いはじめるより前に、小説を書き始めてすぐ詰まったこともあったなと。


 そんな記憶とともに、ほんの数日前に友人たちと飲んだ帰り、友達が「詩を書いている」という話をしていたこと、それにショックを受けたことを思い出しました。

 というのも、その友達は本人も言っていましたが詩を書くイメージがあるやつではなくて。でも、聞いてみたら結構いいなというものを書いていて。私は以前結構書いていたけど、最近は今ひとつそういう方向の活動ができていませんでした。でもやりたいなと思っていました。


 私がやりたくてできないことを、全然そんな気配のなかった友達が当たり前のようにやって、うまくなっていく。そんなことに一人で勝手にショックを受けて、同時に「やっぱり言葉を紡ぐことをしたい!」と思いました。


 という感じで、新しい「灰色の時」は小説や詩を置くサイトにしようと考えました。

作ってみた

 ショックを受けたのが先週で、考えたのが4月11日、作ったのも同11日です。

 詩と小説のサイト、昔を思い出して、となると懐かしい感じでだろうなと思いました。なので、昔のようにHTMLを手打ちして(今もやってますが)、昔と違ってCSSでデザインを組みました。

 それで出来たのが上にも出した 灰色の時 ここです。


 昔なら確実に使っていただろう、centerタグやtableレイアウトは使っていません。テキストエリアをデザイン用途で使うのも別の方法に切り替えています。

 11,2年前はこんな感じで作っていたような……と思えるものは出来ました。懐かしのロケットBBSも設置して、完成です。

黒歴史製造機

 3年後くらいには悶えることになるかもしれませんが、詩と小説を書いて公開していきたいと思っています。

 まぁ、12年前のことが黒歴史化しているかといえばそうでもないので、大丈夫かもしれません。そうでないかもしれません。

 以前とはまた違った感性で言葉を紡げるのではないかと、少し楽しみにしています。まぁ、以前の詩はサルベージできたとしても公開する予定ないので、比較できませんけどね!(笑)


 とりあえず、詩は初日に1つ、今日もう1つ出しました。

 公開したよーということを宣伝するかどうかは迷っています。12年前なら、見に来た人しかわからないものだったなとも思うので。Twitterで流してもいいけど、どうしようかなーと。

 小説はぼちぼち考えて、出せるよう頑張りたいと思います。12年温めている設定群もあるので、使いたいけど……。あたって砕けるしか無いですけどねー。


 ま、いろいろやってみます。

おわりに

 サイトを作りましたが、あっちに日記とかを置く気はないです。ここがあるので。いわゆるテキストサイトをやろうというわけでもないですしね。

 ここのPROプランの支払いがそろそろ迫ってきていてどうしようかな~と思ったりもしていますが、おそらく更新すると思います。潰す気はあまりないし、なら広告置きたいし。


 更新が凄まじく減っていますが、たまにはいろいろ書きたいと思うので、気が向いたら読んでいただけるとありがたいです。

 という感じな、27歳1発目の記事更新でした。


 では、今回はこのへんで。おわり!

jQueryでAjaxを使いPHPでMySQLからデータを取るの楽しい!

f:id:syunki-gt:20150212193303j:plain
 タイトルに入れたい語句が4つもあって、全部入れた上でまとめるのに苦労しました。

 入れたかったのは、「jQuery」「Ajax」「PHP」「MySQL」です。Ajaxだけが仲間はずれですな。


 今作っているサービスでこれらの仕組みをふんだんに使っているのですが、結構楽しいので紹介してみたいと思います。

 では、いってみよー。

Ajaxって、何?

 上の4つの言葉の中で、一番聞き慣れないのはAjaxではないでしょうか。と言っても、Web系を調べたことがある方ならご存知かなと思いますが。

 Ajaxとは、

ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称
Ajax - Wikipedia より)

 です。

 Asynchronous JavaScript + XMLの略だそうです。


 これは例えばGoogleの検索で文字を入れると先読みして候補を上げてくれる、サジェスト機能を実装するのとかに使われている、というのを何処かで見た気がします。

 そういう、ページ遷移などを伴わずにPOSTしてデータを引っ張ってくるとかいうことが出来る仕組みです。多分!

ページ遷移が嫌だ

 今回私がこれを使っている理由は、ページを遷移させたくなかったからというのが8割です。同一ページ内で「続きを読む」ボタンを押したら続きをデータベースから引っ張ってくるとか、そういうことがしたかったんですね。

 で、Ajaxとかいうのを使えば出来るのかな? と試してみたら出来ました。


 一番参考にしたところが、

 [PHP, JS]jQueryのAjaxによるPHP、Javascript間の送受信(JSON) | PHP Archive

 ここかな。


 jQueryAjaxPHPに投げて、JSONを投げ返して使うという流れ。この投げ返すJSONに、MySQLのデータベースから取ってきたデータを乗せてやりました。

 MySQLのqueryなんたらも、以前使ってた方法が非推奨になってたので(前からかもだけど)、mysqliというものを使用。

 mysqliもいろいろ調べていろいろしたけど、情報はネット上にいっぱいあったので、必要なら調べて下さい。

おわりに

 何を作っているかは、近々お知らせできる、はず!

 基本的に一つのページ内に収めたいなと思っているので、完成品をみて「こういうことか」と思ってもらえると嬉しいです。


 作ってる途中で記事にすることで、先を作るモチベーションを上げよう大作戦でした。

 現在は、基本構造の7割くらいが完成しているところ? 最短で明日中くらいには基本構造ができそうですが、どうかなー。


 では今回はこのへんで。おわり!