2010年4月 アーカイブリスト

« 2010年3月 2010年5月 »  

2010 Apr 29

2010_0429_01.jpg

最近実家の近くにオープンしたスイーツのお店
『FAVORI(ファボリ)』に行ってきました(´∀`)

ここは、北九州のお土産でグーグル先生にお願いしたときに、
ココの抹茶ロールケーキの存在を教えてもらったので、試食目的で購入~♪

うーん。
丁度いい甘さが、また美味しす(*´Д`*)

でも、ロールケーキよりもバームクーヘンがメインっぽい感じなので、
今度いったときは、バームクーヘンでも(´ー`)

あーお土産は、ここのキャラメルバームクーヘンにしましたъ(`ー゜)


◎sweets shop FAVORI(ファボリ)

福岡県北九州市小倉南区上曽根新町11-22
TEL:473-0023
10:00~19:00 火曜日休み

HP:http://www.sweets-favori.com/

このエントリーをはてなブックマークに追加    
TAG CLOUD :

2010年4月29日 21:22に投稿されたエントリーページです。

2010 Apr 27

前記事のつづきになります(´・ω・`)

HTML5の説明だけで長くなったので一度切って、今度は「CSS3」になって出来るようになった事とか、講習会で聞いてきた内容をご紹介(´∀`)
相変わらず IEだけは非対応なので、その辺りはご了承くださいましー。
それと、まだ現状CSS3は開発段階なので、

Safari、Google Chrome では 「-webkit-」
Firefox では 「-moz-」
Opera では 「-o-」

の指定をCSSの指定箇所の頭部分に記入しないと表現できないモノばかりです。
早速試してみよう!と思ってる方は、この3つのコードをそれぞれ用意した方がいいかもです。

ちなみに、HTML5で生成したモノでしかCSS3の表現できない。という事は無いです。

■border-radius

簡単にいうと、「border」「background」等の指定箇所に入力することによって、丸角が作れます!
やっと画像とか用意しなくても、気軽に丸角を作りたい放題ですYO(/ω\)
table時代からWEB作成していた方には、かなりの朗報じゃないのかな。

まずは、分かりやすい参考サイトさんをご紹介

◎参考サイト様:CSS Border Radius
http://border-radius.com/

このページの四隅に任意に数字を入力すると、
その数字分だけ角丸になり、ページ中央にそのソースコードが表示されます(´・ω・`)

div {
-moz-border-radius: 12px; /* FireFox+ */
-webkit-border-radius: 12px; /* Saf3+, Chrome */
border-radius: 12px; /* Opera 10.5, IE 9 */
}

ソースコードの例はこんな感じです。

またIE6、7なら、専用のJavaScriptを設置することで同じような事ができるので、
IE環境のみの方は試してみてください。

◎参考サイト様:border-radius.js - JavaScript ライブラリー - HTML5.JP
http://www.html5.jp/library/border-radius.html

■text-shadow

今度は、指定した文字にドロップシャドウを入れることが出来るようになります(*'-')

◎参考サイト様:Pure CSS Letterpress Effect
http://line25.com/wp-content/uploads/2009/letterpress/demo/demo.html

こちらもわざわざ画像文字にしなくても、ドロップシャドウを入れられるので、
かなりデザイン性は向上しますね('Д')b

で、ソースコードの例はこんな感じ。

□テキストタイプの指定
h2 { text-shadow: 0px 2px 3px #555; }

□ボックスタイプの指定
div {
-moz-box-shadow: 0px 0px 4px #ffffff; /* FireFox3.5+ */
-webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */
}

数値の意味合いは、

◯◯-shadow:(右方向へ影移動距離)(下方向へ影移動距離)(影をぼかす範囲)(影の色)

になります。

で、カンマ区切りでさらに指定すると、複数のシャドウ入れることも出来ます。

h3 { text-shadow: 3px -3px , yellow -3px 3px 2px, 3px 3px red}

その場合、一番左の指定が一番上になって、下に重なっていく指定になるそうです。

■Media Queries

まずは、参考サイトを見てください!

◎参考サイト様:Vincent van Gogh (Media Queries example page || Media Queries の事例 )
http://people.opera.com/danield/css3/vangogh/

ゴッホの絵が載ってるサイトなのですがー
このサイトを表示させて、ブラウザの右下をドラッグして大きさを縮小してみてくてください

!(´・ω・`)

