マウスオーバー/マウスアウト(mouseover/mouseout)

プロパティー:マウスオーバー/マウスアウト(mouseout/mouseover)は基本的にカーソルを画像やテキストの上に置いたときに内容を変化させるときに使用します。文字が変わったり、文字色が変わったり、背景色が変わったり、違う画像に変わったり・・・・いろいろですね。

今回は、イメージ画像やテキスト部分をオーバーしたとき、違う画像に変わる、テキスト文の場合は背景色にかわるような書き方を記しておきます。
<通常>

リンクバナーをロールオーバーした際に画像を変化させるには、、、、

画像の場合は

<a href=”” target=””><img src=”” alt=””></a>

テキストの場合は

<a href=”” target=””>テキスト文</a>

ですが、

<マウスオーバー/マウスアウト>

  マウスオーバー前の画像(表紙)と、マウスオーバーしたときの画像(背景)の2つの画像ファイルを用意します。

<書く場所は親要素か子要素か>

マウスカーソルがすでに親要素にあり、そこから重なっている子要素に移った場合、子要素はもちろん、親要素にも再びmouseoverイベントが発生する。
子要素から重なっている部分の親要素に移った場合、親要素にmouseoverイベントが発生し、その際、子要素だけでなく親要素にもmouseoutイベントが発生する。つまり、親要素ではそれぞれをまったく同一の領域として扱われます。

子要素が親要素の領域を切り取ると考えるとわかりやすいですね。

・子でmouseover => 親でもmouseover

・子でmouseout => 親でもmouseout

~応用~
<inputボタンにマウスオーバー/マウスアウト>
<input type=”image” name=”test” src=”” onmouseover=”” onmouseout=”” />

参考URLはこちら
http://kowaza.boo.jp/06mouse/onm-01font.html

マウスオーバーはユーザーがサイト閲覧時に、有効な知識だと思います。オーバーアクションは結果誘導効果に使えますので意識しておきましょう。

PS:こんなアプリをつかってみました
【音声認識装置HD】~現在ipadで無料(iphoneでは有料になっちゃってます)~
https://iwire.jp/appch/apps/550295585/

結果・・・・わけわからない文章になったwwwww自分の声がいかに聞き取りづらいのかとかなり傷心しました。

「キャッシュ」ついて

もちろん、お金のことではありません。

キャッシュとは、よく使うデータを一時的にパソコンに記憶させる仕組みです。

インターネットで、一度訪れたページに再度アクセスするときに、すぐにそのページが表示できるよう、インターネットにアクセスした情報を蓄えておいてくれることです。

なぜそんなことを急に説明し始めたのかと言えばキャッシュはホームページを作成する際、邪魔をしてくれたりします。

このブログでも何度もホームページ作成について書かせていただいたのですが、今日は情けないことにこの基礎中の基礎?に手を焼かされました。

ホームページの作成は単純に言えば
コード記入→ブラウザで確認

これの繰り返しなのですが、今日、作業の途中でなんどコードを書き直しても直らない。

グーグル先生に確認してみると
「ブラウザキャッシュが強烈に効き過ぎて、再読み込みでも更新されない場合がある。
キャッシュを毎回削除するのも面倒なので、スーパーリロードで読み込んでしまいましょう。」
とありました。

「スーパーリロード」

冗談のような名前だが本当にあるコマンドです。
コントロール+F5です。(google chorme1場合はです。ブラウザによって異なります)

本当に稀なことらしく、たいていはF5で解決しますが、もしどうしても表示できない場合はやってみてください。

高確率で変わらず表示されないと思います。

それぐらい稀です。きっと他の原因があると思われます。

次回はもっと技術的なことを書きたいと思います。

redmimeチケット書くとき~ここ注意します~

なんでもそうですが、外部に依頼・または報告・相談・連絡をする際、【5W2H】をしっかりとかかないと意味ないただの時間ロスです。ここで再度確認するために重要なことを記しておきます。

【書き方】

・ なぜやったのか

・ だれがやったのか

・ なにをやったのか

・ どこでやったのか

・ どのようにやったのか

これだけ押されておけば、相手に伝わります。伝わらないものは意味がないのです。

