menu

2019年の運勢ばっちり

2019年1月22日

お正月はほぼ毎日ゲームして過ごしていた吉岡です。

あけましておめでとうございます。
本年も元気に頑張ってまいりますので、どうぞよろしくお願いいたします。

さて2019年ですが、
個人的な運勢がなかなか良いものでしたのでブログにさせていただきます。

関西を中心に行われる十日えびすで「おみくじ」と「恋みくじ」を引きました。
ありがたいことに両方大吉
しかし、これだけではありませんでした。

2019年最強運勢<星座×干支×血液型>占いランキング
573位中31位

誕生日でわかる2019年の運勢ランキング
366位中1位

と悪いとはいえない運勢でした。
かなりテンションあがりますよね・・・笑

運勢はすごくいいのにも関わらず、
2019年入ってすぐに体調を崩しました。

まだまだこれからですよね!!
元気に頑張りますよ!!

そんな運勢が良い2019年でまず頑張っているのが
自炊・お弁当作りです。
会社の日はなるべくお金を使わないように頑張っています。

一旦4月までは頑張ります!!

残り福

2019年1月15日

フロントの武藤です。
新年明けましたね!
今年もよろしくお願いします☆

年末年始はやはりイベント目白押し。
合わせて暴飲暴食。
体が重い(T_T)

先週の金曜日のお話。

ここ連日遊び倒している長女を叱り飛ばし
今日こそは先に宿題を終わらせるように命令。
とっくに夕飯のオムライスは作り終えたが
次女もソファで眠ってしまって…(溜息)
とりあえず長女の宿題待ち&次女の目覚め待ち。

ま、金曜だしゆっくりダラダラでと決め込んだ時。
時間はもう8時前。
♪ピヨピヨ(着信音)
仕事を終えた主人から電話で集合が掛かりました。
「えべっさん行こう!」

キタ━━━━(゚∀゚)━━━━!!

毎年、十日えびすは西宮神社のお参りに行くが
今年は三日間とも平日で諦めてたのに行けることに!!
しかもまだ夕食も食べてないから屋台も楽しめる。
次女を叩き起こして、急いで向かいました。

30分後には最寄り駅に集合
神社までずーっと続く屋台で腹ごしらえ
ベビーカステラ
チーズドッグ(伸びた!)

でも金曜の夜なので激混み
入場規制もあり本殿に辿り着いたのは10時前
すごい人

お参りした後は恒例のおみくじ(末吉でした)
そしてまた食べる
フランクフルト
たこせん
たこ焼き
チョコバナナ

最終日なので既に片付けも始まりつつ…
値下げしてくれる屋台も
これぞ残り福!

滑り込みセーフ
今年もえべっさんい行けて良かったー
ごちそう様でした(笑)

Google Mapの表示がおかしい!時のAPIキー取得方法

2018年12月28日

以前の記事でもお伝えしたように、2018年6月11日からGoogle Mapのシステムが変更になりました。

弊社だいずらぼにも、お客様から「ホームページのGoogle Mapがおかしい!直して!」とのご依頼をちらほらいただいております。
このGoogle Mapを直すには、APIキーが必要になります。ただし、請求先情報を登録したAPIキーです。
APIキーはお客様に取得・送付していただくのですが、何件かの案件で、送っていただいたAPIキーに請求先情報が登録されておらず、新しいAPIキーを適用しても状況が改善されない、ということがありました。

そこでホームページのGoogle Mapの表示がおかしくなってしまった場合に、どう請求先情報を登録したAPIキー取得するのか、まとめました。
手順を細かくしたため少々記事が長くなっていますが、これを参考にAPIキーを取得していただければと思います。
 

■Google Mapの症状確認

1.Google Mapがあるページを表示
Google Mapのシステム変更が原因の場合、Google Mapは


といった表示になっています(どちらのパターンが表示されるのか、条件がよくわかりませんが・・・)。ひとまず、該当のページを表示します。

2.エラー内容を確認
F12キーを押すと、開発者ツールというものが表示されます(画像はChromeの場合ですが、IEやEdge、Firefoxでも同じようなものが表示されます)。「Console(コンソール)」タブを選びます。

Google MapのAPI読み込みに問題がある場合はここにメッセージが表示されます。メッセージに合わせて対処します。
●APIキーに請求先情報が登録されていない場合
大体このメッセージが表示される場合が多いと思います。以下の手順を参考に、APIキーに請求先情報を登録します。

