2014年6月の記事一覧

最近Googleさんの動きが活発になり、Appleに色々動き出しているみたいですね。

 

特に、スマホに特化しないウェアブル端末の動きと、Googleでいうと、それにとどまらないなんというか電化製品、総Andoroid化を目指している感じに見えます。

「Google I/O 2014」の発表の中で最も知っておくべき17のこと

 

この記事の中で、わかりやすいのが、時計型のウェアブル端末と、車載用「Android Auto」とかのことで、車のメーカとは結構契約しているみたいです。(どうもトヨタは入っていないみたいです)

 

なんかすごい感じですが、なんかGoogleは本気ですべて物、サービスに影響を与えるぜ!って感じが少し怖い感じがします。

 

仕事的には、『なんと保存容量無制限のGoogleドライブ「Google Drive for Work」開始、ファイル1つは最大5TBまでOKなんと保存容量無制限のGoogleドライブ「Google Drive for Work」開始、ファイル1つは最大5TBまでOK

というのが、すごいな~って感じです。あまりお金をかけたくないという企業様は、これを利用するのが良いのでしょうが、個人的には、クラウドバックアップとして使うみたいな感じがよいかと思います。(完全にgoogleにすべてをゆだねてしまうのがちょっと危険な気がします)

 

Appleでいうと、いよいよiPhone6が発売されるみたい(「iPhone 6」の生産開始へ10万人規模の人員を雇用開始、そしてリークされたスペックまとめ)とか、『AppleのiWatchは他社製スマートウォッチと差別化するためにどのようなことを行ってくるのか?』ウェアブル端末で頑張るぜ!って感じが見えますね。

 

 

 

は~~苦労した・・・

 

って言っても、今までバージョン毎での違いがでないように、画像で、グラデーション付きの背景を作っていたのですが、今回諸々の事情で、CSS3で、グラデーションと画像併用の背景を作る事に・・・・・・

 

FireFoxとかは、ちょっとは苦労しましたが、とにかくIE対応ですね・・・・・皆がIEが嫌いになる理由がよ~くわかりました。

 

まず、Ultimate CSS Gradient Generator にアクセスして好きな感じのグラデーションを作成します

CSS_gradetion.png

 

コピーしたのが、これ!

