日記 > HTML関連 カテゴリーリスト

2011 Jun 22

よく会社のウェブサイトなんかにアクセスすると、イメージ画像のスライドショーをよく見ますよねー(・ω・)

仕事の方でもよくFLASHで表現していたのですけど、準備に時間がかかってしまうので、ちょっと見直してみようーってことで、Ajaxで良いものないかな〜とグーグル先生に相談してみたらなかなか良さそうなJQueryプラグインを発見したので、自分のメモがてらにカキカキ。

JQueryプラグインはこちらを利用させていただきました(・ω・)ノ


(1)『jquery.cross-slide.min.js』ダウンロード

上記CrossSlideサイトのページ上部の「Download minified」部分より『jquery.cross-slide.min.js』をダウンロードします。

(2)『jquery.cross-slide.min.js』をの任意のフォルダに設置・呼び出し(今回は、jsフォルダ)

HTMLファイル側のヘッダー箇所に以下の構文を入力し外部ファイルとして読み出す
※jQueryのダウンロードはこちらから

<head>
<script type="text/JavaScript" src="ドメイン名/js/jquery-1.6.min.js"></script>
<script src="ドメイン名/js/jquery.cross-slide.min.js" type="text/javascript"></script>
</head>

(3)スライドショーを表示する場所に呼び出しコードを貼りつけ

<script type="text/javascript">
$(function() {
$('#mainVisual').crossSlide({
sleep: 4, //in sec
fade: 1 //in sec
},
[
{ src: 'mainImage_01.jpg', href: 'http://mtw.cocotte.jp/' },
{ src: 'mainImage_02.jpg', href: 'http://mtw.cocotte.jp/' }
]);
});
</script>

<div id="mainVisual">
<p>Now Loading...</p>
</div>

<div id="mainVisual">の場所に画像が表示されますので、CSSで横幅と高さの指定をしましょう。
「mainVisual」は任意の名前に変更可能です(・ω・)

それとjavascriptの表記内をちょっと補足しますー

【sleep】次の画像に切り替わるまでの時間
【fade】フェードさせる時間

になります。

画像ファイルを増やすときは、

{ src: 'mainImage_01.jpg', href: 'http://mtw.cocotte.jp/' },
{ src: 'mainImage_02.jpg', href: 'http://mtw.cocotte.jp/' },
{ src: 'mainImage_03.jpg', href: 'http://mtw.cocotte.jp/' }

こんな具合にコードを増やすことで可能。つなぎの『,』を忘れずに!

ハイパーリンクを消したいときは、

{ src: 'mainImage_01.jpg' },

この状態にしてもらえればハイパーリンクなしになります(・ω・)ノ

あと、このJQueryプラグインは、クロスフェードや拡大縮小みたいな事もできます
その辺りコードは、本家サイトを参考にしてください

※2011.0902追記

画像が表示される場所に表示される画像サイズ「width」「height」の指定をCSSで表記する必要があるようです。
それと、ちゃんと「jquery.cross-slide.min.js」は読み込んでるのに画像表示されない!っていうときは他の javascriptが干渉してる可能性があるみたいですので、検証して原因をつきとめてみてください。

■今回の参考サイト様
CrossSlide | 設置サンプル

2011年6月22日 19:55に投稿されたエントリーページです。

2011 Apr 01

2011_0401_01.jpg

BannerSlide - スライドショーバナーFlash簡単ジェネレーター
http://1st-impact.co.jp/KAZUMiX/BannerSlide/

FLASH作成の知識がなくても簡単に、外部リンク付きのスライドショーFLASHファイルがつくれるサイト様です(・ω・)ノ

しかも動きも結構カッコイイ! ←これ大事!!(笑)

画像が5つまでという制限があるのですけど...
新製品の紹介とか特売ものの紹介とかにこの手のプロモーション方法はよくみたりするのですが、FLASH制作の予算が大きく取れないときとかに代用してみては(=ω=)

個人サイトで使っても悪くないよね。

あー

4月1日の記事といって、うそっぱちじゃないですから!(;°ロ°)

2011年4月 1日 18:29に投稿されたエントリーページです。

2011 Mar 30

自分用にメモメモ(・w・)

外部RSSを自分のサイトに簡単に貼り付ける方法!

仕事の方でもSEO的に、社員ブログは「ブログ無料サービス」のサイトをオススメしています。アメーバとかヤプログとかですね(・ω・)

オリジナルのブログを作っても...
既存でサービスをしているブログサイトに比べて、圧倒的に第三者に見られる可能性が低い=アクセス・リンク数を稼げないからです。

