教えるデザイン屋Tocoton

Nippon Osakan Design, Tocoton!

Google Map APIキーのHTTPリファラー設定で何度も挫折した話【解決済】

台風ばっかり来てるけど、皆さんお元気ですか。
地震・台風・大雨で被災された方々が何とか元気におられることを祈ります。

今日は「今、サブドメインを利用して、Wordpressでサイト構築してるのにGoogle MapのAPIキーを使用するプラグインの設定のところでHTTPリファラーの設定でつまづいて、もう立ち上げれそうにない…」っていうむっちゃニッチな人向けの話です。
※10分前のTocoton(とことん)みたいな方、解決方法はある!

Google Cloud Platformの「APIキー制限」画面。

キーの制限をしとかなアカンのは他の先輩サイトさんにたくさん書いてるから
何となく分かると思うねんけども。
※悪意溢れる人に悪用されると、Googleさんからまさかの多額請求…なんて事になるかもやからしっかり設定やで。

このアプリケーションの制限部分の
・HTTPリファラー(ウェブサイト)
にチェックを入れて、その下の空欄にAPIキーを使用するドメイン名を入れたらええんやけどもやねー、サブドメインを使用している時の書き方が分からんくて
悩むこと1時間!(・・・もうちょいかかったかも)

エラーが発生しました。 あはは!みたいなこの画面が腹立つ。Google APIキーの設定違い。

この画面を幾度となく見て涙。( ;∀;)

【解決方法】
サブドメインを使用しているサイトの場合
https://sabu.moto-domain.com
っていうURLになっているなら