な、なんと、実はこのサイト、
iPadとiPhone用のモニターサイズに合わせてデザインが切り替わるんですしおすし!('Д')

CSSの「media」指定には、 handheld, print, screen の指定がもともとあって、
その延長線で、Media Queriesという条件付きのCSSをつかって、ページのデザインをかえちゃおーって感じです。

まずは、IPadとかの画面サイズですがー

iPadサイズ:768 x 1024
iPhoneサイズ:480 x 800
テレビサイズ(Wiiのオペラ等):横幅 800

で、
これに対応するMedia Queriesの書き方として、

□HTMLソース内に直接記入
<style type="text/css" media="screen and (max-width: 480px), screen and (max-device-width: 480px)">
article {
width:240px;
}
</style>

□外部CSSに記入
@media screen and (max-device-width: 480px), screen and (max-width: 480px) {
article {
width:240px;
}
}

こんな感じで、各サイズごとに @media指定作っていく感じです。

コレが出来たら、わざわざプラットフォームごとにHTMLファイルを用意して...
とか小難しい事をしなくて済むので、かなり良いプログラムなのですが!
全部のプラットフォームでサポートされてる訳ではないので、(とくにIE環境)
これからですかね...

あとは講演ないでは、まだまだ開発段階のもので、

■transition
アニメーションが作れます!

◎参考サイト様:css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた - かちびと.net
http://kachibito.net/web-design/css3-transition-sample.html

■@font-face
サーバ上にフォントファイルを置いて、それを呼び出すことでPC内に無くても特殊フォントで閲覧できる。

◎参考サイト様:CSS3 「gradient」と「@font-face」
http://ghostpia.com/sample/wft-makiba/

■transition
指定箇所をありえない形に!

◎参考サイト様:css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた - かちびと.net
http://kachibito.net/web-design/css3-transform-sample.html

■gradient
ついに、グラデーションもCSSで可能に!

◎参考サイト様:CSS3 グラデーション(gradient)の指定方法 | CSS Lecture
http://www.css-lecture.com/log/css3/css3-gradient.html

以上でっす。
こんな感じのものを講演内で、実際に手打ちで行ってもらったものをみてました(´∀`)
次回があるのなら、また行きたいなーと。

今回の記事を作る上で、いろいろ調べてみたら、結構「HTML5」「CSS3」の記事を扱ってるサイトが多かったので相当遅れてるなーと思いましわ(ノД`)

-おまけ-

帰りの古賀インターで、妹のおみやげに、熊本限定でこぽんのリラックマ(σ ̄ー ̄)σ

2010_0427_01.jpg

なぜ熊本限定がここに...(笑)

このエントリーをはてなブックマークに追加    
TAG CLOUD :

2010年4月27日 21:40に投稿されたエントリーページです。

2010 Apr 26

先週末、福岡で開催されたHTML5の講演会に参加してきました(´・ω・`)
CSS3の情報もあるみたいだったので(こっちも本命)、かなりwktk状態。

で、講演は、6時間ぐらいだったのですが、グーグルの人とかオペラの人とか、CSS3開発スタッフの外国人の方とかかなり聴きごたえがあって楽しかったです(*'-')

で、まだHTML5ってなんなの...
っていうレベルの方もいると思いますので、
講演の中で猫が猫なりに解釈した事を、掻い摘んでダラダラと流しておきますので、
興味のある方は見てあげてください(´д`)
メンドイ人は、外部リンククリックするだけでも楽しめるかも(笑)

まずはHTML5について!
どうたらこうたら〜ってウンチク語ってもわかりにくいだけなので、まー簡単に(笑)

現在主流のXHTML1.1の次にあたるウェブサイトにおける構成プログラム(書き方って言い方がわかりやすい?)

で、どんな事ができるのかっていいますと...

『動画や音声ファイルをFlash、SWFプレイヤープログラムを入れずに、そのままタグ打ちだけで表示が可能』