となると、

会社ページとかにブログの最新情報を載せたいんだけど、場所もプログラムを違うからどうしたら?
って考えが出てきたので、グーグル先生に相談した結果をご紹介します(・ω・)

※2011.0425追記
Google AJAX APIを利用するJavascriptがうまく動作しなかったので、別の所から引用して、猫の方ですこしだけカスタマイズしてみました

ーー

グーグルコードの中に、「Google AJAX API」というサービスを利用します

◎Sign-up for an API Key - Google Loader - Google Code
http://code.google.com/intl/ja/apis/loader/signup.html

上記サイトにて、まず設置するサイトのアドレスを入力。
※グーグルアカウント必須です

2011_0330_01.jpg

赤囲みの場所に「Google API key」が取得できるので、これをメモ。

それから、メモ張とかに下記の本文内容をコピペして、
表示したいブログ等のRSSアドレス入力を記入。

google.load("feeds", "1");

function initialize() {
var feedurl = "対象のRSSアドレス";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(4);
feed.load(dispfeed);

function dispfeed(result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";

htmlstr += '<dl class="blog">';
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];

htmlstr += "<dt>"
var strdate = createDateString(entry.publishedDate);
htmlstr += strdate ;
htmlstr += "</dt>"

htmlstr += "<dd>"
htmlstr += '<a href="' + entry.link + '" target="_blank">' + entry.title + '</a>';

htmlstr += "</dd>"
}
htmlstr += "</dl>";

container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
}
}

function createDateString(publishedDate){
var pdate = new Date(publishedDate);

var pday = pdate.getDate();
var pmonth = pdate.getMonth() + 1;
var pyear = pdate.getFullYear();
var phour = pdate.getHours();
var pminute = pdate.getMinutes();
var psecond = pdate.getSeconds();
var strdate = pyear + "年" + pmonth + "月" + pday + "日" ;

return strdate;
}

google.setOnLoadCallback(initialize);

このファイルを仮に「google_rsscode.js」として保存します。
灰色部分はコードの説明情報なので、省略しても大丈夫です。

ーーーー

var strdate = pyear + "年" + pmonth + "月" + pday + "日" ;

上記の日付表示の部分を下記サイトを参考に変更してみました。

日付部分が『2011年4月25日』といった形で表示されます。

◎日付の表示形式の変更 - フィードの取得 - Google AJAX Feed API入門
http://www.ajaxtower.jp/googleajaxfeed/feed/index5.html

ーーーー

で、この「google_rsscode.js」をサーバへアップロードして。
RSSを表示させたいページのヘッダー情報に下記のjavascript呼び出し文を加える。

<script type="text/javascript" src="http://www.google.com/jsapi?key=※取得したGoogle AJAX Feed APIキー"></script>
<script type="text/JavaScript" src="/js/google_rsscode.js"></script>

それと表示したい箇所に下記のソースコードを貼りつければ完成!

<div id="feed"></div>

定義型リスト形式で表示されるので、スタイルシートでデコレーションしましょー(・ω・)


◎参考サイト様

・Google AJAX Feed APIの設置とカスタマイズ: スポンサー広告:コーディング:WEB屋log
http://sonicweb.blog69.fc2.com/blog-entry-8.html

・外部RSSをサイト内に簡単に表示させる方法|楽してプロっぽいデザイン|Forty-N-FiveBlog
http://forty-n-five.boy.jp/blog/2010/03/rss_1.php

2011年3月30日 19:30に投稿されたエントリーページです。

2010 Oct 19

以前に紹介した「swfobject.js」を使用して、FLASHオブジェクト設置したページを IE8で見てみると...

エラーコード(KB927917)が発生していたので、原因を探ってみました(´Д`;)ヾ

うーん。

どうも、ID指定を行った divの中に javascript設置し、javascriptで囲っている divに対してプログラム処理する記述を行うと発生するそうです...

おもいっきり、「swfobject.js」の指定に引っ掛かりますなー(;´ρ`)

ということで、エラーの回避策として新しい記述方法を書いて置きます。

<div id="flashcontent">
<p style="color:#BF1111; font-size:80%; text-align:left;"> <strong>Flash Playerの読み込みに失敗しました。</strong>

※JavaScriptを使用しています。ブラウザの設定で有効にしてください。
※最新の<a href="http://get.adobe.com/jp/flashplayer/" target="_blank">Adobe Flash Player</a>をインストールしてください。

</div>

<script type="text/JavaScript">
// <![CDATA[