●APIキー自体が設定されていない場合
あまりありませんが、よっぽど古い設定をしているとこのメッセージが表示される場合があります。APIキー自体が取得・使用されていませんので、APIキーの取得から行ってください。

 

■APIキーに請求先情報を登録する

1.Google Cloud Platformにアクセス
Google Cloud Platformにアクセスします。
Google MapのAPIキーを発行しているGoogleアカウントでログインします。違うアカウントでログインしている場合は、一旦ログアウトしてログインし直します。

2.プロジェクトを選択
画面左上に、左からメニューボタン、ロゴ、プロジェクト選択が並んでいます。プロジェクト選択をクリックし、該当するGoogle Mapのプロジェクトを選択します。
※どのプロジェクトがGoogle Mapのプロジェクトなのかわからない場合など、新しくプロジェクトを作り直す場合は、先にAPIキーの取得を参照してから戻ってきてください。

3.「お支払い」画面へ
画面左上のメニューボタンをクリックし、メニューの「お支払い」をクリックします。

4.請求先アカウントのリンク
画面に以下のように表示されるので、「請求先アカウントをリンク」をクリックします。

5.請求先アカウントの作成
さらに「請求先アカウントの作成」をクリックします。
※すでに設定できる請求先アカウントがある場合は、違う画面遷移になると思われます。その場合は、請求先アカウントをプロジェクトに紐付けてください。

6.必要事項入力その1
必要事項を入力し、「同意して続行」をクリックします。

7.必要事項入力その2
引き続き必要事項を入力します。最後に「無料トライアルを開始」をクリックします。

8.請求先アカウントの作成・リンク完了
請求先アカウントの作成とプロジェクトへのリンクが完了したら、「OK」をクリックします。
ダイアログを閉じると、作成した請求先アカウントにリンクされているプロジェクトを確認できます。プロジェクトと請求先アカウントがリンクしていれば、プロジェクトのGoogle Map APIキーには請求先情報が自動で登録されます。


請求先アカウントには、複数のプロジェクトをリンクすることができます。また複数の請求先を作成し、プロジェクトを別々の請求先にリンクすることもできます。

9.Google Mapを確認
Google Mapのページを再度表示し、Ctrlキーを押しながらF5キーを押します。ページが再読み込みされるので、もう一度Ctrl+F5キーを押します(1度だけだと、エラーが直っていなくても正しいかのように表示される場合があるため)。
ページのGoogle Mapが正常に表示されていることを確認します。

さらにF12キーを押して、開発者ツールを表示します。手順2で確認したエラーメッセージが表示されていなければ、修正は完了です。
引き続きエラーになっている場合は、少し時間を置いて確認するか、請求先アカウントなどを確認します。どうしてもエラーが直らない!という場合は、お気軽に弊社までお問い合わせください。
 

■APIキーを取得する

1.Google Cloud Platformにアクセス
Google Cloud Platformにアクセスします。
Google MapのAPIキーを発行するGoogleアカウントでログインします。違うアカウントでログインしている場合は、一旦ログアウトしてログインし直します。

2.プロジェクトの選択・作成
既存のプロジェクトがない場合、「作成」をクリックして新しいプロジェクトを作成します。

既存のプロジェクトがあってそちらを使用する場合は、プロジェクトを選択し手順4へ進みます。

3.プロジェクトを作成
必要事項を入力し、「作成」をクリックします。
「プロジェクト名」はデフォルトのままでも構いませんが、「GoogleMap for HP」など、わかりやすい名前に変更することをおすすめします。使用できる文字は、英数字、引用符、ハイフン、スペース、感嘆符です。

4.API画面へ
プロジェクトを作成すると、自動的にプロジェクトの概要画面が表示されます。
「APIの概要に移動」をクリックします。

5.APIの追加画面へ
プロジェクトを作成した場合や既存のプロジェクトにGoogle MapのAPIが追加されていない場合は、「APIとサービスの有効化」をクリックします。
既存のプロジェクトでGoogle MapのAPIがすでに追加されている場合は、ページ下方の一覧から「Maps JavaScript API」を選択し、手順8へ進みます。

6.追加するAPIを選択
「Maps JavaScript API」を選択します。一覧に見当たらない場合は、「Maps JavaScript API」で検索し、選択します。