たぶん、これがメイン(笑)

IEはまだ非対応なんですけど、「Canvas」というJavaScriptで構成されているお絵かきプログラムで、HTML上でFLASHみたいな動画ファイルを作成する事が可能になってます。
Canvasでの作成事例のサイトさんの中でちょっと面白そうなものをご紹介〜♪
※FireFox3.6.3以上、Safari4以上、Google Chrome推奨。IEは非対応です。

◎Canvas例:ブラウザ全体でお絵かき(Harmony - Procedural drawing tool)
http://mrdoob.com/projects/harmony/

◎Canvas例:ツイッターコメント表示ムービー(HTML5 Canvas Experiment « IO 9elements)
http://9elements.com/io/projects/html5/canvas/

◎Canvas例:360°テトリス
http://www.benjoffe.com/code/games/torus/

◎Canvas例:3Dゲームっぽいもの(笑)(www.benjoffe.com | Canvascape)
http://www.benjoffe.com/code/demos/canvascape/

これ全部Flashではないんですよね。うーむ、すごい!

で、手打ちでいままで作ってきた人には朗報で

『構成ソース部分が、すごく簡単になります』

「DOCTYPE宣言」で例をあげると、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

こんな感じで、1行目に長くいれますよね。
こんなの暗記してたら、無駄にすごいんですが...(笑)

HTML5では、

<!DOCTYPE html>

になります!簡単でしょ(笑)

それに、現在の書き方でXHTML形式で作られてる方が多いと思うのですけど、
これのXHTMLとHTMLが組み合わさって、文章構造を明確にしつつ、よりビジュアル的に表現が可能なのがHTML5のソース構造かなって理解してます(;´ρ`)(たぶん間違ってないハズ!(笑

その他のメリットとして細かいことをいうと、

・SVGファイル(ベクター形式)が表現できる。
・クロスドキュメントが可能。(異なるウィンドウ間でメッセージの送受信を行う事が出来る)

とかかな...。
SVGファイル復活で結構楽しそうですけどね!

また3DゲームもHTML上で遊べたり、

◎Google開発者が「Quake II」をHTML5に移植 ブラウザでプレイ可能に - ITmedia News
http://www.itmedia.co.jp/news/articles/1004/06/news038.html

まだまだ開発中みたいですけどね。

で、なかなかすごいHTML5なんですけど...

マイクロソフトのIEのみ非対応です(´・ω・`)

具体的に言うと、現在開発中のIE9で一部対応するとはいってますが、
IE9をインストールできるのが「Vista」以降のOSのみとか...(;°ロ°)

会場にグーグルとオペラの人が来てたのですが、マイクロソフトにこれらの機能の事を伝えても、対応するかしないかとかはノーコメントみたいなので、まったくもって開発状況がわかってないとか言ってたな〜。頭抱えてたし(;´ρ`)
ブラウザのシェア率はトップなので、なんとか対応してほしいところ。

まー、Google Chrome、Opera、FireFox、Safariはほぼ対応済みなんですけどね。
気になる方は、こちらで楽しんでもらえればと思います(/ω\)

猫が理解したHTML5はこんな所です(笑)

次回は、続きにあたる「css3」ことでもご紹介する予定です(´∀`)
こっちもスゴイですよ!

参考サイト様:
◎HTML5.JP - 次世代HTML標準 HTML5情報サイト
http://www.html5.jp/

このエントリーをはてなブックマークに追加    
TAG CLOUD :

2010年4月26日 22:41に投稿されたエントリーページです。

2010 Apr 15

ツイッターを利用しているんだけど、どうもハッシュタグが使えない...
っていう症状が起きてないでしょうか?('Д')

これは、ハッシュタグ自体を検索したときに、
自分の書いた記事がひっかからないとかで、分かるんですけど。

何故か猫もいつの間になってました(ノД`)

「TweetMap」や、会社で説明していたときに、自分のつぶやきがツイッター内での検索でひっかからないので、おかしいなーとは思っていたのですけどね...

どうも、現在のアカウントがスパム扱いになってるっぽいとの情報(;´ρ`)

