1. /
  2. jQuery

jQuery

Uploader

GoogleがGoogleTalkをハングアウトとして新しくアプリを公開したようで、とりあえずインスコして使ってみておりますりっくんですこんにちは。Android版の雑感としては、割りと通知バーに更新が来るのめんどくさいって感じです。LINEのあの通知方法、はじめはうぜぇとか思ってましたけど慣れると便利なんですね・・・。まぁそもそもの問題はG+でつながってる人が少なすぎる事なので、移行してくれればやるけどそうでないならつかわないかもなぁというところ。

Uploader

さて本題。
個人的な目的の為に画像アップローダーを作りました。一応完成図したのはこんな感じ。スクリーンショット_2013-05-21_13.38.44その辺にあるのを鯖に入れようと思いもしたんですが、結構自分が欲しいと思ってるものがなかったのと、いい加減一度DBと心を触れ合わせないとなぁと思ってたから作った感じですかね。作りたい欲もあった。

自分が欲しかった機能は

  • 少数ユーザーのみがログインでき、閲覧アップロードができる、誰がアップしたかわかる
  • ドラッグアンドドロップでアップロードすいすい
  • 開いた瞬間とりあえず今相手に見せたい画像が表示されている

なんかうまく言い表せないけどこんな感じ。
状況としては、Twitterにアップするにはちょっと人目につきすぎるとか、Google+はそもそもやってないとかの現状があって、そういう微妙な部分に対応できるアップローダーを作りたかった。俺用のな！現在は一緒にVCやってる人たち用に公開している感じ。

完成してみて

まだバグが残ってたり、UI上の問題（だと思われる部分）が残ってるんだけど、使ってみてかなりしっくりしたものができたと思ってる。そりゃ、自分用に作ったんだから希望通りにならないといけないとは思うんだけどｗ使ってくれる人（2,3人）からの評価も悪く無いと勝手に思ってる。悪くないよね・・・？ｗ
あ、上のスクリーンショット、僕の画像ばかりなのはダミーを表示してるからですよ？？？？ｗ 他の人の画像は一応許可とらんと非公開にしてる意味がないので・・・！ 一応他にもアップする人いるんだよ！

んでまぁ、もうちょっとデザインやることあるかなぁと思ったんだけど、いざ画像を並べてみると結構綺麗に見えてしまって。ヘッダー部分も仮ってレベルでとりあえず作ったものをそのまま流用しちゃってて・・・。でも最低限見られるというかシンプルというか。ちょっと殺風景かもしれないけど。

作ってる時

まず今回はPHPさんにボコボコにされた感じですね。
なんとなく覚えてる範囲で、どんな感じに作ったか（つまづきまくって時間がかかったか）書いていきます。

  1. Twitterでログインできるサービスを作る。
    ドットインストールさんを利用して作ったのですが、ログインに使うPHPのCordbirdがすでに別物になってて躓く。動画見ながらだとできなくてGithub見たらすぐ動くという、あっち見てやるべきだね・・・。
  2. アップしたファイルをログインユーザーのみが公開できるようにする
    ApacheのModを使ってやってる。Apacheの罠に引っかかり（Pathの指定方法）1日丸々使った気がする、アホ
  3. ドラッグアンドドロップでアップロードできるようにする
    いろいろ試してどこかからコードをリスペクト。
  4. 画像をリサイズできるようにする
    なんだっけPHPのWideImageっていうものを使ってリサイズ、クリッピングをかけてる。結構便利。でもコレも使ってみる1日目とちゃんと配置する2日目があった。
  5. 画像管理用のDBを作る
    MySQLってWordpressを入れる時くらいしかつかってなかったからますSQL文を書くのに四苦八苦。あとPDO。
  6. 削除とかそのへんもろもろ
    削除機能をつける、まぁ上のDB周りの応用だったので楽ちん。
  7. デザイン
    並べたらかっこよくなった！！！！！

だいたいこんな感じでしょうか。でも今回はいろいろ助言も頂きましたが、かなりの部分を一人で作れた事にはもう満足感がすごい。

ただし、すげー時間かかっちゃったのでこのへんはなんとかしたいなぁ。いや、次はいける・・・！気がする。

そしてPHPちゃんと結構仲良く慣れた気がします。でもまだJavaScript書いてる時のほうが楽しいのですけど・・・。あんなにPHPで書くとき苦労してたのに、Ajax的な部分を書くのはすんなりなのがぐぬぬと言わざるを得ない。PHP力が足りない。

サーバーサイドは別の言語も使ってみたいなぁ、Pythonとか。そういえばうちのVPSにはPython動かせるようにしてない気がする。なんか次作りたいものができたらPythonも視野に入れようそうしよう。

ってことで8割くらいかんせいして よかった 。