7.APIを有効化
「有効にする」をクリックします。

8.認証情報画面へ
「認証情報」タブをクリックします。

9.認証情報の作成・選択
まだ1つも認証情報(APIキーなど)が発行されていない場合、「認証情報を作成」をクリックします。
既に認証情報が作成されていてそれを使用する場合は、手順14へ進みます。

10.認証情報の種類を選択
「APIキー」を選択します。

11.制限の設定へ
APIキーは作成されましたが、この時点では誰でもこのAPIキーを使用できる状態になっています。
APIキーが不正に使用されると、例えば他人のホームページのGoogle Mapへのアクセスがアクセス数に加算され、アクセス数が多ければAPIキーの発行者が使用料を払わなければならなくなります。
それを防ぐため、「キーを制限」をクリックし、制限の設定画面へ移動します。

12.制限の種類を選択
制限の設定画面で「HTTPリファラー(ウェブサイト)」を選択します。

13.アクセスを許可するURLを入力
文字の入力欄が表示されます。ここでは、「Google Mapをどこのページに設置しますか?」という質問に対する設定を入力します。
もしGoogle Mapを表示するページが1ページだけなら、そのページのURLを入力します。
Google Mapを表示するページが複数ある場合は、入力欄以外をクリックすると次の入力欄が表示され、複数のURLを入力することができます。
Google Mapを表示するページが沢山ある場合やサイト内のどのページに表示するか決まっていない場合、将来他のページにも表示したい場合などは、ワイルドカード(「*」)を使用します。ワイルドカードには「ここにどんな文字を何文字入れてもOK」という意味があります。
例えば「http://www.homepage.example.jp」というホームページ内のすべてのページをとりあえず許可しておきたい場合は、「http://www.homepage.example.jp/*」と設定しておけばOKです。
入力が完了したら「保存」をクリックします。

14.APIキーを確認
APIキーの一覧が表示されます。
「キー」表示の横にあるアイコンをクリックすると、APIキーをコピーすることができます。
また、「名前」表示をクリックすると、そのキーの設定画面へ移動し、制限などの設定を変更することができます。
作成したAPIキーには請求先情報を登録する必要があります。請求先情報を登録する手順を参考に、APIキーに請求先情報を登録してください。

 
 

年末年始のお休みについて

2018年12月25日

年末年始の営業についてお知らせいたします。

12/29(土)~1/3(木)は休業とさせていただきます。

1/4(金)は、終日研修のためお電話での対応いたしておりません。
1/7(月)より通常営業となります。

お見積りなどはメールで順次受付しておりますので、
お気軽にお問合せください。

どうぞよろしくお願いいたします。

10年ぶりに岡山県へ

2018年12月18日

この時期はマスクが欠かせなくなる吉岡です。
寒さ対策にマスクは必須です。

さて、先日10年ぶりに岡山県の倉敷へ行きました。
10年前は…そう…小学校の修学旅行で。

あの頃は修学旅行だったので
隅々まで見ることなく、班の人にくっついて行動していましたが
大人になった今は観光の仕方が変わりました。

まずお昼が豪華に。

昔なら絶対にこんな豪華なものなんて食べませんでしたからね。
少食になった私はこの量すら食べられず悔しかったです…。

美観地区を目当てに行ったのですが、
ここは美観地区からは少し離れていました。
倉敷駅から徒歩20分くらいでした。

ご飯を食べて美観地区へ。
すごく寒かったのですが天気がすごく良く写真も綺麗に取れました。
(※私が写っている写真は撮り終わったと思って油断して「寒い」と嘆いている写真です)

いやぁ…本当に寒かったです…。
冷え性にはとても辛い寒さでした。

寒いからもう岡山市内行こうかと話していたときに
人力車お兄さんに声をかけられました。
私は過去に人力車に乗ったことがあるので人力車に乗るのが安くないということは知っており、
さらに寒いので断ろうかと思ったのですが、

連れが人力車に乗ったことがないから乗ってみたいと言ったのと、
人力車のお兄さんがすごく優しそうな人だったので「たまには贅沢してもいいよね…」ということで
乗りました。

全然寒くもないし楽しいし、
お兄さんの知識に勉強させられました。

やっぱ30分乗って
2人7.000円は少し高いなと思いましたが
次は違うところで乗ってみたいです。