人に伝えるため・未来で読み返しても理解するためこのような基礎は大事だと再度認識しました。 チケットを作成するときはまずポイントを洗い出し、相手の目線・視点を意識しながら書きましょう。

また、文章で細かく説明する方法と画像を使用する方法2つを使えば、より伝わりやすくなります。今後の自分のためにも基礎の基礎をしっかり叩き込みます!

*はじめに書くとき、必ず説明部分に編集箇所や注意点などを書く ”クセ” をつけること!

CakePHP find関数について

findメソッドは、$this->モデル名->find(‘検索タイプ’,’オプション値’);でモデルからデータを取り出します。

検索タイプは、標準で下記の値が用意されています。

1、all  条件に合致する全てのデータを取り出します。

2、first 最初に見つかったデータのみを取り出します。

3、 list 指定したフィールドのデータをリスト化して取り出します。

4、 threaded  そのレコードの親子関係を解析し、子レコードを階層で取得することが出来ます。

5、 neighbours 該当レコードの隣り合ったレコードの情報を取得できます。連想配列で『prev』キーの値は該当レコードの前のレコード、『next』には後のレコードが格納されます。

 

他には オプション値 にもいくつかありますが、それはのちほど・・・

翻訳スプリクトとFacebook Like Boxの実装

パラファミリーのサイトhttps://parafamily.co.jp/
ヘッダーに翻訳スプリクト。メインにPage Pluginを付けます。





まず、ヘッダーに翻訳スプリクトに付けるためにwordpressでダッシュボード→ヘッダー→ウィジェット→ウィジェットエリア→テキストに


を入力します。

続いてPage Pluginはダッシュボード→固定ページから対象のページを選択し

を入力し、引き続きダッシュボード→テーマ編集→メインに

を入力します。これで取り合えず実装されます。場所の設定などはマージンなどを使いお好みの場所で。

今日見たサイト
http://jump-up.info/others/atom3.html

https://developers.facebook.com/docs/plugins/page-plugin

https://www.translatecompany.com/translate-this/

cakePHPの初期設定をおぼえよう

まず、cakephpって何なの?

cakePHPとはwebアプリケーション(Webの仕組み・機能を使ったインターネット、もしくはイントラネット上で提供されるアプリケーションソフトウェア)
です。基本的に初心者が学ぶ、HTML,CSS,Javascript,PHPのあとに学ぶのかなと思います。今回は、CakePHPで始めに覚えておくべき用語を紹介しておきます。

<覚えておくべき用語>
cakePHPをcakephp.org からダウンロードしたあと下記のようなフォルダが落とされております。

ここの appフォルダの中にあります Model,View,Controllerフォルダはそれぞれデータ、見た目、かけはしを意味するフォルダとなります。

これらの基本的なことを覚えたあとにCOC(Convention over Configurationの意)を学びます。これは設定ファイルや作成したり、規約(書き方のルールなど)を事前に作成しておくことです。

使い始める前に、いくつか設定しなければいけません。

<tmpフォルダから書き込み権限をあたえる>

CakePHPは一時ファイル等を/app/tmpディレクトリに作成するため、tmpディレクトリ以下に書き込み権限を与えておく必要があります。

ssh等でシェルを利用可能であれば下記のようにchmodコマンドを利用し,
/app/tmpディレクトリ以下のパーミッションを707に変更します。

# chmod -R 707 /var/www/html/cakephp/app/tmp

シェルが利用できない場合はFFFTP等のFTPクライアントを利用してパーミッションを変更してください。

 

とりあえず、ここまで覚えていれば大丈夫でしょう!

次は、開発手順を書いていきたいと思います。

ECCUBEの会員登録(入力フォーム)を編集したいとき

ECCUBEで作成したオンラインショップで英語対応にしたく、会員登録部分を日本語から英語変換する方法をさがいしてみました。管理画面からは編集できなかったのでFilezillaから直接編集することになったので、注意点と変更部分を示しておきます。

 

変更箇所・・・・・ファイル場所:data/Smarty/templates/default/frontparts/form_personal_input.tpl

