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

2009 Oct 29

自分用のメモですー。興味ない方はスルーで(´ー`)

ActionScript 1〜2で、外部リンク指定として使っていた、cは、ActionScript 3 ででは使えないので、ActionScript 3 での構文を掲載しておきます。

FLAファイルの1フレーム目に以下を記述。

   // イベントを設定
  stage.addEventListener( MouseEvent.CLICK , onClick );
  // 画面クリックをするとonClickが動作するイベント
  function onClick ( event:MouseEvent ) {
  // URLRequestを設定
 var url:URLRequest = new URLRequest( "http://xxxxxx.com/" );
 // 実際にページに飛ぶ
 navigateToURL( url );
  }

一応これで『getURL』の用に、SWFファイルをクリックすると、飛び先(http://xxxxxx.com/)にジャンプします(*'-')

で、ここからが大事!

この「navigateToURL」の指定は強制的に「新規ブラウザを開く(_blank)」指定になってますので、現在の画面上に表示を行なうには以下の方法をとって下さい。

   // イベントを設定
  stage.addEventListener( MouseEvent.CLICK , onClick );
  // 画面クリックをするとonClickが動作するイベント
  function onClick ( event:MouseEvent ) {
  // URLRequestを設定
 var url:URLRequest = new URLRequest( "http://xxxxxx.com/" );
 // 実際にページに飛ぶ
 navigateToURL( url,"_self" );
  }

赤字の部分を追加。navigateToURL();内に、「_self」指定を加えるだけでOKです。

で、

この「_self」指定した途端...
ローカル上で、SWFファイルをクリックしてもなにもならんぞーーヽ(;´Д`)ノ

って現象が起きるかも知れません...。猫は起きました(笑)

この原因は、「Flash Player」の方あって、

これは、Flash Player 9,0,115,0 以降で、
SWFファイルが、リンク指定したリンク先のhtmlと異なるドメインにある場合、
ターゲットとして「_self」「_parent」「_top」のいずれかを指定すると、
SWFファイルからのリンクが機能しないようになっています。
(※もちろんローカル上も含みます)

で、この対処方法は、

パブリッシュしたときに、掃き出されたHTMLファイルを開いて、
ソースコード上にある「AllowScriptAccess」の指定箇所を
『always』に変更して、保存してください。

これでローカル上からでも確認できると思います('◇')ゞ

SWFファイル内に入れ込むスパムプログラム対策なんでしょうけどね〜
知らない人は知らないので、この仕様はきついなーと...

今回はこんな感じです。

ActionScript 1〜2と、3は完全に別物なので、折角覚えたのにまた覚え直しには躊躇するんですけどね〜。
CS4を導入する取引先が増えてきたので、否応なしでも、「ActionScript 3 」を覚え直さないとダメだろなー...と、猫はいってみた(´Д`;)ヾ(とある禁書風w)

◎参考サイト様。
F-site | [AS3] getURLのように外部ページに行くには

2009年10月29日 20:11に投稿されたエントリーページです。

2009 Oct 15

くはー!GIGAZINを見てちと驚いたのですが
どうもブログ検索サービス「テクノラティジャパン」が、10月23日サービス終了するそうです...

◎Hyobans(ヒョーバンズ)、並びにテクノラティジャパンサービス終了のお知らせ
http://www.technorati.jp/weblog/2009/10/service_close_hyobans.html

「テクノラティジャパン」は、もともとGooglePageRankが高いために、
ブログをユーザー登録するだけでお手軽にリンクポイントアップが見込めるといことで、
以前にお手軽なSEOとして紹介させていただいたサイトだけに、業者の猫的にかなり衝撃の2文字(ノД`)マジカヨ

一応、以前に登録していたアカウントに関しては、親元の「テクノラティUS」へ移行することが出来るそうです。

◎アカウントの移動手続き
http://www.technorati.jp/weblog/2009/10/account_migration.html

具体的な移行手続きは、
10月14日~12月31日の期間内に「テクノラティUS」にてログインするだけっぽいのかな。

とりあえずココもやっておきましたけど...
SEOとしてのどこまで使えることやら...

2009年10月15日 23:39に投稿されたエントリーページです。

2009 Sep 25

いままでのロールオーバーイメージの猫的なやり方は、
CSSを用いたをずっと書いてたのですけど、
ちょっとソースが強引な上に、
閲覧者側の回線・PCスペック等に依存しちゃうので...

設置が楽で、なにか良いものないかにゃ〜