メインは岡山市内であったライブでしたが、
いい観光になりました。

岡山は近い近いと行かなかったですが、
近場への旅行も素敵です。

【デザインのツボ】余白、とってますか?

2018年12月11日

コーダーの輿水です。
【デザインのツボ】第5回!
年内最後の【デザインのツボ】は、何もないことに意味がある!余白についてお送りします。

■今回のテーマ

デザインの上で余白の重要さは言うまでもありません。
特にWEBページをデザインする場合には、“ページ左右の余白の指定”を忘れないでください。

■どういうこと?

WEBページのデザインでは余裕のある画面幅を想定してデザイン全体の幅を決め、その中でコンテンツの幅を決めてデザインを作っていく場合が多いかと思います。
しかしこのとき、デザイン全体の幅に余裕があるせいで、コンテンツ幅ぴったりの画面で見たときの余白、というものが忘れられがちなんです。
文字が画面端にくっついていると、まず見栄えが悪くなってしまいます。更に、左右に余白のないサイトは操作性が悪くなってしまう場合があります。特にスマホサイトの操作では画面端が使われやすく、良くありません。

■何が困るの?

「幅が1000px以上の画面では横スクロールが発生しないようにしたいな。じゃあコンテンツの幅は1000pxで、とりあえずデザイン全体の幅は1200pxでデザインしよう!」という感じでデザインを作るとどうなるか・・・。上の画像をご覧ください。
確かに幅1000pxの画面で横スクロールは発生しません。しかし赤い矢印の先、画面左端を見るとテキストが画面端にぴったりくっついてしまっています。これでは見栄えが良くありません・・・。

これをデザインで「コンテンツの内側:980px + 余白:左右10pxずつ = コンテンツ:1000px」などとしておけば、コンテンツが画面端にくっつかず、スクロールも発生しないんです。
またコンテンツを1000pxにしても、ガイドなどで外側にわかるように余白を示しておいてもらえれば、コーダーが意図を汲んで余白をつけた実装をすることができます。
上の画像の例では、コンテンツ内にもコンテンツ外にも余白が示されていないため、いざ実装すると余白がない画面になってしまった・・・、というわけです。

デザイン中は余裕のある領域でデザインを行う場合が多いと思いますが、想定する最低幅ぴったりの画面や、デザインより幅がはるかに大きな画面で見たときにどう見えるのか?考えながらデザインして、ワンランク上のデザインにしましょう!

そうだ 歯医者、行こう。

2018年12月4日

先日3本目の親知らずを抜きました。
フロントの武藤です。

どこの歯が痛いのか
上なのか下なのか
虫歯なのかそうじゃないのかも分からず
なんか痛いなぁとモヤモヤと数日を過ごし
とりあえず歯医者に行こうとなりました。

歯医者さんで診てもらうも虫歯が特定できず…
強いて言えば左下の親知らずかなぁと。

ということで、その日が土曜でしたが
少し無理を言ってその場で抜いてもらいました。
(翌日休診日で何かあっても診てもらえない)

帰宅して親知らず抜いてきた~と
主人に報告すると結構驚かれました。

主人含むまわりの人の経験談が結構壮絶なお話で
抜歯後もとてもつらかったようなので
きっと私はラッキーなパターンだと思います。

その日は腫れることもなく痛み止めを飲んで
予定していた買い物に行き休日を楽しみました。

今では親知らずを抜いてスッキリ。
抜歯前の痛みも感じなくなりました。
やはり親知らずが原因だったようですね。
ヨカッタヨカッタ!

やっぱり年末年始に歯が痛かったら
ご馳走食を思う存分楽しめないし
そんなのは耐えられなーーーい(T_T)
という食い意地が張っている故の即決でしたね…

※あくまで私の場合は特殊だと思うので参考ならないと思います。
 親知らずの抜歯はお医者さんとよく相談して下さい。

我が家も段々とクリスマス仕様になってきました☆

師走はバタバと忙しいですが、
年末年始は楽しみたいですね☆

豊岡でカニ三昧。

2018年11月29日

スタッフの脇本です!

先日豊岡でカニを食べてきました。

関係先の合宿に同行させていただくということで、
気合と気愛を入れて、
カニ様を美味しく頂戴いたしました。