Smartyのファイルを編集したあと、PHPのファイルも編集します。
ファイル場所:/data/class/helper/SC_Helper_Customer.php

バージョンは2.13.1。

一度、.tpl部分を編集してみましたが、うまくいきませんでした。

php部分を編集していなかったのでかバージョンに関係があるのか・・・・

また調査してみます。

 

それでは

http とwwwの違いって?

httpとwwwの違いがわからないのでちょっと調べてみました。

httpとは、Hyper Text Transfer Protocolの略です。WebサーバとクライアントがHTML(Hyper Text Markup Language = Webページを記述するための言語)で書かれた文書などの情報をやりとりする時に使われる通信手順(プロトコル)を意味します。

wwwとは、さまざまな種類のコンピュータ上で共有できるファイルシステムとして開発されたもので、インターネットそのものではなく、世界中のサーバで公開されている情報をインターネットのWebページとして得ることができるシステムのことをいいます。

<ホスト名ってなに?>

ホスト名(FQDN)は、インターネット上のサーバーを表します。(ドメイン所有者のサーバー)

<そもそもどこがドメイン?>

<そもそもどこがホスト名?>

 

クライアント側で、通信方式が違う場合はあらかじめhttps:を消しておけば、制作時楽だと思います。

 

ではでは。

第二回 PostgreSQL ~SELECT文~

SELECT文は、データベースからデータを取り出すための構文です。

SELECT文では、単にデータを取り出すだけでなく、さまざまなキーワードを組み合わせて取り出すデータを制限したり、条件を付けたりすることができます。

 

SELECT文には、いくつもキーワードがありますが、今回は以下の3つをしっかり覚えてください。

 

  • 「どの項目(列)のデータを検索するか」を指定する:SELECT
  • 「どの表から検索するか」を指定する:FROM
  • 「どのような条件で行を検索するか」を指定する:WHERE

表を指定してデータを取得しよう

 

表のすべての列データを指定するには、SELECTの後に「*(アスタリスク)」を指定します。構文はこちらになります。

SELECT  * ← 全てのデータの列を (SELECT句)

FROM  * ← どの表から (FROM句)

上記のようにSELECTキーワードに続いて列名を指定する部分を「SELECT句」、FROMで表名を指定する部分を「FROM句」と呼びます。

select * from 列名 ;

SELECT文の最後に指定している「;(セミコロン)」は、「ここで1つのSQL文が終わり」ということを示す記号です。重要ですので覚えておきましょう。

また、

select 列名,列名・・・・ ←(どの列のデータを)

from  表明 ←(どの表から)

*SELECTやFROMなどのキーワードや、表名、列名は、大文字、小文字どちらで書いても問題ありません。また、SELECT文が長くなるようであれば、途中で改行しても問題ありません。実際に仕事でSQL文を書くときは、ルールを決めて書き方を統一することをお勧めします。構文の書き方を統一しなければ、処理性能が低下してしまう可能性があるからです。

条件を指定して、特定の行データを検索しよう

全てのデータから、特定の行だけ取り出したいときは、「WHERE句」を使います。

 

 

52カ国語、自動和訳してくれるスプリクト

こんにちわ。

業務で使ったことのないJavaScript使うことになり
日本語を英語にするcodeを探していたら、こんなものがありました。

「あなたのウェブページを52の言語に自動翻訳するボタンを簡単に設置できる -Translate This Button」

こ、これは…!

1個2個ではなく、52個…奮発にもほどがあるだろ!?
さっそく実装してみましたところ、本当に52個の和訳が用意されて、しかも簡単。
ちなみにcodeは

<!– Begin TranslateThis Button –>

<div id=”translate-this”><a href=”http://translateth.is/” class=”translate-this-button”>Translate</a></div>

<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript” src=”http://x.translateth.is/translate-this.js”></script>
<script type=”text/javascript”>
TranslateThis();
</script>

<!– End TranslateThis Button –>

もちろんクッキーに対応しており、ページを移動した際にも自動で翻訳されます。

これはいいんじゃねぇ?と思いボスに報告したら。
もろもろの理由で却下されました…52もいらないよね、そりゃあ…