ラベル google の投稿を表示しています。 すべての投稿を表示

Web CodeEdita進捗

現在開発しているWebCodeEditaの進捗と戦略をここに記して行きたい。



Blogでの報告は始めてになるけど、Google+見ている人はもう知っているかと思われる。
多分何人かはGoogleDrive等で詳細は把握していると思う。

Google Chromeのデベロッパーツールの使い方

皆さんはGoogle Chromeのデベロッパーツールを使った事はあるでしょうか??
今更記事にするのも遅い気がしますが、Web開発やプログラマーなら一度は使った事のあるツールだと思います。


今回まだ、Google Chromeのデベロッパーツールの使い方が分からなくて、
不便な生活をしている開発者のタマゴを対象にして書いて行きたいと思います。


Google Chromeデベロッパーツールとは?

最近のブラウザーには大体デベロッパーツールと言うのが付属されていますが、
私は基本的にGoogle Chromeのデベロッパーツールを利用しています。




私が個人的に気に入っている機能は、
  1. マウスで気になる要素を選択し、HTML/CSSソースを解析出来る
  2. JavaScriptのエラーまた、リンクエラーを発見出来る
  3. ページロード時に一番読み込みにかかったファイルを探せる
  4. 直接HTML/CSSの編集が出来る

この4つは一番気に入ってます。

上記画像では、タイトル部分を選択し、HTMLソースCSSソースを表示しています。


では試しにこれがとうなっているのか、
デベロッパーツールで調べてみましょうか。

Google Chromeを開き、デベロッパーツールを開きます。





虫眼鏡マークを押してから、ブラウザー上の要素をマウスで選択します。

するとその要素のHTML部分が表示されます。




HTMLの構造・CSSで定義されているスタイル等簡単に見る事が可能です。

また、セレクタも分かるので、
hoverや擬似セレクタでどの様なスタイルを定義しているのかも分かります。



この様にして上手くデベロッパーツールを使いこなせれば、
ブログのデザイン等を考えたりしながら実際に組むのも簡単です。

自分にとってのGoogle+

最近Macばかりいじって基本Windowsを開かなくなった ふっくんです。

今回は私がこよなく愛してるGoogle+の魅力をお伝えしたいと思います。
その前にこの記事では前提としてGoogleアカウントを持っている方を前提とします。




私が何故こんなにGoogle+が好きなのかと言うと、
第一として、クリエイティブな方が多いのが一番の理由かと思います。

私自身クリエイティブな事が好きで、
それらを話し合える、共有出来る事がとてもいいと思っています。
ただ今の話からするに、PCとかにあまり詳しくない方からすると無縁等と思うかもしれませんが、そうではありません。基本的に皆がPostするのは、日常系等、

Twitterでも見かける様な日常のハプニング等をPostしたり、ごちそうフォトを共有したり


個人的にGoogle+はとても居心地のいい所です。


Google+知識

今までTwitterとかやってたけど、Google+もやってみたいと言う方の為、
理解を整理する為にサークルは何なのか等を説明して行きます。

サークルとは?

サークルとはTwitterで言うフォロワーの事で、「サークルに追加」と言うのは貴方の作ったサークル内にユーザーを追加すると言う事になります。


サークルは複数作る事が可能で、サークルごとに共有出来ます。
例えばリア友だけに共有したいPostは、リア友サークルを作成し、リア友を追加します。
そこで、共有時に「共有」の中からリア友のサークルを選択するとそのサークル内のユーザーだけに共有されます。

サークルを上手く利用すれば、「この人には見られたいけど、この人達には見られたくない~」等の時にとても役立ちます。


ハングアウトとは?





ハングアウトはGoogle+のサークルメンバーとチャットやビデオ通話等でコミュニケーションを取る事の出来るツールです。これで特定の方と連絡を取ったりする事が出来ます。

もちろんサークルメンバー同士の通話等は無料です。






コミュニティ

最近のSNSでは減りつつあるコミュニティ機能がちゃんとGoogle+にもあります。

同じ趣味同士で情報を共有し、コメントし合う。これがコミュニティの定番ですよね

コミュニティは誰でも簡単に作成可能です


イベント


ユーザー同士でオフ会したり、飲み会等のイベントを作る事が出来ます。

参加・不参加等を選択する事により、参加するかしないかを決めれます。





その他「ページ」等もあります。
ページでは企業のPR等にも有効的に利用出来ます。



Google+にはこれよりももっと魅力的な機能が盛りだくさんです。
連写された写真があれば、自動的に動く画像GIF化したり、雪の写真があれば、静止画をGIF化して雪が降っている様に見せたり、その他色々