って事で、
解決方法を求めてグーグル先生と相談してみたら...

...

ハッシュタグを作った人をフォローすると、使えるようになるだとか......

ツイッター制作チーム(英語サイト)でもう一度アカウント登録すれば、使えるようになるとか...

何かのツールをインストールすると、使えるようになるだとか......

どこかの登録サイトにユーザー登録すると使えるようになるだとか......

...

なんか色々出たので、
片っぱしから全部やってみたのですが!

まったく使えやしないんだけどーーー!!ヽ(;´Д`)ノ ksg

むむーー。

で、グーグル先生と再相談した結果、見つけたページがこちら('Д')

◎検索に反映されなかったTwitterアカウントが復旧 - オレンジ!
http://orangeorange.jp/archives/7351

オレンジ!さんの記事を意訳するとー
どうもツイッターのサポートに直接メールすると、スパムフィルタを解除してもらえるらしい。

ということで、

『カスタマーサポート(support@twitter.jp)』へ、直接メールの投込みじゃーーー(ノ ゜Д゜)ノ ==== ┻━━┻

メールの本文は、そのままオレンジ!さんの内容で名前の所だけ変更して送りました(笑)

そのあと、すぐメールプログラムから返事がきたのですけど、
これはお問合せに関する定型文みたいなものだったので、
ちょっと待ってたんですけど、ツイッターの中の人か返事がこない......

で、返事がこないまま、現在上手く使えています(笑)
まーいいか...(´・ω・`)

まず自分の書いたつぶやきが、検索できるのか!?、ハッシュタグが使えるのか!?を調べて、ダメだったら、この方法で解除してみてくださーいヽ(´ー`)ノ

良いツイッターライフを!('Д')b

※2010.0922追記

この方法を行った後でも、ハッシュタグがTL上に反映されないことがあります(´Д`;)ヾ

ハッシュタグ自体、運営の方ではまだ「おまけ機能」として位置づけで、正式にサービスを行ってるわけではないので、サーバの負荷の関係で反映されない事があるといってみるみたいです。

いまの段階では、反映されたラッキー程度の認識で良いかもですね(´―`)

このエントリーをはてなブックマークに追加    
TAG CLOUD :

2010年4月15日 22:31に投稿されたエントリーページです。

2010 Apr 15

こんばんは。結希猫です( ゜д゜)ノ

前々から社長に言われてたミッションで、
会社用のツイッターアカウントに、なんかいい感じのフォロー先をみつけてくれ!と言われてたので、
カテゴリー別で分かれてるツイッターアカウント検索サイト『twinavi(ついなび)』の方で、
「web」とか「インターネットメディア」それっぽいワードで、登録してる方を検索検索...っと。

まー何人か個人的にも興味がある情報を発信してる方がいたので、
何人かピックアップしてみたのですけど、
その中に、どうもブログ記事のタイトルとその記事のURLを短縮して送ってる方がいるんですよね...。

これ。
うちのMTでも、お客先のCMSでも、新規記事を作成したと同時にツイッターへ書き込みが可能になったり出来るのかな。と思って、早速プラグインを検索わふー('Д')

...

すぐ見つかりました!

◎エムロジック放課後プロジェクト - PostToTwitter
http://labs.m-logic.jp/cat2/posttotwitter/

※MT4.0以上でのみ動作。

導入方法も、pluginsフォルダに指定のフォルダをアップロードして、
MTの設定画面のプラグインページより、

2010_0415_01.jpg

こんな感じで設定は大丈夫です。

『XML-RPC newPostメソッドを無視する場合にチェック』の項目に関しては、
小粋さんのところで、「ecto(ソフト名)から投稿した際に、異なるURLが連続投稿されるのを回避するための設定」ということらしいでの、該当のソフトを使用してないようでしたら、あえてチェックする必要ないかも。

あとは、作成した記事を公開するときに
自動でツイッターへ書き込みしてくれるので連動が楽々(*´Д`*)