var myMovie = new FlashObject("../../img/2002toppage/saya.swf", "saya", "450", "360","8", "#FFFFFF");
// フラッシュムービーでflashVarsパラメータを使っている場合
// 以下の構文で設定できる。

myMovie.addParam("wmode", "transparent");
myMovie.addVariable("flashVarName", "this is passed in via FlashVars");
myMovie.write("flashcontent");

// ]]>

</script>

こんな感じですねー
これが今のところの最終形態でしょうか ε=(‾Д‾;)

任意に編集するパラメータの箇所はこちらをご参考に。

var myMovie = new FlashObject("", "このオブジェクト名", "横幅", "縦幅","パブリッシュ時のバージョン", "背景色");

で、このいままで「swfobject」を設置したページの修正作業を行おーと思っていろいろのサイトに行ってみたのですけど、

このエラー...出たりでなかったりするんですよね...(;°ロ°)

本当に無くなって欲しいんですけど!o(`ω´*)o IEの存在自体

あと「swfobject.js」のバージョンが上がってたので、時間があるときにでもまとめてみようかと思っています(*'-')

2010年10月19日 16:07に投稿されたエントリーページです。

2010 Sep 15

自分用のメモメモ

EC-CUBEを利用していて、管理者にメールが届かない場合の対処方法
※sendmailが上手くいかないときとかも含む

EC-CUBEの管理画面→システム設定→パラメータ設定

MAIL_BACKEND = "smtp"

 ↓

MAIL_BACKEND = "mail"

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

2010 Jul 28

はてなブックマークの方で紹介されてて、
試しに使ってみて結構よかったので、こちらでもご紹介〜(*'-')b

2010_0728_01.jpg

◎wallpapers.x3studios.com
http://wallpapers.x3studios.com/

このサイト内で、いろいろ用意されているテクスチャーを貼っつけたり、拡大したり、色変えたりと、編集しながらデザインを作って、指定サイズでダウンロードできちゃったりします(´・ω・`)便利なサイトやね。

ただ文字情報の打ち込みに関しては、日本語がフォントに対応してないので、英数だけっぽいかな。

折角いろいろ触る機会があったので、ささっとツイッターの壁紙を作成してみたのですけど...うーんむ、才能ないなー(´Д`;)ヾ

上記の用に、ツイッター用のオリジナル壁紙をつくってみたり、何かのデザインの下絵とかに気軽にご利用してみてはどうでしょうかー(´∀`)

ちゃっかりサイトのロゴが入ってたりしますけど...(´д`)

2010年7月28日 21:07に投稿されたエントリーページです。

2010 May 26

本日「無限の翼 モバイルサイト」を公開しましたーヽ(´ー`)ノ

大手の無料ブログサイトとかだと、ブログのアドレスに携帯でアクセスすると、自動で携帯サイトに振分されたりしますよね。

あれがやりたくて(笑)ちょっとこしらえてみました(/ω\)

まー結構前から裏側に合ったことは合ったのですけど(;´ρ`)
グーグル先生のツールの関係とかで凍結してまして...。

つい最近やっと解禁になったので、公開とさせていただきました(*'-')

右メニューの方にも QRコードを用意していますので、
俺の携帯だと見れないんですが!っていうご報告待ってます(笑)

ここまでの一連のプログラムの設置とかは、また改めて記事にしようかと思っています〜。

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

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

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

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/

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

2010 Feb 04

自分用にメモメモ

Twitterだと文字数が決まってるので、ハイパーリンクは貼れるけど文字数が足りずに、完全にアドレスが記入できないと思います。
そういうときは、URLを短縮してもらえるサイト様があるので、
こちらでアドレスを短くしちゃいましょー(*'-')

◎TweaK
http://tweak.tk/

例えば...遊戯王のブラックマジシャンガールを画像検索アドレスが

◯グーグルのアドレス
http://images.google.com/images?hl=ja&safe=off&client=safari&rls=en&um=1&q=ブラックマジシャンガール&ndsp=18&ie=UTF-8&sa=N&tab=wi

◯TweaKサイトで変換アドレス
http://uj9ba.tk

こんなに短く!(;°ロ°)スゲー
便利なので活用しましょうねー(*'-')b

あー忘れてました...(汁)
TwitterのブログパーツをTOPページに配置していますー。
ここの記事の更新が遅いので、こっちでもうちょっとアクティブに情報を伝えられたらーというのと、会社の方でもいろいろ商材として使いたいみたいなのでテスト運営も兼ねてるのが狙いでっす。

まー基本駄文なので...
みちゃるかね!っていう気持ちの時だけでOKデス(笑)

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