これで私がGoogle+が好きな理由はお分かり頂けただろうか?
どんなSNSよりも高機能かつ便利で楽しいSNSはGoogle+だけです。

是非まだGoogle+を初めてない方はこれを機会に初めてみてはどうでしょうか??

GoogleDriveは便利すぎる!!

最近GoogleDriveを使う事が多くなって来たので、実際使ってみて便利だな〜っと思った機能を、
今回は紹介して行きたいと思います。

私の中では、もうOfficeソフトなんて要りません。
このGoogleDriveで十分間に合いますし、そこらへんにあるOfficeソフトよりも高機能です。

ネット上にあるからこそ出来る機能が盛りだくさんです。




Google+ API入門

恐らくGoogle+APIを使った事ないけど使ってみたいと思う方は少なからず居るだろう。

ただGoogle+APIにはどんな機能があって、使い道はあるのか?? っと疑問に思う方も居ると思う。



私自身がこのGoogle+APIを使った感想を言うと、

「とても手軽に様々な情報を得る事が出来る」と言う事だ。



私は自分で言うのもおかしいですけど、「私はGoogle+が一番好きです。」






何故Google+APIを使い始めたのかと言うと、単に自分のサイト等で「最新情報」として自分のPOSTを取得して表示出来るのか? っと疑問に思ったので、実際に試してみると結構手軽に情報を得る事が出来たので、それから色々とGoogle+APIにハマり始めました。


一応私がやった事ある動作としては、


  1. 投稿を取得
  2. プロフィール情報を全て取得
  3. Google+POSTを検索
  4. Googleログイン
  5. Google+投稿

まだ使い始めて日が浅いので大した事はやった事ないのですが、一応5項目の方法を試した結果全て簡単に 使う事が出来たのでその簡単な使い方ガイドをしたいと思います。


ほほうボタン(汎用外部ページ用)が完成!!

やっと汎用外部ページ用のほほうボタンが完成しました。

今回はほほうボタンについて色々話して行きたいと思います。


ほほうボタンとは??


 ほほうボタンとは、以前私のプロフィールサイトのブログに埋め込んだ、評価ボタンで、Google+の+1ボタンの様に+1をしてそのページの評価を得る事が出来る素敵なボタンです。完全フリーのボタンなので、何処かのサイトへ登録する必要も無いです。


 「そのボタンの利点とは?」っと言う質問が寄せられると思いますが、ページの評価を得て"自己満足"する為のボタンであって特に意味を持ちませんが、これからボタンに色々な機能を追加してボタンブームにして行こうと思います。


Google遊び場 で遊んでみたw

今回GoogleのAPlを使った色々な物をGoogleが紹介しているので
遊んでみました。 結構面白いです。





さてさっそく遊んでみましょう!!

今回遊ぶのは、「ダイナミックフィードコントロール-垂直」で遊びましょう。!!!

まずサンプルコードをHTMLで表示しましょう。!!
次にそのコードを全てコピーしてテキストエディタで編集しましょう。
















これを見ているだけでワクワクしますね~ww

これプレビューすると以下の様になっています。
でもカスタムしたいですね~w
















じゃ~カスタムしてみますか!!



上記の様に書かれている部分のcssのリンクをブラウザーで開きましょう。

http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css






















このコードを全てコピーしてHTML上に貼ってカスタムが可能です。!!

カスタムすると以下の様にカスタムする事も可能です。




















他にも色々とカスタムする事が可能!!
レイアウトを変えれば横並びにする事も可能です。

ぜひ皆さんもGoogleの遊び場で遊んでみて下さい。

jsでRSSフィードを作る方法

最近僕は、自分のプロフィールサイトを作ろうと言う計画をしていて
そのサイトのコンテンツで重要なのがRSSでした。

なので色々とrssフィードを検索して調べたのですが
Flashを使ったrssフィードだったりして使い物になりません。
せっかくだからブログパーツを使わないで作りたいですよね?

でもいい情報を見つけたので皆さんにも紹介します。
(多分知っている方は、多いと思います。それかこれよりもいいのがあると思います。)


表示例...

こんな感じのリスト式で表示されます。
この場合記事のタイトルとリンクを取得されます。

google+の場合記事の一行目の字とリンクを取得します。
ご理解ください。

必要な物は、1つ
GoogleのAPlキーだけ
APlキー入手は、他の講座をご覧ください。




【ソース】

