http://www.netimpact.co.jp/blog 埼玉県のホームページ制作会社ネットインパクトのブログ Sat, 28 Jan 2012 09:04:22 +0000 ja hourly 1 http://wordpress.org/?v=3.0.2 http://www.netimpact.co.jp/blog/13174/ http://www.netimpact.co.jp/blog/13174/#comments Sat, 28 Jan 2012 09:04:22 +0000 Yu-ichi http://www.netimpact.co.jp/blog/?p=13174 #leftcontainerBox { float:left; position: fixed; top:40%; left:60px; z-index:1; #F0F4F9} #leftcontainerBox .buttons { float:left; clear:both; margin:4px 4px 4px 4px; width:55px; height:60px; padding-bottom:2px; } #bottomcontainerBox { float:left; height:30px; width:100%; #F0F4F9} #bottomcontainerBox .buttons { float:left; height:30px; width:85px; margin:4px 4px 4px 4px; } 家にいるときは布団からほとんど出てこないYu-ichiです 最近寒いですね。 さて、以前にこんな記事でPCとスマホの表示を切り替える方法をご紹介しました。 PCとiPhoneやiPadの表示を分ける これは「.htaccess」による切り替えなので、専用のページを用意して、 URLにアクセスしてきた端末のUAによって、表示するページを分けるというものでした。 今回は、同じページ内の一部をPCとスマホで変える方法をご紹介したいと思います。 例えば、PC用に作られたサイトでTOPページにFlashを使っていたりしませんか？ そのサイトにiPhoneでアクセスすると、Flash部分がごっそり無くなって空白ができてしまいます。 サイトのイメージを作っている部分であれば、iPhoneユーザーは何のサイトなのかわかりませんよね。 そこで、iPhoneやiPadでアクセスしてきた場合に、Flashではなく静止画を表示するようにするスクリプトをご紹介したいと思います。 if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('iPod') > 0 ) { document.write('<img src="静止画像">'); }else{ document.write('<"flashの呼出し">'); } 直接上記のスクリプトを書いても良いですが、外部ファイル化しておいた方がいいでしょう。 if文でUAを判定して、当てはまるものは最初の「document.write」に書かれているものを表示し、 当てはまらなかったものは次の「document.write」に書かれているものを表示します。 今回はFlashと静止画の切り替えだったので、document.writeを使ってタグを書くようにしましたが、 他にも応用がきくと思いますので、いろいろ試してみてください。 ちなみに、Androidの判定をしたい場合は、if文に navigator.userAgent.indexOf('Android') > 0 を追加してあげてください。 新しいハードの登場で、ホームページの技術もどんどん進化していますね。 遅れないようにしないと！]]> http://www.netimpact.co.jp/blog/13174/feed/ 0 http://www.netimpact.co.jp/blog/13168/ http://www.netimpact.co.jp/blog/13168/#comments Sat, 28 Jan 2012 06:46:40 +0000 taka http://www.netimpact.co.jp/blog/?p=13168 #leftcontainerBox { float:left; position: fixed; top:40%; left:60px; z-index:1; #F0F4F9} #leftcontainerBox .buttons { float:left; clear:both; margin:4px 4px 4px 4px; width:55px; height:60px; padding-bottom:2px; } #bottomcontainerBox { float:left; height:30px; width:100%; #F0F4F9} #bottomcontainerBox .buttons { float:left; height:30px; width:85px; margin:4px 4px 4px 4px; } ドコモのアンドロイド携帯を使っているtakaです。 最近頻繁にネットワーク障害が発生していますが・・ NTTドコモは、1月26日に東京都で通信障害を発生させ、FOMAの音声とパケット通信サービスが利用しにくい事象が発生し252万人が影響を受けたようです。 そしてNTTドコモは今日も、東北地方で通信障害を発生させているようです。 auでも２６日に東京都下西部１１市町で、携帯電話や固定通信サービスが利用しにくい状況になったようです。 何が原因でネットワーク障害が多発しているのか？ 1/26のドコモ障害発生の概要は、以下のとおりだそうです。 まず、スマートフォン契約者の増加に対応するために、ドコモは1月25日未明から新型パケット交換機に切り替えた。 新型パケット交換機への切替で、処理可能な同時接続数は88万から180万に増えるたが、 1時間あたりの信号量は2750万から1410万へと減少してしまったという。 （だとしたら間抜けですが・・） そして、その日のトラフィックの上昇に伴い、制御信号がパケット交換機の処理能力をオーバーフローし、ネットワークの自動規制により、パケットサービスと音声サービスが利用しにくい状態となったというものだ。 この日の障害がドコモの発表通り、トラフィックの上昇によるものか？正直疑わしい気もするが、 ドコモを含め通信キャリアがパケットの増加への対応に追われているのは事実と思われます。 パケット交換とは？ パケット交換とは、インターネットやコンピュータのネットワークで広く利用されているデファクトスタンダード通信方式です。   送信するデジタル・データをパケット（郵便の小包のようなデータの固まり）という単位に分割して、通信する方式です。データはパケットに分割され、ルータからルータに転送されながら最終的な目的地にたどり着くしくみです。   スマホの普及で急速に増えるパケット通信量 今回のNTTドコモのトラブルの原因は、制御信号がパケット交換機の処理能力をオーバーフローしたということだが、その背景にあるのがスマートフォンの急激による制御信号が急増だという。 スマホが発する制御信号は、携帯電話が実際にネットワークに接続するために必要となる接続要求や位置情報などでガラケーより、10倍ほど頻繁にこの信号を発しているらしい。 さらに、VoIP、チャット・・など頻繁に制御信号を必要とするスマーホのアプリケーションが急激に普及したことが制御信号が増加に拍車をかけているようだ。 こうなると、ドコモ1社だけでは解決が難しくなって来ている気がします。 スマホの普及やアプリの利用の増加は、急速に進むでしょうし抑制も難しいでしょう。 こうなると、 キャリア全体やスマホのＯＳを創っているアップルやGoogle, アプリの開発会社など、全体でインフラを考えないと解決できない問題になってきたように思えます。 根が深い問題だけに、当面、ネットワーク障害は頻発するのでしょうね？]]> http://www.netimpact.co.jp/blog/13168/feed/ 0 http://www.netimpact.co.jp/blog/13155/ http://www.netimpact.co.jp/blog/13155/#comments Sat, 28 Jan 2012 01:08:41 +0000 atsushi http://www.netimpact.co.jp/blog/?p=13155 #leftcontainerBox { float:left; position: fixed; top:40%; left:60px; z-index:1; #F0F4F9} #leftcontainerBox .buttons { float:left; clear:both; margin:4px 4px 4px 4px; width:55px; height:60px; padding-bottom:2px; } #bottomcontainerBox { float:left; height:30px; width:100%; #F0F4F9} #bottomcontainerBox .buttons { float:left; height:30px; width:85px; margin:4px 4px 4px 4px; } 毎朝車のフロントガラスががっちり凍っているatsushiです。 以前、iphoneのアプリデザインなどに使えるデザインテンプレートをご紹介しましたが、やっぱりAndroid版はないのかなと探してみたらやっぱりありました。 スマホサイトのデザインだとiPhoneとAndroidどっちのデザインテンプレート使っても変わりませんけど、アプリのデザインなんかでは、アイコンとかボタンのデザインとか違うので役に立つと思います。 Android GUI PSD Vector Kit ちなみにiPad版のデザインテンプレートもありました。 iPad GUI PSD スマホのアプリデザインやスマホ版サイトのデザインに使うと制作時間の短縮が計れるし、イメージがつかみやすいかもしれませんね。 ダウンロードしておくことをおすすめします。 Android GUI PSD Vector Kit]]> http://www.netimpact.co.jp/blog/13155/feed/ 0 http://www.netimpact.co.jp/blog/13149/ http://www.netimpact.co.jp/blog/13149/#comments Fri, 27 Jan 2012 16:26:02 +0000 netimpact http://www.netimpact.co.jp/blog/?p=13149 #leftcontainerBox { float:left; position: fixed; top:40%; left:60px; z-index:1; #F0F4F9} #leftcontainerBox .buttons { float:left; clear:both; margin:4px 4px 4px 4px; width:55px; height:60px; padding-bottom:2px; } #bottomcontainerBox { float:left; height:30px; width:100%; #F0F4F9} #bottomcontainerBox .buttons { float:left; height:30px; width:85px; margin:4px 4px 4px 4px; } 本格的に風邪を引いてしまったjyunzyです(||´Д｀)ｏ web制作、特にデザインをする時には何かとついて回る「色選び」。 ホームページ制作をした事のある人なら必ずぶつかる問題です。 firefoxを使っている人ならcolorzillaというプラグインを使えば、ブラウザ上での 色をピックアップする事ができます。 これは有名なので知っている人は多いでしょう。 ただ、あくまでブラウザの画面内だけでしか色が拾えないのが、個人的には残念に思っています。 そこで見つけたのがこのFE – Color Palette！ これは画面に写っている色なら何でも拾えちゃうスグレモノです。 「画面の色」ボタンをクリックすると、マウスポインタがスポイトの形になるので、 そのまま拾いたい色の所でクリックすれば、RGB形式や16進数での色を調べることができます。 色を選んでいる時は、拡大表示されるウインドウも表示されるので、小さい画像でも色をピックアップ することができますよ。 colorzillaもお手軽でいいのですが、ブラウザ以外から色を拾う時はこれが便利ですね。]]> http://www.netimpact.co.jp/blog/13149/feed/ 0 http://www.netimpact.co.jp/blog/13134/ http://www.netimpact.co.jp/blog/13134/#comments Sat, 21 Jan 2012 07:30:54 +0000 jyunzy http://www.netimpact.co.jp/blog/?p=13134 #leftcontainerBox { float:left; position: fixed; top:40%; left:60px; z-index:1; #F0F4F9} #leftcontainerBox .buttons { float:left; clear:both; margin:4px 4px 4px 4px; width:55px; height:60px; padding-bottom:2px; } #bottomcontainerBox { float:left; height:30px; width:100%; #F0F4F9} #bottomcontainerBox .buttons { float:left; height:30px; width:85px; margin:4px 4px 4px 4px; } スマートフォンを狙ったワンクリック詐欺が流行っているそうです。 私の所にも来ました。 手法自体は単純で、メールで詐欺サイトのURLが送られ、リンクを押すとアダルトサイトが開かれ、興味本位で動画や画像を開くと強制的にサイトに登録したことにさせられてしまうというものです。 携帯の時と何が違うのかというと、スマホだとパソコン向けのワンクリック詐欺のように以下のデータが表示されてしまいます。 IPアドレス（インターネット上の住所にあたるもの、サイト側ならすぐにわかるデータ） 携帯会社情報（携帯電話の会社名。これもサイト側なら取れるデータ）  お客様ID：（犯人側が勝手に登録したもの） 手の込んだサイトだと「携帯端末のデータの送信完了。お客様のご利用金額は￥55,000になります」といったようなポップアップを開く所もあります。 まあパソコンに慣れている人なら「スマホにもこんなメールが来たか」という程度で無視できると思いますが、中には普段はパソコンはやらずに最近スマホを使い始めた、という人なら、こんなメールが来たら驚くでしょうね。 基本は絶対にお金を払ってはいけません。 また、しつこくメールが来るからと言って退会処理をしたり問合せたりしない事です。 電話番号なんか相手に伝わってしまったらそれこそ犯人側に「カモ」だと思われてしまうでしょう。 こういったワンクリック詐欺の被害者の多くは、子供や学生だそうです。 面白半分で見て、請求画面に驚くが親にバレるのが怖いので、自分で無理に払ってしまい、悪質な請求が繰り返し来るという例もあるそうです。 変なメールが来ても怖がらないように普段から親子のコミュニケーションをとっておくのが大事ですね。]]> http://www.netimpact.co.jp/blog/13134/feed/ 0 http://www.netimpact.co.jp/blog/13133/ http://www.netimpact.co.jp/blog/13133/#comments Sat, 21 Jan 2012 07:08:11 +0000 Yu-ichi http://www.netimpact.co.jp/blog/?p=13133 #leftcontainerBox { float:left; position: fixed; top:40%; left:60px; z-index:1; #F0F4F9} #leftcontainerBox .buttons { float:left; clear:both; margin:4px 4px 4px 4px; width:55px; height:60px; padding-bottom:2px; } #bottomcontainerBox { float:left; height:30px; width:100%; #F0F4F9} #bottomcontainerBox .buttons { float:left; height:30px; width:85px; margin:4px 4px 4px 4px; } あまりに寒いので布団の中で冬眠して、春になったら起こしてほしいYu-ichiです WordPressで、ユーザー権限を細かく設定するプラグインはいくつかありますが、 今回は、管理権限とカテゴリーへの投稿を制限するプラグインをご紹介したいと思います。 ユーザー権限のプラグインは、「Role Manager」というものを使っています。 こちらのサイトで詳しく解説されているので、参考にしてみてください。 http://technolog.jp/website/cms/2084 通常、Wordpressではユーザーを5つの権限で管理できますが カテゴリーの追加・削除をさせたくないけど、他の人の投稿を削除する権限を与えたい。 と言った場合に、編集者と投稿者のどちらにしてもニーズを満たせませんが、 このプラグインなら、編集者権限からカテゴリーに関する操作を禁止にしたり、 新しい権限を作って細かく設定することが可能です。 複数の人でWordpressを管理することがあれば、是非とも入れておきたいプラグインです。 で、この「Role Manager」でも出来ないのが、ユーザー毎に投稿できるカテゴリーを制限する機能です。 例えば、営業部の人間には「キャンペーン」のカテゴリーを編集できる権限を与え、商品企画部には「新商品紹介」のカテゴリーを編集できる権限を与えるといったことが可能になります。 それを可能にするプラグインを、自作された方がいたのでご紹介させていただきます。 カテゴリーを制限するプラグイン（自作）  ｜  ＩＳプランニング とても使いやすくデザインされているので、簡単に使えると思います。 前述のプラグインとこれさえ入れておけば、ユーザーコントロールはほぼできてしまいます。 本当にWordpressってプラグインが充実していて凄いですね。 他にも役立つプラグインを見つけたら紹介していきますね]]> http://www.netimpact.co.jp/blog/13133/feed/ 0 http://www.netimpact.co.jp/blog/13128/ http://www.netimpact.co.jp/blog/13128/#comments Sat, 21 Jan 2012 01:17:42 +0000 taka http://www.netimpact.co.jp/blog/?p=13128 #leftcontainerBox { float:left; position: fixed; top:40%; left:60px; z-index:1; #F0F4F9} #leftcontainerBox .buttons { float:left; clear:both; margin:4px 4px 4px 4px; width:55px; height:60px; padding-bottom:2px; } #bottomcontainerBox { float:left; height:30px; width:100%; #F0F4F9} #bottomcontainerBox .buttons { float:left; height:30px; width:85px; margin:4px 4px 4px 4px; } Ｔａｋａです。最近、DTCP-IP対応レコーダーやDTCP-IP対応ＴＶなど DTCP－IPという言葉を目にします。 DTCP－IPって何？ TCP-IPは、今や誰でも知っているインターネットの中核の通信規約ですが DTCP－IPって何なのでしょうか？ 調べてみると、DTCP－IPとは、「Digital Transmission Content Protection over Internet Protocol」の略語のようです。 著作権保護技術であるDTCP(Digital Transmission Content Protection)をIPネットワークに適用したものだそうだ。 例えば、我家のテレビはレグザですが、レグザで録画した「地デジ」などのハイビジョン番組は 録画で使用したテレビやパソコンでしか再生できなかったので、みんなで楽しみたいときや別の部屋で見たいときは、ブルーレイやDVDにダビングするか、ハードディスクレコーダーを部屋ごとに買ってそれぞれに録画するしか方法がありませんでした。 しかし、DTCP－IPに対応した機器なら、家のネットワークにつなげることで、録画で使用した機器がない部屋でも録画した地デジ番組を見る事ができます。 つまり著作権の壁を越えて、家の中のＬＡＮ内なら、どこでもデジタルコンテンツを伝送するための規格がDTCP－IPです。 DTCP-IPは、コンテンツを暗号化してIPネットワーク上に送信することで、パケットの盗聴やコンテンツの不正なコピーを防いだり、またコンテンツが家庭内LANから外部のネットワークへ流出することを防ぐことでコンテンツの著作権を保護する役割をもつようです。 確かにテレビもデジタル化され、著作権保護のため不便をしいられる事が多々ありますね。 これからは、この技術でもう少し実用的な融通のきく利用方法に進歩するといいですね。 でも、その前に家庭のデジタル機器をＬＡＮ接続するのが先ですね。]]> http://www.netimpact.co.jp/blog/13128/feed/ 0 http://www.netimpact.co.jp/blog/13115/ http://www.netimpact.co.jp/blog/13115/#comments Wed, 18 Jan 2012 02:12:12 +0000 atsushi http://www.netimpact.co.jp/blog/?p=13115 #leftcontainerBox { float:left; position: fixed; top:40%; left:60px; z-index:1; #F0F4F9} #leftcontainerBox .buttons { float:left; clear:both; margin:4px 4px 4px 4px; width:55px; height:60px; padding-bottom:2px; } #bottomcontainerBox { float:left; height:30px; width:100%; #F0F4F9} #bottomcontainerBox .buttons { float:left; height:30px; width:85px; margin:4px 4px 4px 4px; } ホームベーカリーでパンを焼くことにハマっているatsushiです。 EC－CUBEのメールテンプレート機能って便利なんですが、ちょっと足りないなと思う所がいくつかあります。 1.商品の発送完了メールテンプレートがない。 デフォルトでは、受注受付メール・受注キャンセル受付メール・取り寄せ確認メール・お問合わせ受付メールしかありません。商品の発送が完了した場合に、顧客に通知するメールテンプレートがないんですね。 2.各メールテンプレートの最後にショップ名や連絡先が自動で入らない。 これはあったらいいなというものですが、各メールテンプレートは、自由に変更できるようになっていますが、ショップの連絡先などがデフォルトでは入っていません。 各メールテンプレートに自分で入力しないといけません。 3.動的データーの挿入部分が管理画面から選択できない。 これもあったらいいなというものですが、メールテンプレートでは、購入した商品の情報や、金額、お届け先などの情報が自動で挿入されるようになっています。この動的データーをテンプレートごとに必要なものを選べるようになっているとより使いやすそうです。 その中で1と3はカスタマイズで対応可能です。 1のメールテンプレートの追加ですが、まず、「システム設定」-「マスターデータ管理」で「mtb_mail_template」を選択し、ID（デフォルトだと6以降）とメールテンプレート名を入力します。 次に、「システム設定」-「マスターデータ管理」で「mtb_mail_tpl_path」を選択し、「mtb_mail_template」で追加したIDと使用するメールテンプレートを指定します。 ※使用するメールテンプレートは、事前に基本の「order_mail.tpl」をコピーしリネームしてアップしておきます。 画像では、発送完了メールをfinish_mail.tplにしています。 これで追加したメールテンプレートが使用することができます。 3の動的データーの挿入部分のについては、「システム設定」-「マスターデータ管理」で「mtb_mail_tpl_path」で指定したファイルの不要な部分を削除することで挿入する項目を変更することが可能でした。 お試しください。]]> http://www.netimpact.co.jp/blog/13115/feed/ 1 http://www.netimpact.co.jp/blog/13109/ http://www.netimpact.co.jp/blog/13109/#comments Sat, 14 Jan 2012 13:27:24 +0000 taka http://www.netimpact.co.jp/blog/?p=13109 #leftcontainerBox { float:left; position: fixed; top:40%; left:60px; z-index:1; #F0F4F9} #leftcontainerBox .buttons { float:left; clear:both; margin:4px 4px 4px 4px; width:55px; height:60px; padding-bottom:2px; } #bottomcontainerBox { float:left; height:30px; width:100%; #F0F4F9} #bottomcontainerBox .buttons { float:left; height:30px; width:85px; margin:4px 4px 4px 4px; } 昨日、車で８００キロ移動したtakaです。 2012年、ヨーロッパの財政危機と中東の危機  今年に入って、ヨーロッパの財政危機に加えて、中東、特にイランの危険度が増しています。 　（日本では、あまり大きな問題と捉えられていないようですが・・・） 昨年には、暴徒化したイラン民衆によるイギリス大使館襲撃事件も発生していますし、 イランとアメリカ、イギリス、そしてイスラエルの関係は、かなり危険な状況になっているようです。 イランの核開発疑惑 原因となっているのは、イランの核兵器の開発です。この核の目標とされるのは、当然イスラエルです。 そして、イスラエルを支援するアメリカとイギリスがイランに経済制裁で圧力をかけている状況です。 当然、イスラエルもイランの核爆弾ができあがる前に反撃の準備をしているでしょう。  イランの原油輸出に制裁金 そして、イランの核兵器の開発の制裁として、アメリカを中心とする米欧諸国は、原油輸入に制裁金を課す経済封鎖をおこなおうとしています。 アメリカは、日本にもイランからの石油購入を止めるように協力（圧力）を求めてきています。 日本は、イランから多くの石油を輸入している上、福島の原発事故で多くの原発が停止状態にあり、石油を今まで以上に必要としている時期です。 日本は、アメリカを取るか？石油を取るか？の選択を求められています。 （そして、どうやらアメリカを取る事にしたようですが・・・）  経済封鎖で追い詰められたらイランは 世界の石油決済のほとんどは、ドルで行われているので、イラン中央銀行へ制裁を掛けられるとイランは、石油の決済ができなくなり、そうなると破綻は確実です。 そこまで追い込まれたイランは、今年になってその報復として、ホルムズ海峡の海上封鎖をちらつかせています。 ホルムズ海峡が封鎖されると ホルムズ海峡から中東の石油の多くはタンカーで世界に輸出されています。 大型タンカーを一隻沈めれば、狭くて浅いホルムズ海峡は通れなくなるようです。 紛争や戦争となれば、ホルムズ海峡は使えなくなり、中東の石油の流通がストップします。 石油ショックとインフレが襲ってくる イランは、原油輸出に制裁金を課せば、一滴の原油も、ホルムズ海峡を通さないと発言しています。 戦争が起これば、石油危機が起こり、石油の価格は暴騰し、同時に資源・穀物、金属資源なども高騰するでしょう。 世界中がものすごいインフレに襲われます。  2012年は、激動の年になりそうです。]]> http://www.netimpact.co.jp/blog/13109/feed/ 0 http://www.netimpact.co.jp/blog/13100/ http://www.netimpact.co.jp/blog/13100/#comments Sat, 14 Jan 2012 12:49:40 +0000 jyunzy http://www.netimpact.co.jp/blog/?p=13100 #leftcontainerBox { float:left; position: fixed; top:40%; left:60px; z-index:1; #F0F4F9} #leftcontainerBox .buttons { float:left; clear:both; margin:4px 4px 4px 4px; width:55px; height:60px; padding-bottom:2px; } #bottomcontainerBox { float:left; height:30px; width:100%; #F0F4F9} #bottomcontainerBox .buttons { float:left; height:30px; width:85px; margin:4px 4px 4px 4px; } 最近、iPhoneやandroidなどのスマホ対応をしたサイトが増えてきました。 弊社でもスマホサイトを作っているのですが、PCサイトとはまた違った点に注意しないといけませんね。 特にスマホを横にした時は横幅が広がるので、それに対応するため「リキッドレイアウト」で制作しないといけません。 具体的には 背景は横方向に繰り返し表示されるようにする 画像は中央揃えにする （場合によりますが）横幅の指定はpxではなく％にする といった所でしょうか。（私自身まだ勉強中です） また、スマホサイトでは文字サイズが自動調整されてしまうのですが、以下のように指定すれば自動調整をオフにできます。 body {     -webkit-text-size-adjust: none; } まだまだPCサイトと違う点がたくさんあるのですが、それはまた次の機会に書きたいと思います。]]> http://www.netimpact.co.jp/blog/13100/feed/ 0