うーん。
MT入れてるところのクライアントにも簡単導入できるしー(´・ω・`)
なかなかグッドなプラグインです。

興味がある方は是非是非導入してみてくださいマッシュ!

◎エムロジック放課後プロジェクト - PostToTwitter
http://labs.m-logic.jp/cat2/posttotwitter/

2010 Apr 13

ツイッター上で情報がはいったので、こっちでも紹介〜♪

Keyの新作というより、リトバスのファンディスクかな?
「クドわふたー」が2010年6月25日発売されるそうです。わふーヽ(´ー`)ノ

2010_0413_01.jpg

で、そのオープニングムービーが、「YouTube」と「ニコニコ」に上がってるらしいんですけど、
ニコニコ」は会員制なので、あえてYouTubeを掲載してみました。

さーー見てみるのだ('Д')b

ぶ。

こ、こいつは...

最初にいっておくことがある!

クド好きな人に申し訳ねぇぇぇーーー!!!ヽ(;´Д`)ノ

う、歌がひどすぎるYO!!(;°ロ°)

うーむ。クド好きにはたまらんのだろうか......(-_-;)
ね、猫には、流し聞いてるだけで痙攣が...ガタブルしてきたYO!

このあたりは、ナオくんに聞いてみるか(笑)
たぶん、予約してそうな予感(笑)

■クドわふたー|Key Official HomePage
http://key.visualarts.gr.jp/kudo/index.html

いま気がついたんだけど、このゲーム18禁なのね...(;´ρ`)

うーん。

良いのか?ヽ(;・ー・)ノ(謎)

2010 Apr 13

2010_0413_01.jpg

FF11で収録されているBGMのベスト盤の発売にさきがけて、
その収録内容をユーザーにアンケートを取って、上位人気の曲をいれちゃおーって企画があって、
まーその結果発表がありました!

そういえば、アンケート応募の事、ここで取り上げなかったな......(;´ρ`)

公式サイトはこちらですー( ゜д゜)ノ

◎ファイナルファンタジーXI 楽曲投票 | SQUARE ENIX MEMBERS
http://member.square-enix.com/jp/special/music/ff11/

で、人気投票のランキングはこんな感じなのですがーー

2010_0413_02.jpg

予想通り、やっぱり1位は「Ragnarok」かー...

って
FF11をプレイしてない人には、さっぱりじゃまいか...(´・ω・`)

というか、現役プレイヤーなんだけど...
タイトル名を聞いてもサッパリだぜ(;´ρ`)

という方々ために(笑)
動画サイトのリンクを付けたものを用意してみました!

お暇なー時にでも聞いてみてくだされー(*'-')
作業用BGMの代わりにならないでもないかな(苦笑)短いから微妙かー

■1位 Ragnarok ... アレキサンダー戦BGM

うーん、一言で神曲。
というかこれ以上にないぐらいカッコ良すぎるわーヽ(`Д´)ノ
FFらしいボスの曲です(笑)

今回のバージョンアップで、アレキサンダー取得クエが追加されて
BC戦でこの曲が流れて、おもわず感嘆してもうたのYO('Д')

■2位 Fighters of the Crystal ... AA戦BGM

AA戦の曲ですね。
猫は「神威クエ」でまとめてクリアしちゃったので、本家のAA戦でこれが流れていたかどうかは不明...
まーきっと流れてるはず(笑)

■3位 Awakening ... 闇王のテーマ、裏ザルカBGM

FF11プレイヤーにはおなじみの曲ですね!
裏LSに所属してたら、しょっちゅう聞く機会があるハズ(笑)
これも神曲。

■4位 Distant Worlds ... プロマシアM ED

下記の動画はネタバレですけど、ニコニコにEDそのままの動画が上がってたのでチョイスしました。
プロMで出てきたNPCがたくさん出てくるので、未クリアの人はサッパリかもしれないですけど、
興味があれば是非是非ー♪
FF11のエンディングーって言える壮大な曲です(*'-')

■6位 Clash of Standards

アルタナエリアのPT時の戦闘BGMでっす。
キーのアップテンポが激しくて、これもカッコいい...('Д')ごくり

他に、ロンフォやカザムとかあるんですけど、こちらはカットで(笑)
どっちもいい曲ですけどね(*'-')

で、
ベストアルバム自体のページはこちら( ゜д゜)ノ