<script type="text/javascript" src=" "></script>//APlキーを"と"の間に記入
<script type="text/javascript">
<!--//
google.load("feeds", "1");
var entryArray = new Array();
var entryNum = 0;
function initialize() {
feedAdd("http://gplus.slfeed.net/RSS2/103883213408660487064", 2);
feedAdd("http://aquarzx2010.blogspot.com/feeds/posts/default", 1);//取得したいRSSのURL"と"内に記入
}
function feedAdd(rssUrl, boolNum) {
var feed = new google.feeds.Feed(rssUrl);
feed.setNumEntries(3);//一つのサイトのRSSを何個取得するか?デフォルトの場合3
feed.load(function(result) {
if (!result.error) {
for (var i = 0; i < result.feed.entries.length; i++) {
entryArray[entryNum] = result.feed.entries[i];
var date = new Date(result.feed.entries[i].publishedDate);
entryArray[entryNum].sortDate = ( date.getFullYear()*1000000 ) + ( (date.getMonth() + 1)*3600*32 ) + ( date.getDate()*3600 ) + ( date.getHours()*60 ) + date.getMinutes();
entryArray[entryNum].blogName = result.feed.title;
entryNum+=1;
}
}
if(boolNum==1){
feedOutput("feed", 100);//フィードの出力
}
});
}
function feedOutput(feedId, listNum){
var useFeed = "";
var useDate = "";
var container = document.getElementById(feedId);
entryArray = asort(entryArray, "sortDate");
if(listNum==100){//出力するリスト数
listNum = entryNum;
}
for (var i = 0; i < listNum; i++) {
var entry = entryArray[i];
var date = new Date(entry.publishedDate);
var m = date.getMonth() + 1;
if (m < 10) {m = "0" + m;}
var d = date.getDate();
if (d < 10) {d = "0" + d;}
var h = date.getHours();
if (h < 10) {h = "0" + h;}
var mn = date.getMinutes();
if (mn < 10) {mn = "0" + mn;}
useDate = m + "月" + d + "日";
useFeed += '<div style="float:left;width:120px;">'+ m + "/" + d + "(" + h + ':' + mn + ')' + '</div><div  style="float: left;width:400px;height:18px;overflow:hidden;"><a href="' + entry.link + '" target="_blank" title="' + entry.title + '【' + entry.blogName + '】">' + entry.title + '</a> <img src="http://b.hatena.ne.jp/entry/image/large/' + entry.link + '"></div><div style="float:right;width:150px;height:18px;overflow:hidden;">' + entry.blogName + '</div><br><hr size="1" />';
}
container.innerHTML = '<div>' + useFeed + '<div></div></div>';
}
function asort(myArray, key){
return myArray.sort ( function (b1, b2) { return b1[key] > b2[key] ? -1 : 1; } );
}
google.setOnLoadCallback(initialize);
//-->
</script>
<div style="height:300px; width:700px; overflow:auto;" id="feed">ロード中しばらく待たれ!</div>





このソースをコピペで使用してください。コメントが書かれている所だけを修正すれば
完了になります。

APlキーは、src=" ">の「"」と「"」の間に記入してください。
取得するRSSのURLは、
feedAdd(" ", 1)の「"」と「"」の間に記入してください。

これで準備完了
最後にロードメッセージを変えてみましょう。

ソースの最後にd="feed">ロード中しばらく待たれ!</div>があります。
そこの「ロード中しばらく待たれ!」を消して好みの字を書くだけです。
画像も表示出来るのでGIFのロード画像を使うのもいいですね♪

説明は、以上です。
どうですか?簡単ですか?出来ませんか?
もし出来ないのならコメントに書いてください。

以上です。

google+1周年記念!!

今日"2012年06月28日"で、[Google+]が1周年(1年)記念です。
この記念日にGoogleも新しいサービスを開始しました。
新しいサービスは、[イベント]機能が追加されより便利で面白い機能が追加されました。

今は、もうほとんどイベントの通知だらけです。

この記念日にまた新しい事が!!
【Google+ 1st AnniversaryGoogle+ 1st Anniversary】と言うサイトが
一周年記念アイコンの無料作成サービスを開始しました。

このサービスも加わってgoogle+がさらに盛り上がりました。
それも作成協力者達のほとんどが僕のサークルに居た事もびっくりしました。

みなさんもぜひアイコンの作成サービスを利用してみてください。


イベント

一周年記念アイコン展示保存会

- Copyright © I aim to creator. - Hatsune Miku - Powered by Blogger - Designed by Johanes Djogan -