あー設置が楽ってことなら、Dreamweaver等のソフトを使えば良いジャン!
って事になりそうなんですけど、余計なソースが多いので邪道だな〜論外(;´ρ`)

まー捜してみたら外部プログラムファイルを読み込ませて、
ロールオーバ前と後の画像を用意するだけでOKっていうプログラムをみつけたので、自分のメモ用にカキカキ。
ですので、興味のない方は見なかった事にしてください(/ω\)

参考サイト様:
◎Sapphirus.Biz 簡単ロールオーバーイメージ - Javaスクリプト
http://www.sapphirus.biz/javascript/rollover/

こちらのページより「rollover.zip」をダウンロードして
『rollover.js』のみ使用します。

設置手順は、

(1)『rollover.js』の任意のフォルダに設置。(今回は、jsフォルダ)
HTMLファイル側のヘッダー箇所に以下の構文を入力し外部ファイルとして読み出す。

<script src="ドメイン名/js/rollover.js" type="text/javascript"></script>

(2)ロールオーバーさせたい画像をロールオーバ前と後の2種類用意する。
それで、ファイル名を

◎ロールオーバー前の画像 → ○○○_off.jpg
◎ロールオーバー後の画像 → ○○○_over.jpg

という風に、ロールオーバー前なら「_off」、
ロールオーバー後なら「_over」を名称に加え、フォルダ内に設置。
※画像ファイルの拡張子はどれでもOK

(3)HTML上にロールオーバー前の画像をimgタグで呼び出せば完了!

画像に関しては、違うフォルダでも読み込んで来るので、
いくつも違うパターンのメニューを用意するときは、名称に注意してください。

『rollover.js』さえ読み込ませておけば、あとは画像を用意するだけなので、
すっごい楽じゃないでしょうか?(=ω=)

気になる読み込みの速度とかは、まだ検証してないので、にんともかんともですが(´ー`;)
たくさんロールオーバーイメージを設置しないといけない!
というときは、利用してみてはどうでしょうか。

2009年9月25日 22:01に投稿されたエントリーページです。

2009 Jul 03

ちょっいと仕事の方で、
PCと携帯ユーザー向けの簡単なアンケートフォームを急遽作ってほしいって言われてバタバタ作成していて
アンケートに答えたら抽選でプレゼントという形を取るので、
連絡先用のメールアドレスを記入するフォームを追加したのですけど、
携帯で入力しようとおもったらデフォルトが「ひらがな」モードになっていたので...これは使い難い!

という事で、いろいろ探してみましたら、紹介してあるサイトさんを見かけたので、
自分のメモ用にカキカキ(´_ゝ`)

■DoCoMoの場合

inputタグに「istyle」属性を入れ込みます。


istyle="1″
全角かなモード

istyle="2″
半角カナモード

istyle="3″
半角英字モード

istyle="4″
半角数字モード

■auの場合

inputタグに「format」属性を入れ込みます。


format="*A"
半角英字(大文字)モード

format="*a"
半角英字(小文字)モード

format="*N"
半角数字モード

format="*X"
半角英数(大文字)モード

format="*x"
半角英数(小文字)モード

format="*M"
全角かなモード

format="*m"
全角英字モード

※頭の(*)は、文字数の制限なしという意味だそうです。
*の変わりに数字を入れると文字数も制限できますが、
対応してない端末があったり、機種によってはエラーが出たりと、
他のキャリアでは類似の機能がありませんので、×オススメとか。

■Softbankの場合

inputタグに「mode」属性を入れ込みます。


mode="hiragana"
全角かなモード
mode="katakana"
全角カナモード
mode="alphabet"
半角英字モード
mode="numeric"
半角数字モード

で、これらを対象とするメールフォームを加えれば完成ですヽ(´ー`)ノ

最終的にはこんな感じかなっと。

<INPUT size="22" type="text" name="email" istyle="3" mode="alphabet">

それと、携帯サイト用のメールフォームCGIはこちらを使いました。

◎WEB MAIL [I] ( i-Mode版 )  
http://www.pmcj.com/program/p_mail/webmail.html