◎公式サイト:FINAL FANTASY XI 8th Anniversary -Memories of Dusk and Dawn
http://www.square-enix.co.jp/music/sem/page/ff11_8th_cd/

ここでも一部のBGMを視聴出来るので興味がある方は是非是非チェックを!(/ω\)
引退した方でも懐かしい曲が目白押しマチガイなし('Д')b

これは買いてえ...

2010 Apr 05

結希猫です。お久しぶりデッス(;´ρ`)
いやはや...今年は多忙すぎて地獄の様な日々を送ってますYO_| ̄|○

まだクライアントでの調整の性で納期が伸びてる仕事があったりするので、これさえ終わらせて。
休日出勤分の代休を固めてプチ連休でも作ろうかなっと企み中だったりします(=ω=)

それはさておき、
2月に、にょろん主催:(故)お子様プリン&(絶)無限の翼合同飲み会+にょろん引越しお祝いと称したお泊り会が催されました(=ω=)

なんかほとんど食べの会でしたけどね(笑)
いやいや...本当に久々にあったので、普通に楽しめました!ヽ(´ー`)ノ

にょろん、ナオくん、御加月くんサンクス!
また近々集まりましょうぜヽ(`Д´)ノ

で、こちらは戦利品(笑)

DSiLLですね('Д')b
香椎のヤマダ電機に寄ったとき、ゼルダとカバーのセット付きで、普通に買うのより1,000円+だったので、思わず購入(/ω\)
DSは持ってたけどDSiは持ってなかったので、丁度良かったかなっていうのが半分。

あと半分はコレ。

セブンスドラゴンーこいつがプレイしたかったのYO('Д')b
ということで、これも購入(笑)

LLは、旧DSの液晶画面をそのままデカくしただけなので、
まー荒いんですけどね...(笑)

でもいいなー。
帰りの電車内でプレイしててあまりにも画面がデカくて
見られまくりだったんですけどね(;´ρ`)

あーー!
そういえばにょろくんに引越し祝いの物まだ買ってなかった_| ̄|○川
買いたいものは決めてるので、急ぐか...

2010 Apr 05

多忙のために、掲載が遅れました(´;ω;`)
まだ知らないーって方だけに!

ファイナルファンタジーXIV公式サイトの方で新しい情報公開中です(*'-')ノ

2010_0405_01.jpg

◎ファイナルファンタジーXIV 公式サイト
http://jp.finalfantasyxiv.com/

細かい種族の紹介かな...。
今回は、同じ種族でも2種類の呼び方があるみたい。

2010_0405_02.jpg

・ヒューラン → ミッドランダー or ハイランダー
・ララフェル → プレーンフォーク or デューンフォーク
・ミコッテ → サンシーカー or ムーンキーパー
・エレゼン → フォレスター or シェーダー
・ルガディン → ゼーヴォルフ or ローエンガルデ

画像はミコッテのみなので、気になる人は公式へ(^x^)

この選択って見た目だけ違うのかな?それとも能力も?
うーん。まだ謎だらけ(笑)
見た目だけだと寂しいので装備とか能力も差があると、他のプレイヤーとの違いが出てくるから面白みがありそうなんですけどねー。

それと、WEBページで流れてるファイナルファンタジーのテーマのFF14バージョン(?)が、カッコヨス!
パッケージ版に組み込まれるのかな。

それと、最新情報トレーラー用サイトもYOUTUBE内にオープン!('Д')

2010_0405_03.jpg

◎ファイナルファンタジーXIV 公式チャンネル
http://www.youtube.com/finalfantasyxiv

おお!
かなり詳細に世界観が見れるーーーヽ(´ー`)ノ

...

ちょっっっっ!!

ララフェルの走り方がヘンすぎるぞ!!(;°ロ°)

高速で小走りしてるから...うーん。ロボットみたいだな...(;´ρ`)

それに、なんか人の肌の質感とかのっぺりしてるような...

もうちょっと修正がかかるのかの。

このエントリーをはてなブックマークに追加    
TAG CLOUD :

2010年4月 5日 21:14に投稿されたエントリーページです。

Site Search

Tag Cloud


2002.6.6 count start