無料版FC2のWebサーバーで$.ajax()使って外部ファイル取得、表示させた時のメモ

どうもPCの前でGWを過ごしておりますりっくんですこんにちわ。予定が常に埋まっているわけではないのですよ、PCの前にいるって決めてた時間もまぁありますが・・・。

 

さて、ちょうど今、成蹊JOINT2012という大学1年生向けなDebate大会のWebページを作ってるのですが、その関係でFC2のサーバーを使ってます。そこで、更新履歴を各ページに表示させる時、すべてのページで更新させるのがめんどいので別ファイル作ってそこから呼び出そうとしたんですが・・・、多分FC2の仕様（主に広告関係）で上手くいかなかったみたいなのです。

次回またやらかすだろうなぁとか思うので一応メモ。まぁゴリ押しな気がしますけどｗ

 

続きを読む

jQueryでTwitterのWidgetを非同期更新する。

最近なんか充実した日々を過ごしておりますりっくんです学祭全くいかないけど！サークルやってないとね・・・、行く機会無いのよね・・・、友達ライブ出てたりするけどまぁうん。学祭にはいかないけど、昨日は（学祭中）図書館いって資料漁ってました。人全然いないのｗｗｗｗｗ　(‘A`)

 

なんでTwitterWidgetを非同期で表示とか

FEZなう！関係なんですけど、自分と同じ鯖のユーザーを表示できればそこで繋がりができるかなぁって思って、Postした時点で検索ワードを切り替えて、その鯖用のWidgetに更新できたらおもしろいなぁと思ったんで。

けど、あんまり資料が無くて、ついでに自分が色々わかってなくて結構時間食いました。Ust配信で色々な方に助言頂きましたが、なんとかできたのでそのコード上げておきます。もしなんかサイト作るときに、あー、このボタン押したときにWidgetが出ればなぁーーー！！みたいな事したくなったら思い出してください＞＜

参考：Audia ツイッター・ウィジェットの非同期通信ダウンロード

コードとか

今回はFEZなう！で

  1. Postボタンをクリックした時に
  2. サーバーの情報を持ってきて
  3. サーチワードを切り替えてWidgetを再表示

みたいな感じにしようと思っていじってました。

$(document).ready(function() {
	// Twitterに投げるボタンのid
	$('a#twitterpost').click(function(){
		  $.getScript('http://widgets.twimg.com/j/2/widget.js', function() {
		  	
		  		// selectされてるサーバーのvalueを取得 A鯖なら”A”が入っている
		  		var world = $("select.world").val();
		  		// サーチワード用にチェンジ
				var searchword = '#' + world + 'feznow';
				// 鯖のタイトル変えたかったのでそこも変数に
				var changedtitle = 'FEZなう！ ' + world + '鯖Twitterユーザー'; 
		  	
		    new TWTR.Widget({version : 2,
		    	id : 'twitter-block', // デフォルトでは存在し無いけど、id指定すればそこに突っ込めるみたい
		   		type : 'search',
				search : searchword,
				interval : 2000,
				title : changedtitle,
				subject : '',
				width : 200,
				height : 380,
				theme : {
					shell : {
						background : '#1f1f1f',
						color : '#ffffff'
					},
					tweets : {
						background : '#ffffff',
						color : '#2f2f2f',
						links : '#e0762f'
					}
				},
				features : {
					scrollbar : false,
					loop : true,
					live : true,
					hashtags : true,
					timestamp : false,
					avatars : true,
					toptweets : true,
					behavior : ''
				}}).render().start();
		});
	});
});

ちなみに、id:twitter-blockにはすでに別のTwitterWidgetが入ってます(サイズとかは一緒で、.clickイベントではなく(document).readyのタイミングで突っ込んでる)。

うむ、.getScript使ってやる感じでし。なるほど、始めは.load使ってidにデータ<script>内突っ込めば動かないかなぁとか思ったんですが、上手くいかなかったんですよね。

 

あと、今の段階ではあまり鯖ハッシュタグ使ってる人がいないのでぜんぜん機能してないです（笑）　あとある程度固定化されてるからあんま関係ないのかもなぁと。ユーザー数増えたら面白くなると思うんだけど宣伝とかよくわからん・・・！まぁその辺はおいおい。

A鯖ユーザーだよ～みたいな画像をfadeで表示させようかなぁとは思ってます。あとはリアルタイムに今PostがあったFEZなう！を表示できたら最高・・・！ハッシュタグで華麗に実装できないものか。

 

まぁなんにせよ一つ関門突破できてよかった。ってことで終わりです・ｘ・

続・jQueryでUserTimeline拾ってこれたメモ

あの花は近年稀に見る素敵な最終回だった、普通に泣いてたりっくんですこんばんわ。なんという時間、今日は眠れないフラグ、明日もなんだけど。

jQueryでTwitterのUserTimeline取得続き

前回の日記のように、ちょっとjQueryをいろいろいじってますが、そもそもプログラミング経験がほぼ0なのでいろいろなところでつまずいてます。

とりあえず前回のコードのままだと最新Tweet1個しか持ってこれないので（一応コピペで対応できるけど）forつかっていっぱい出せたらなぁって言う。

 

Nの人ありがとう、細かいところ修正しておきましたおｗ

jQueryというかjs

/*
 * get UserTimeline
 */
		$(function(){
			$.getJSON("http://twitter.com/statuses/user_timeline/Ricckn.json?callback=?", function(data) {
			tweets = "";
			for(i = 0; i < 3; i++) {
				tweets += "" + data[i].text + "
";
			};
			$("#TweetList").html(tweets);
			});
		});

ってことでこんな感じに。for(i = 0; i < 3; i++)ここの数を変えていくつまで取得するか変える感じ。

brで改行してるからmarginとか整えるといいのかな？できないね、よく考えてなかった(‘A`)