i-Mode用と書いてますけど3キャリア対応で設置も楽なので、
探してる方がいましたら、こちらを使ってみても(´ー`)

なにかの参考になれば幸いです(*'-')

参考サイト:
◎携帯サイト(モバイルサイト)のフォーム入力項目のデフォルトを半角英数字等にする « WEB制作会社デザイナーのメモ帳
http://5co.jp/mobilesite/41.html

2009年7月 3日 18:07に投稿されたエントリーページです。

2009 May 07

最近仕事の方で、横幅1024pxクラスのサイトを作るようになってきて、
クライアントに「A4で印刷できるようにできませんか?」と、よく言われるように(´ー`;)
確かに印刷サイズと画面のピクセルサイズがぜんぜん別規格になるので、観たままを印刷することは難しいのですけどね...

といっても、Firefox、Safariといったブラウザを使ってもらえれば、
ブラウザ側で自動縮小をしてくれるのでこの問題はほぼないのですけど...

IEだけが非対応...(ノД`)マタカヨ

まだシェア率が高いブラウザには違いないので、しっかりと対応するようにしないと(・ω・;)

今まで、「screen用スタイルシート」と「print用スタイルシート」を別々作って対応してきましたけど、「print用スタイルシート」は、アクマで内容を確実に印刷する為の設定ファイル設定なので、見た目だけでぜんぜん必要の無い箇所は非表示にしたりと、ブラウザで観た通りに印刷する事できないっていう問題があります。

納得してもらえるクライアントだったら良いのですけど、そうでないクライアントもいるので、色々調べてみました!
とりあえず、IE6、7で使用できる方法をみつけましたので、メモ書き程度に残しておきます(*'-')

IE専用プロパティ「zoom」を使います。
現段階(2009.05)のウチのサイトの横幅が、960pxで制作していますので、
横幅960pxのサイトをIE6でもちゃんと印刷出来るサイズ(649px)に変更する場合には、

* { zoom: 67%; }

の指定だけを印刷用のスタイルシート内に記入すれば基本はOKです(*'-')b

zoom指定のパーセント数字の出し方は、

649(印刷での表示幅) ÷ 960(スクリーンでの表示幅) x 100 = 67(端数切り捨て)

で、出しています。

それで、このままだと印刷用のスタイルシートを既存のスタイルシートと別ファイルを作らないといけないので...いつも作ってる方なら良いのですが、大概はメンドイ!って事になると思われます(笑)
ので、既存のスタイルシートに組み込んでしまいましょうヽ(´ー`)ノ

やり方は、

@media メディアタイプ名 {
(通常のスタイル指定を記入)
}

の記述を加えます。
具体的に書くと

/* =========== IE用印刷設定CSS =========== */

@media print{

body {
_zoom: 67%; /*WinIE only */
}

}

こんな感じ。

一応、WinIE6の方で検証してみたら、印刷プレビュー内でキレイにA4サイズで縮小されていました。

やっとIE8からブラウザ側で対応出来る用になるらしいのですけど、
WinIE6、7の環境の方はまだまだ使用ユーザーは多い思いますので、追加してみてはどうですか?(*'-')

今回の参考サイト様

◎印刷時専用のスタイルシートを作る - [ホームページ作成]All About
http://allabout.co.jp/internet/hpcreate/closeup/CU20050728A/

◎螺旋デザイン|はじめてのCSS 印刷用CSS:スクリーンと全く同じように印刷する
http://www.rasen-d.net/first-css/file34.html

2009年5月 7日 22:34に投稿されたエントリーページです。

2009 Mar 05