background: #fcfff4; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIH
htbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0i
MTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgP
GxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXR
zPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICA
gPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZmZmNCIgc3RvcC1vcGFjaXR5PSIxIi8
+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOWU5Y2UiIHN0b3Atb3BhY
2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjE
iIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(100%,#e9e9ce)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* IE10+ */
background: linear-gradient(to bottom, #fcfff4 0%,#e9e9ce 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=0 ); /* IE6-8 */

わりずらいかもしれませんが、backgroundの後ろにコメントが書いてあるので、そのコメントが対応しブラウザやバージョンです。ちなみにこのまま貼ってもIE9では動作しません。上記のIE9supportのチェックを入れた際の注意事項の事をしなければなりませんが、CSSに入れ込む為にここを参照しました。

IE9でSVGグラデーションを使う場合の注意事項


ここに書いてある事で、今作っているサイトでは、headerの部分に

<!--[if lt IE 9]> <html lang="ja"> <![endif]-->
<!--[if IE 9]>    <html lang="ja"> <![endif]-->
<!--[if gt IE 9]><!--> <html lang="ja"> <!--<![endif]-->

を追記します。

 

それから、上記の物を外套のタグ(例えばH3)に貼り付け、最後の行にfilter:none;1を追記します。

 

これで、グラデーションはかかります。

 

さらにそこで、画像を使用したい場合には、これに追記します。結論を先に書きますが、このように記述します。

background: #e3f5ab; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(../img/h3_.png) no-repeat 0 0,url(data:image/svg+xml;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d
3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld
0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbm
VhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaX
RzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMC
UiPgogICAgPHN0b3Agb2Zmc2V0PSI0JSIgc3RvcC1jb2xvcj0iI2UzZjVhYiIgc3RvcC
1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjklIiBzdG9wLWNvbG9yPSIjZ
mJmZmYyIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDgl
IiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgID
xzdG9wIG9mZnNldD0iODclIiBzdG9wLWNvbG9yPSIjZmJmZmYyIiBzdG9wLW9wY
WNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I3
ZGYyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8
cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwo
I2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: url(../img/h3_) no-repeat 0 0,-moz-linear-gradient(top, #e3f5ab 4%, #fbfff2 9%, #ffffff 48%, #fbfff2 87%, #b7df2d 100%); /* FF3.6+ */
background: url(../img/h3_.png) no-repeat 0 0,-webkit-gradient(linear, left top, left bottom, color-stop(4%,#e3f5ab), color-stop(9%,#fbfff2), color-stop(48%,#ffffff), color-stop(87%,#fbfff2), color-stop(100%,#b7df2d)); /* Chrome,Safari4+ */
background: url(../img/h3_.png) no-repeat 0 0,-webkit-linear-gradient(top, #e3f5ab 4%,#fbfff2 9%,#ffffff 48%,#fbfff2 87%,#b7df2d 100%); /* Chrome10+,Safari5.1+ */
background: url(../img/h3_.png) no-repeat 0 0,-o-linear-gradient(top, #e3f5ab 4%,#fbfff2 9%,#ffffff 48%,#fbfff2 87%,#b7df2d 100%); /* Opera 11.10+ */
background: url(../img/h3_.png) no-repeat 0 0,-ms-linear-gradient(top, #e3f5ab 4%,#fbfff2 9%,#ffffff 48%,#fbfff2 87%,#b7df2d 100%); /* IE10+ */
background: url(../img/h3_.png) no-repeat 0 0,linear-gradient(to bottom, #e3f5ab 4%,#fbfff2 9%,#ffffff 48%,#fbfff2 87%,#b7df2d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3f5ab', endColorstr='#b7df2d',GradientType=0 ); /* IE6-8 */
filter:none;

上記は、ここを参照しています。1つの要素にグラデーションと背景画像を両立させる方法

 

ここにも書いてありますが、CSS3は。背景画像を2枚重ねる事ができますので、こんな書き方をします。注意点は、順番を間違えてないでください、先に画像の指定をしてからグラデーションの指定です。

 

それと、IE9のグラデーションのSVGの事はここを参照にしました。IE9でグラデーションを実現する方法

 

あ~苦労した・・・・って言っても、ググって色々やっただけなので、上記のサイトの作成者様には大変感謝しています。

自分でネットワーク構築をしていないお客様の所に、NASを設定して設置しました。

 

そうしたら、NASにうまくアクセスできないとの申告があったので、見に行ったら、インターネットVPNが接続している1拠点だけが、うまくできないとのことでした。(他のインターネットVPNの拠点はアクセスができるって状態でした)

 

そこで、現地に行ってみたら、共有フォルダにはアクセスできるのですが、その中に入ろうとする、クライアントPC(Win7)で、エクスプローラーの表示の緑のバーがゆっくりと流れて、結局ネットワークパスがないか、アクセス権がありませんって出てしまいました。

 

ただ、中身にフォルダがひとつだけある、共有フォルダにアクセスすると、すぐに表示されました。

 

????なんだこれ?

 

共有フォルダにアクセスできる時点で、Pingとかも問題なかったので、もしかしたらMTUかな~って思って、Pingでパケットサイズを変えてPingを打ったら、1202でやっとPingが飛び始めました。!?ってことは。MTUは1202 + 8(ICMPヘッダ) + 20(IPヘッダ)ってことで、1230ってことで、なんだこれとは思ったのですが、VPNルータは僕が設定設置したわけではなかったので、さてどうっしようか・・・・って感じになりました。

 

 

そうしたらお客様が、ルータを設置した業者に問い合わせをしてくれて、業者の方からログインIDとか、パスワードを聞き出して頂けたので、ルータの中に入ってみたら、PPPにMTUがなぜか1280に設定してありました。

 

そこで、PPPのMTUの設定を通常のものに修正(回線でMTUのサイズが違うので、サイズは記述しません)し、それに合わせてVPNのmssサイズも修正したら、ばっちり先ほどの問題がうそのようにすぐにNASにアクセスできました!!やった~(^◇^)

 

と言っても、恥をさらすようですが、そんなにすぐに出来たわけでもなく、ネットワークの問題だとは思ったのですが、Pingは届いているしとか思って、ネット上でも、Windows7とNASでのアクセスの不具合っていう記事がたくさんあったので、そちらから色々調べてしまったので、結構時間がかかってしまいました。すぐに自分のPCをネットに接続してパケットをキャプチャしたほうが話が速かったな~ と今更ながら思ってしまいました。

 

というのも、Windowsが怪しいと思って色々調べていて、「う~~ん、やっぱりネットワークしかあり得ない!!」と思ってから、NASへのアクセスのパケットをキャプチャしたので・・・・・・・(ここまで正味4時間ぐらい・・)

 

パケットをキャプチャしたら、tcp segment not caputuredっていうのが、エラーを返す時に出ているのをみて、そうだ!ルータのメーカーに聞いてみよって思って、この状態を行ったら、MTUのサイズを調整したらいかがですかって感じでアドバイスを頂き、やっぱりそうか~って思って、前述したくだりになってって感じです。(申告を受けてから正味6時間ぐらいかかったます)

 

決めつけてかかってはいけないけど、今回の場合の僕もミスは、レイヤーの下層から順に必ず確認することって部分で、Pingが飛ぶのをうのみして、MTUのサイズとかをすぐに調べなかった点です。

 

当たり前すが、基本は大切に、『レイヤーの下層から順に必ず確認すること』を改めて感じました。

 

 

 

 

 

 

 

このページの上部へ

ネットワーク、パソコン サーバ設定

ネットワーク構築ホリテック

 

紆余曲折しながら、独立して中小企業様向けのネットワーク構築
保守、パソコン サーバ、設定運用管理を行っています。ホームページの作成も行っています

ホームページ

 

facebook

 

icon icon

 

マウスコンピューター/G-Tune マウスコンピューター/G-Tune Microsoft Store (マイクロソフトストア) Microsoft Store (マイクロソフトストア)

サイト内検索

にほんブログ村 IT技術ブログへ
にほんブログ村

にほんブログ村 IT技術ブログ ネットワーク・SEへ
にほんブログ村

最近のピクチャ

  • font_before.png
  • MOM_error.png