*.moto-domain.com/*
と入力して保存や!これで解決したで。

あとは、使うプラグインに必要なAPIの制限を入れ込んだらOK!

  • Google Maps JavaScript API
  • Google Maps Geocoding API
  • Google Maps Places API

こんだけを設定するのが結構多かった気がする。
(個人的に使用したプラグインの設定ではやから、絶対じゃないで。)

以上!!

http⇒httpsにしたらjQueryが一部動かなくなった話【備忘録】

雨が降っててジメジメしている大阪からこんにちは。
今日はコーディングの備忘録。
興味ない方には関係ないお話なので、ごめんなさい。

が、しかし!
httpからhttpsに変更したとたん、jQueryが動かんのやけどもっ!??
とお悩みの方にはもしかしたらお役に立てるかも。

TocotonのサイトをSSL化しようと実験をはじめて、
サーバの設定やら何やらスタスタいけたのに、最終確認したら
”ページトップへ戻る”に使用しているjQueryが動かない・・・

【解決方法】
結論からいくと、外部読込をしているスクリプトと、
そうではないものを混在して記述していたのを
外部読込、それ以外という順番に書き換えた

(修正前)
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>

<script type="text/javascript" src="../js/smartRollover.js"></script>
<script type="text/javascript" src="../js/scroll-slide.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

(修正後)
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>

<script type="text/javascript" src="../js/smartRollover.js"></script>
<script type="text/javascript" src="../js/scroll-slide.js"></script>

バグにはまること2時間ほど。
私はjQueryなどに関して詳しくないので、ネットで調べに調べて
外部読込のパスがおかしい!とか
ブレイクして調べるとか
外部から読んでるファイルをローカルに落してきたりとか
色々してみたが、一向に動く気ナッシング

で、最終的に順番かえたら動いたよーっていう素晴らしい記事を発見し
順番変えたら動いた。

(;´ρ`) グッタリ 

備忘録としてメモ。
もし同じような内容でハマってしまっている方の助けになれば最高。

神戸のエステ Ange viva la vidaさま【お客様紹介】

%e3%83%a3


ども。 お客様のご紹介、本日は神戸市の繁華街でエステをされている「Ange viva la vida」さまです。

皆さんそれぞれに人生を自分らしく生きる、一度の人生を素敵に歩んでいかれるお手伝いをしたい 

コンセプトが非常に明確なエステサロンさまです。

 

女性の脱毛やフェイシャルエステをはじめ、メンズ脱毛も施術してもらえる場所。

 

Tocoton(トコトン)は、ホームページのデザインを担当させて頂きました。

ご担当者さまとの最初の打ち合わせ、おしゃれな街・三ノ宮にドキドキしながら伺いました。

店舗イメージと合わせて作成したいことや、色も落ち着いた配色でなど明確な制作の方向性を一緒に決め、デザインすることができました。

 

Ange viva la vida

神戸市中央区布引町4-3-15 フラワーロード三ノ宮ビル8F

078-231-0545

平日 11:00-20:00 土・日・祝 10:00-19:00(※最終受付はコースによって異なります)

 

 

キャプチャ

 

ども。

今日はほぼ一日アホリエ(事務所)に籠って

作業作業作業作業でした(笑)

そして思いのほか苦労してたのが、このコーディングの時によく使う

Javascriptのタブ切り替えのところ。

 

やり方は他の人が素晴らしくいろいろ載せてはるので割愛しますが

何回やっても、なんか画面がずれる!

ってかボタンを押したら下にリンクしてるところへちょっとガクンっっ!って下がる!

何故だ・・・・・・・・・・と

悩み、いろいろいじって

Javascriptの中身まで見て、あれじゃねーこれじゃねー・・・って

思い悩んだところ、ふっと気づいて

一瞬で解決してしまいました。

 

そう、ページ数に対して、

起動させるためのオブジェクトセットをするscript記述部分の

個数が合ってない(笑)

ボタンは4つしかないのに

script部分には5つあるようになっている。

 

のでズレる(笑)

 

・・・・・・・・・・・ く、、、、、、、、

くやしいぃぃぃぃ!!!!!!!!

 

解決したからええけども、

何回も見直して、書き直してってしたのに

一行削除で終わってもうたがな(笑)

 

こういうところがコーディングの醍醐味ですね(((゙◇゙)))カタカタカタカタカタカタカタカタカタカタカタカタカタカタカタカタカタカタカタカタ

 

*:..。o☆★o。..:* RYO’s HOMEPAGE *:..。o☆★o。..:*

 

 

CSSじゃないけども、PHP

ども。
最近システム関係のお仕事もあるので
ECサイトやら何やらで
色々調べていったりすると
どうしてもブチ当たって
しまうのがPHP.
私の場合には、システムさんが隣にいてくれるから
わっかんねーーーーーーーーーー!ってなったら
その人に聞きます。
んで、教えてもらいます。
楽する方法は教えてくれませんが(笑)
こんなこともできるあんなんできると
色々ネタを教えてくれるのです。
そう、それはまるで!
学校では教えてくれない夢の授業(笑)
((o(´∀`)o))ワクワク
なんちゅーか、人間興味持った時にしか
勉強せーへんってのはホンマやと思います(笑)
それではアカンのやろうけども
それでも、そんなところやと思います。
ありがたいことですわ。
で、何を教えてくれたかというと
色々サンプルって落ちてるんやなぁってこと。
PHPってどうしてもゼロから作らなアカンから
っておもってたけども
ある程度もうできてるやーん!みたいなのが
ゴロゴロしてました(笑)
システムさんから言わせると
デザインのがゼロから作らなアカンからーって事らしいけども。
φ(.. ) メモメモ
使えるものは使う!
これ、鉄則です!
ってことで、また素敵なサービスに携われるように
頑張ります!
*+☆+*――*+☆ まだ持ってないの!?ホームページ作ろう!! ☆+*――*+☆+*

画像の動かし方と決めるタイミング

ども。
画像部分をどう魅せていくのかって
結構今のホームページを作る上で
かなり重要なポイントやと思います。
デザインはもちろんのこと、
動かし方。
そう、コーディングの時の問題やねんけども
グルングルン写真が回っているほうがいいのか
さりげなーく魅せるのがいいのか、
いまどきみたいなのは
一切使わないほうがいいのか・・・
(。-`ω´-)ンー
これは結構最初のほうに1回悩みます。
打ち合わせしてる時に悩みます。
んで、次にデザインラフ作ってる時に悩みます。
どうするかによってどんなデザインにするかが
変わってくるので悩みます。
で、デザインを作って
さぁ!
いざコーディング!!!って
やり始めても
私はまだ悩んでたりする(笑)
ヽ(°▽、°)ノエヘヘヘヘ
いやー、何か色々見てたら
「こっちのがカッチョよろし・・・かもねぇ・・・」とか
意外にはめ込んでみたら、
無い方が(スライドしないほうが)情報が見やすいかも!!
とか(笑)
ウダウダ最後まで悩み続けます(笑)
面倒くさいやつです。
えぇ。
今日もまさかの5パターンぐらい試作品作って
現時点でまだ悩んでます(爆笑)
ええ加減に決めろやっっ!!

なんて思わないでください。
(´ω`。)グスン
何か、どれも素敵(笑)
こんな風にして日曜日は更けていくのでした。
*+☆+*――*+☆ まだ持ってないの!?ホームページ作ろう!! ☆+*――*+☆+*

組み方はそれぞれだっ!

ども。
WEBのコーディングと言えば!
HTML+CSSで基本的には組んでいきますね。
さて、この時に
「このタグを使うほうがいいのか
それとも、このタグで組むのがきれいなのか」
で悩んでしまう事がある場合も。
分かります!!!!!!!!(笑)
liタグのがいいの?
それともdl??
とか
いやいや、むしろここは
割り切ってtableタグでサックリ組むのがきれいやわーとか。
とかとか。
悩めば悩むだけ泥沼化( ; ゚Д゚)
W3Cの標準が、とかルールは色々あるんですが
基本的に私が
気にしていることは
■ ちゃんと見えること(これは当たり前)
■ 後で見た時に、何がどこに書いてるか分かりやすいこと
■ 他の人が修正・追加することになった時にでも、わかりやすいこと
です(笑)
あったりまえーーー!って
思うんですが
これが結構難しい。。。
CSSのクラス名の付け方ひとつ取っても
自分と違う感性の人が見たら
もう意味がわかりません!
なんてこたぁ、ザラです(笑)
かくいう私もよく
「・・・これはどこにかかっていってるの??」
なんてよく聞きます。
ちゃんと読んだら、じっくり読んだら
分かる事かもしれないですが
大急ぎの時には 半泣きになります。
タグの選び方は
HTML辞典とかを見て、本来の使い方を
まずは知る事から始めるのが良いと先輩に
教えてもらいました。
基礎がわかってないのに、応用なんぞ出来るかー!
だそうです。
確かに。
他のサイトの組み方をソースを見て調べるのもよし。
HTML辞書を引っ張って調べるのもよし。
自分で色々試行錯誤してみて
作っていくとある程度パターンというか
この時にはこの組み方!みたいなのが
出来上がってくると思っています。
是非、辞書から逃げずチャレンジを!
*:..。o☆★o。..:* RYO’s HOMEPAGE *:..。o☆★o。..:*

ファイル名に気をつけろ!

ども。
アーティストさんのホームページを制作中、
JQueryを使ったホームページにするために
色んなサイトを見て、おもしろい感じで写真がぐるんぐるんするのを発見!
これは素敵になるどー!と意気込んで作ってたら
コーディング段階で…撃沈。
(o゚ω゚)チーン
動かない。
なぜ・・・うごかねぇだすかっっ!!!
ソースを見ても、おかしなところはないし
まさかねーと思いながら画像名とも照らし合わせたけども
名前の付け間違いとかもない。
…(。-`ω´-)ンー
で、ずーっと元ソースと自分のソースを見比べて見比べて
見比べたら!!!!!!!
<script src=”js/jquery-1.4.2.min.js” …
javascriptのソースのところ…
配布してるソース名と、サンプルコードのリンク名が違うっっ!!!
んがあああああああああああ!
撃沈♪
見つかったらサクサク動きました。
でもすっごい初歩的なんやけども
これが違うってことは、土台から動きませんっ!って事やから。
たかがリンクするファイル名。
されどファイル名!!!
配布されてる無料のサンプルソースが沢山ありますが
全部コピペでうまくいくけども、
それでももう一回、見直すのも必要やなぁと痛感。
時間もったいねーーー(笑)
(。-´ェ`-)シュンシュン
皆様も是非!!!
是非とも、見直しを♪
これで動かん時、ある意味原因が分かった時のあの
虚無感は計り知れへんもんがあります・・・。
*:..。o☆★o。..:* RYO’s HOMEPAGE *:..。o☆★o。..:*

楽しすぎるjavascript

ども。
今日は久々にコーディングのお話。
というのも今日の作業がほっとんどコーディングやったから(笑)
わかりやすいですねー♪
で、ロールオーバー。
マウスを重ねたら画像が変わる!ってやつですね。
今回はどの組み方でいくかなぁと。
私はあんまり固定の組み方をしないので
毎度毎度実験です♪
楽しい・・・ (* ̄ー ̄*)ニヤリッ
マッドサイエンティスト並みのワクワク感は
たまりませんが、とりあえず今回はjava scriptで!
jsファイルを外部に持たせて、ロールオーバーとしました。
CSSで組むのとか
HTMLの中に直接書き込んじゃうのとかではなく
外部ファイルにってのが
あんまりやったことなかったから((*’-‘*)エヘヘ )
チャレンジです。
逃げちゃだめだ逃げちゃだめだ逃げちゃだめだ。
結論
組むのが早いのは
dreamweaverとかのjavascriptもってくるのとか
CSSとかのが早いかもしれへんけども
更新作業・修正作業に入った時には間違いなくこっちのが
効率的!!
今更何言うとるねん ヽ( ´ー)ノ フッ
みたいな反応はせんといてくださいねーー・・・
画像名をそれぞれ、xxx_off.jpg と xxx_a.jpg
のように後ろのところに固定した名前を付けて
ロールオーバーさせる方法にしました。
他にもいろいろあったんで
「ロールオーバー javascript」で検索したら
素敵すぎる方法を紹介してる天才さんたちが
山ほどいてはります。
是非!
見てみてくださいね♪
*:..。o☆★o。..:* RYO’s HOMEPAGE *:..。o☆★o。..:*

liタグで、なぜか隙間が・・・

ども。

今日はコーディングのお話。

左メニューとかを組んでる時に

IE7の頃なんかは、liタグを使ってると

なぜか、

なぜか、

綺麗に隙間があく・・・(笑)

ものすごいビッミョーーーーな

隙間が空いている・・・

なんでえぇぇぇぇぇ!!??

。・゚・(ノ∀`)・゚・。

とよく叫んだもんです。

それが今日!

久々に!!

なぜか!!!

choromeで再会しました♪

・・・やぁ(´・ω・`) ヒサシブリ

んで調べていたら

・line-heightが絡んでいるらしいってこと。

こいつを 0 にしたら確かに問題はスッキリしましたよ・・・

んでもっというと、

ネスト構造がおかしい場合にもこの現象になるらしいこと。

<li>

 <a href="index.html"><img src ="aaa.jpg" /></a>

</li>

とかみたいな?

色々とやってみたら、

色んな解決策があるらしいが

私はとりあえず、、、

liタグを使わない♪って解決にしましたー(笑)

・・・ くそぅ!!!

*:..。o☆★o。..:* RYO’s HOMEPAGE *:..。o☆★o。..:*