前の記事で「あわせて読みたい」のサービスを受けるときに、
むはーファビコン載るのか...と気になっていたので、急遽用意しました(^^;

前々から、クライアントの要望があるところは作っていたので、
ちょこちょことした経験は有って、

◎Favicon Generator
http://www.degraeve.com/favicon/

ここのサイトさんを利用してドット打ちをチマチマと作ってたのですけど、

チマチマ...

...

やってられるかーー(ノ ゜Д゜)ノ ==== ┻━━┻

って感じになりました(笑)

まー画像ファイルをアップロードできるんですけど、あまり精度もよくないので(ノД`)
もう少し早くて結構クォリティの高いアイコンファイルを作れないかな〜

っとググってたら、

Photoshopで、ico形式のファイル保存が出来るプラグインを発見ヽ(´ー`)ノ

しかも画像ファイルは Photoshopで作るので、当然透過背景も簡単っていう...

やべッ!ネ申仕様ktkr!!Σ(°m°;)

フォトショッパー(笑)の猫には神スグルよ...マジで...

ということで、Photoshopユーザーの方向けなんですけど、
やり方をざっとご説明〜♪

■プラグインのダウンロード

◎Telegraphics:Free plugins for Photoshop & Illustrator...and other software
http://www.telegraphics.com.au/sw/#icoformat

上記リンク先のサイトさんから各OSとPhotoshopのバージョンに合ったプラグインをダウンロードします。
(win、Mac両対応)

■プラグインのインストール

解凍したフォルダの中に入ってる『ICOFormat.plugin』をインストール済みのPhotoshopに組み込みます。
※Windoowsの方は「ICOFormat.8bi」です。

○Mac OSXユーザー:
Applications/Adobe Photoshop CS3/プラグイン/ファイル形式フォルダ内

○Win ユーザー:
ロカールディスク/Program Files/Adobe/Photoshop CS3/プラグイン/ファイル形式フォルダ内

これで、Photoshop上で ico形式のファイル保存が出来るようになります(*'-')b
背景透過も楽々ですよ!楽ー々ーヽ(´ー`)ノ
あとは、ファビコンのサイズが「16x16」で表示されるので、上手くいくか何度チェックすると良いかも。

※2009.0402加筆
・カラーが、CMYKになってると ico保存が出来ないようです。
・ピクセルサイズが大きいと ico保存が出来ないようです。


ここに表示する為に、gifファイルに置き換えてますけど、出来上がりがこんな感じです。

◎基絵
2009_0305_01.gif

◎ファビコン
favicon01.giffavicon02.gif

まーぜんぜん『無限の翼』っていうタイトルとは関係ないアイコンですな(笑)

ネコテさんクラスのドット打ち職人さんだったら、
こういうサービスはいらないんでしょうけどね(;´ρ`)

そんな技術なんかないし..._| ̄|○

むー...

うらやましくはないんだからねっ!(⊃д⊂)(ツンデレ風に(笑

相当うらやましいらしい...(笑)

◎参考サイト様
2xup.org- Photoshop で背景透過の美しい favicon (ファビコン) を作成する
http://2xup.org/log/2006/04/28-2323

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

2009 Mar 04

こんばんは、結希猫です(*'-')ノ

いつも仕事関係の知識を仕入れるのに参考にしている「ホームページを作る人のネタ帳」さんの過去記事を読み返していたら、
そういえば、までウチでも導入していないSEOがあるな〜っていうのを記事を発見したので、早速導入してみました!

◎あわせて読みたい http://awasete.com/
2009_0304_01.jpg

ブログのURLを入力して指定のプログラムを設置すれば、共通の読者率が高いサイトが自動的に設置したプログラムに表示される面白いサービスです(*'-')
共通の読者=新規閲覧者の確保に直結しやすそうな感じですかの。

◎あとで読む http://atode.cc/
2009_0304_02.jpg

ソーシャルブックマーク系の亜種になるのかな。
あらかじめブラウザのお気に入り内に登録しておいて、
あとで読みたいウェブページ内でクリックする事で、自分宛に読みたいウェブページのキャプチャーに近いものが送られてくるといった、変わったサービスです(=ω=)

2009_0304_03.gif
ちょっとわかりにくいんですけど、
記事ページの上記画像のアイコンをクリックすると、登録されているメールアドレス宛に自動でメールが行くようにしています(*'-')
TOPページとカテゴリー・日付アーカイブページには設置していないので、お気を付けくださいな。

どちらもかなり前からやってるみたいなので、知ってる人は当然知ってるサービスですね。
指定のプログラムソースを配置するだけで行えるので作業自体はかーなーり楽ー々〜。
まだの方は導入してみたらどうでしょうか(´・ω・`)

2009年3月 4日 21:43に投稿されたエントリーページです。

2009 Jan 16

以前に会社の自分用のPCにiMacを購入してもらったのですけど...
一応Web作成を主としているので、Win側のブラウザでの確認が必須なのです!

Mac OSX Leopardには『Boot Camp』が入ってたりするんですけど、OSの切り替えに再起動しないといけないので、Win環境で確認しながらMac環境で修正、またWin環境で確認...って、

検証だけでどんだけ時間かかるん!?Σ( ̄ロ ̄ll)

って感じなので、かなり不向き〜。

ということで、

2009_0116_01.jpg

アプリケーション上で別OSを立ち上げるソフト「VirtualBox」を導入してみました(*'-')ノ
なんといっても、フリーソフトっていうのがかなり魅力的(*´д`*)b

しかも、マジカヨBoot Campいれちゃったよ!って人でも、そのままデータをVirtualBox側に持ってくる事も出来るようです。
ただ...WinOSはアクティベートが存在するので、Boot Camp→VirtualBoxに持ってきた場合でも2回登録になっちゃうので、はじめての方は注意ですよ(´―`;)

細かい設定に関しては、「Mac OSX版VirtualBox の使い勝手」サイトさんを参考にしてもらって...

MacOS側とWin側での共有フォルダの作り方だけ重点的に!
参考サイトさんをみてもよくわからなかったので(^^;

(1)まず、VirtualBoxインストールして、その中にOS(WinXP)もインストールまで済ませます。

(2)WinXPが立ち上がってる時に、画面上のメニューから、「デバイス」→「Guest Additionsのインストール」をクリックするとインストール画面に移行するので、そのままインストール。インストール終了後に再起動。

(3)今度はMac側で任意フォルダを作成して、「システム環境設定」→「共有」→「ファイル共有」で任意フォルダを呼び出して共有フォルダ化に。

(4)WinXPのウィンドウの下に「共有フォルダ」アイコンがあるので、そこから先ほどMac側で設定したフォルダを登録。「永続化する」のみチェックをいれる。

(5)WinXPの方で「コマンドプロンプト」を開いて、『net use z: \\vboxsvr\設定した共有フォルダ名』
と入力する事で、ネットワークドライブとして認識して共有できるようです。

あとは、キングソフトとかセキュリティ系ソフトとか、テキストエディタ・Firefox等ブラウザ関係もインストールして無事終了(´―`)

2009_0116_02.jpg

前の会社で使ってた「Virtual PC」より使いやすくて良い感じ〜(*'-')
まーハード自体の性能も上がってるし、これで遅かったら泣けるわ(笑)

あとはLeopardの機能で「Spaces」機能もかなり相性よかったりします(*'-')

2009_0116_03.jpg

これにオプティカルマウスを完備すれば...!かなりの作業効率UP!

こんな感じで楽しんでおります(/ω\)

◎おまけ

2009_0116_04.jpg

えらい壁紙が双葉におちてたわ...(笑)

◎VirtualBox
http://www.virtualbox.org/

◎Mac OS X版VirtualBox の使い勝手
http://www.katch.ne.jp/~kakonacl/douga/virtualmachine/mac_vbox.html

◎VirtualBox - 憩いの場 Wiki
http://fun.poosan.net/sawa/wiki/?VirtualBox

2009年1月16日 20:33に投稿されたエントリーページです。

2008 Dec 04

DOCTYPE宣言の「XHTML1.1」が流行りだし事もあって、
ちょいっとココも導入したろと思ってDOCTYPE宣言の部分だけ変えてみてW3Cでチェックしてみたら...
えらいエラーがでるでる(´―`;)

「XHTML1.1」の場合 Metaタグの文字コードを指定する場所が除外され、文字コードを指定する為に「XML宣言」を必ず必要になるみたいなので、ちょいと検証用に入れてみたら。

エラーで全ページ表示しなくなったし!\(^o^)/オワタ

エラー表記を見ると...
どうも「XML宣言」がおかしいらしいんだけど、構文は間違ってない...

なんでだろ〜と思って、ググりまくってみたら
どうもPHPの構文と間違えるみたいで...
サーバー側の『php.ini』ファイルに記述してある「short_open_tag」が「On」になっているから起こる問題だそうです。
「<?」これが「<?php」でないと読み込めないように出来れば良いんですけど...
レンタルサーバだとそこまで出来ないと思うので「.htaccess」を使って回避するみたいでした。

php_flag short_open_tag off

の一行を「.htaccess」に加えるだけでOK(*'-')b

ただ...サーバーによって「.htaccess」が使用できなかったりするので、
下記のような表現でやってみてはどうかなっと?

<?php echo "<?xml version=\"1.0\" encoding=\"Shift_JIS\"?>\n"; ?>

PHPのPrint命令でXML宣言を書き出すやり方でいけるみたいです。
ココ「無限の翼」ではこのやり方で見れました(*'-')b

見れたのですけど...
「XHTML1.1」の場合 Metaタグの文字コードを指定する場所が除外され、文字コードを指定する為に「XML宣言」を必ず必要になるみたいなので、断念しました(ノД`)

IE6の互換モードは本当イラネ!
といってもIE7もそんなに良くないんですよね...

...

もうIEの開発やめてくれません...(笑)

■参考サイトさま
WEBFACTORY ::: BLOG: PHPのショートタグとXML宣言

ロリポップで、PHPファイルで構成されてる方は、要注意です!

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