動いてるのはここのサイトで確認できます。私のjQueryメモ帳

http://remicck.net/jQuery

なんかIE8には嫌われてるんだよね、9は大丈夫なんだけど、まじ意味不明。

 

ってことでこの後、サッカーを見つつ本を読んで、眠れるかなぁって所です。ぐぬぬ・・・

 

 

jQueryでUserTimeline拾ってこれたメモ

調べる機会があったのと、これ見てjQuery勉強するためにメモ。

 

<html>
	<head>
	<title>test</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">
	$.getJSON("http://twitter.com/statuses/user_timeline/Ricckn.json?callback=?", function(data) {
     $("#LastTweet").html(data[0].text);
});
	</script>
	<!-- Riccknの部分を任意のユーザー名に -->
	</head>
	<body>
	<div id="LastTweet"></div>
	</body>
</html>

 

 

超簡易だけど、これ使ったらいろいろ面白いこと出来るかもね。
サンプル：http://remicck.net/getUserTimeline.html

まるまる参考にしたのはこちら：Twitterの最新ツイートを、jQuery と PHP で取得する2つの方法

 

 

jQueryでスライド表示してみた

jQueryおもしろいじゃない。
当Blogの右側のカラムに、Aboutmeというウィジェットが配置されているのですが、そこの more ボタンを押してみてください。

とまぁそんな感じでスライドするように出来ました。

<span class="bold">name</span>:Ricck(21)</br>
<span class="bold">occupation</span>:College Student</br>
(economics)</br>
<span class="bold">favorite</span>:</br>
FPS,FEZ:Aエル</br>
Camera:D80</br>
Android,Xperia</br>
</br>
<!-- ここから隠す -->
<div id="aboutmemore">
	<span class="bold">Server</span>(http,ftp,mumble,etc)</br>
	<span class="bold">Web</span>(html css js jQuery)</br>
	<span class="bold">PC</span>(Corei7,HD5850)</br></br>
	<span class="bold">Link</span></br>
	<a href="http://www.facebook.com/profile.php?id=100001176943922">Facebook</a></br>
	<a href="http://mixi.jp/show_profile.pl?id=24333775">mixi</a></br>
	<a href="http://fesns.com/?m=pc&a=page_f_home&target_c_member_id=50928">FESNS</a></br>
	<a href="http://fez-sns.jp/?m=pc&a=page_f_home&target_c_member_id=1932">FEZ-SNS</a></br>
	<a href="http://steamcommunity.com/id/ricckn">Steam</a></br>
</div>
<!-- ここまで -->
<a id="aboutmeclick" style="position: relative; margin-left: 100px;">
	<img src="//www.remicck.net/wp-content/themes/wp.vicuna/skins/style-mono/images/common/more.png">
</a>

んでjQuery

$(document).ready(function(){
    $("#aboutmemore").hide()
    $("#aboutmeclick").click(function(){
        $("#aboutmemore").slideToggle();
    });
});

初め躓いたのは一行目の

$(document).ready(function(){

が無くてまったく動かなかったこと。実はまだこれがどういうものか正確に把握してないんだけど、サンプルコードを見る限りこれ必要そうだったから入れておいた・・・。

#aboutmemoreを隠しておいて、#aboutmeclick(moreの画像のaタグに付与しておいて)をクリックすると、スライドして出てくる、っと。

とりあえず動く部分ができたから中のHTMLはもう少しこってもいいかもしれない。
問題はなんかロードしてる段階でみえちゃう場合があるんだよね。隠れるまで時間がかかる的な。これどうやって対処したらいいかまったくわからん。高速化的な部分になるのだろうか、謎。

まぁそこは後々。