カニしゃぶ。
カニ刺。
焼きガニ。
カニ味噌。
ゆでガニ。
カニ雑炊。

んはぁ~(*´Д`)

11月に解禁となり、シーズン到来。
週末は大変込み合うそうです。

雪が降る前で、気軽に足を運ぶことが出来て、
良かったです。

関係者の皆さま幸せなツアーを企画してくださって、
ありがとうございます。

来年もご一緒できるよう、
頑張ります。

日本三大夜景 -摩耶山-

2018年11月20日

先日、初めて摩耶山の夜景を観にいきました。

元々観に行ってみたかったものの、機会が無く行けていませんでした。
いざ行ってみるとすごい綺麗で…。

ほとんどカップルしかいませんでしたね。
先輩と行っていたのでなんか虚しくなりました…。笑

1つ思ったのが、
お酒を飲んでいく場所ではないなと…。

私は乗り物酔いをしやすく、
さらにお酒も飲んでいたので山道がとても辛かったです…。
次回行くときは飲まずに行きます。笑

イルミネーションを観に行くのは好きなのですが、
夜景は夜景で素敵でした。

他の夜景も観に行ってみたいです。

【デザインのツボ】描画モードは再現できない!

2018年11月13日

コーダーの輿水です。
【デザインのツボ】第4回!
あっという間に12月がすぐそこに・・・。そしてブログの担当も回ってきてしまう・・・。

気を取り直して今回は、かっこいいデザインを作るのに一役買っている、描画モード(ブレンドモード)についてです。

■今回のテーマ

イイ感じのデザインを作るのにとっても大事なのはわかるんですが、この描画モード、設定したデザインを渡されても“実際のサイトでは再現できない(場合も多い)”んです!

■どういうこと?

デザインをしている方にはお馴染みかと思いますが、描画モードというのはPhotoshopなどの画像編集ソフトで複数のレイヤーを合成したように見せることができることができるオプションです。
例として、上の図の「【デザイン】」内にある青い枠組みには描画モードが適用されていて、背景の毛糸が透けているように見えています。CSSで簡単に実現できる半透明化とはどう違うのか?ということで半透明化に切り替えてみると・・・

こうなります。いやー見事に別物です(笑)。でも確かに同じ図形を使用していますし、枠組み以外のパーツは何も変更していません。
ということは、描画モードをサイト上で再現するには画像として切り出しておかないといけない、ということなんです(※)。

※一応CSS3で描画モードが追加されたのですが、まだまだブラウザの対応が追いついておらず、使用できない状況です(2018年11月現在)。

■何が困るの?

もう一度記事冒頭の図を見てみてください。デザイン中には「ここに任意のテキストが入ります。」。そしてご丁寧にも注釈に、「テキストはダミーです。~」との記述が・・・。つまり、青い枠組みは実際のテキスト次第で伸び縮みする可能性がある、ということになります。
もう一度繰り返しますが、描画モードを使った箇所は画像として切り出しておかないといけません。もし描画モードが使われていても、画像として切り出せるパーツなら対応可能です。しかし、画面幅を変える最中に背景とバラバラに動いたり、記事冒頭の図のように中身に合わせて伸縮する、となると、デザインを再現することができなくなってしまうんです。

CSS3の登場で、CSSだけで再現することができるデザインは格段に増えました。しかし今でもCSSでは対応できず、コーダーがあの手この手で四苦八苦してそれっぽく見せている(そしてお客様が気付くかヒヤヒヤしている)部分もあり、残念ながら上記のようにお手上げなデザインもあるのが現実です。
WEB系のデザインを多く手掛けられるデザイナーさんは、是非コーディングで再現できないデザイン、というものがあることを知っていただければと思います。

初めてのお客様はこちらからどうぞ

お見積りはこちらから

資料請求はこちらから

wordpress実装 初期費用0円 ワードプレス構築

下層ページデザインサービス

Coding Pack News Letter

コーディングパックのメールマガジン

お得な情報満載!

バックナンバーはこちら

最新納品実績

  • コーディング

    2P

    2018.05.07

    服飾メーカー

  • コーディング

    1P

    2018.05.01

    不動産

  • コーディング

    1P

    2018.04.30

    専門学校

  • コーディング

    5P

    2018.04.27

    インテリアメーカー

  • コーディング

    1P

    2018.04.27

    美容メーカー

more

pagetop