Ajax:XMLHttpRequest を使ってみました。



XMLHttpRequest はサーバーに対して HTTP リクエストを発行するためのオブジェクトで、 Ajax の A (Asynchronous) を司る中核技術です。これにより、Web ページを切り替えることなくサーバーからデータを取得し、ページ内容を更新することができます。

テストはオフラインで始めたが、XMLHttpRequestはローカルファイルには対応していないので、NGでしたが、例をネットで探しまくりOKとなりました。(WEB系の技術は基本を知らないので)

XMLHttpRequest利用その1(表示時間削減)

XMLHttpRequest を使ってみることになったのは、厳選ショピングセンターというページを作成しているが、各リンク先イメージボタンが沢山あるので表示時間がかかっていたので、一部の各リンク先イメージボタンの表示は閲覧者が指示ボタンで行ってもらうことにしました。(姉はオンラインショッピングが好きで上記のページから買っています)

XMLHttpRequest利用その2(HP修正時間削減)

“情報処理を理解する”として数ページを作成していますが、例えば、「情報処理って」というページに“情報処理を理解する”として該当ページへのリンクを掲載していますが、リンク先の各ページにおいても同じリンクを掲載していましたが、毎年変わる情報も含まれているので同じ修正を各ページに行わなくてはなりませんでしたが、“情報処理を理解する”ページを新規に作成し、XMLHttpRequestを使用して呼び出し事にしました。

厳選ショピングセンターは、ページの切り替えボタンを設定してユーザーによりページの切り替えを行う方法にしました。

XMLHttpRequest の使用方法の詳細は、ソースで確認して下さい。


楽天ウェブサービスでページを作成

楽天ウェブサービスAPIを使用して検索ページを3種類作成してみました。

楽天のAPIは数が多いですがその内の
楽天市場系API :

  • 楽天市場商品検索API:楽天商品検索APIは、楽天市場の商品(共同購入商品・オークション商品・フリマ商品・楽天オークションの個人間オークション商品は除く。) の情報を取得することが可能なAPIです。
    このAPIを使用して

  • 商品価格ナビ製品検索API:商品価格ナビ製品検索APIは、キーワードやジャンルによって楽天プロダクト内の製品を検索することが可能なAPIです。
  • 旅先のお宿検索:楽天トラベルキーワード検索APIは、楽天トラベルの施設をキーワードで検索し、施設情報を取得することが可能なAPIです。デベロッパーは、キーワードでの施設検索をはじめ、地区コードでの絞込み検索も可能となります。

とりあえず、3種類のAPIを使用してみました。

>楽天市場商品検索APIの例題はネット上に沢山あります、自分のレベルにあったサイトを参照して下さい。
上記のページは、Javascript、css、ページ内に記述してありますのご覧ください。


CSSグリッド(iota)の使い勝手がいい







前回の投稿の中にCSSグリッド(iota)を使用して<table>タグの使用をやめました・・・
としましたが、もう少し使用する箇所を考えてみました?
他の利用方法として、横並びのメニューバーを作成する時には<UL>、<li>、STYLE=”float:left”などを組み合わせて作成していましたが、列の数を指定しておけば、<li>に該当する部分を<div>、</div>で、区切っておくと、自動的に等幅、等間隔で綺麗に並べてくれます。





前回の投稿の

“モバイルフレンドリーではありません”からの脱却

ビュアーで検索した時にこのページは“モバイルフレンドリーではありません”と表示されるようになっていますが、タブレットやスマホで見たときに見づらいという事ですが、見ることができないという事ではありません。
とはいえ、“モバイルフレンドリーではありません”という表示がされるとユーザーは見てくれません。

私は“モバイルフレンドリーではありません”を表示させないようにする為に(SEO対策として)、
第一番に画面サイズや画像などの固定値での指定を削除する方法を取りました。
そして、Googleが無料で公開しているモバイルフレンドリーテストツールを用いて、Webページがスマートフォンでの閲覧に適しているかどうかをチェックしています。

そのほかに<table>タグの使用をやめ、CSSグリッド(iota)を使用しすることにしました。本当に簡単に表が表現できます。

アフリエイト方法用のページを(みっともないページですが)iotaを使用して”モバイルフレンドリーではありません”からの脱却しました。列の幅などを「width」などで指定していましたが、幅の指定をしなくても自動的にアサインしてくれます、ほかにも<table>タグを使用していたページもiotaを使用して変換しました。

このブログもスマートフォンに対応するためにWPtouch Mobile Plugin 無料というプラグインをインストールしました

ホームページ作成の変化

ホームページを作り始めて10年を超えてきました、作り始めは、IBMパソコンにインストールされていたホームページビルダーで顧問先のホームページを作成しました。まだ、弊社に残るXPにありますが使用していません、IBMホームページビルダーはVER13まで進化しているようです。

*ここから先は、業務用に使用しているパソコンの話ではなく、一般的に使用するパソコンの話です。

ホームページを閲覧するメディアも変化し、パソコンのみから、タブレット、スマートフォン、ゲーム機(will)などとなってきました。 ホームページの作成もそれなりに変化してきました。

大きな変化はメディアが変わることによる画面に対応した作り方です。
パソコンのみに対応していたころは、四角形を意識してきましたが、パソコンの主流がノートパソコンに変り、さらに画面は横長の14インチが多くなってきました。
ゆえに、これまで作成していたページは左寄りに表示され、ちょっと見た目が悪いことになってきましたので、横長画面の時は中央に表示されるように変更しました。(CSSの変更のみ)

ここ1・2年は、全てのメディアに対応するホームページが増えてきました。14インチ画面(4角形)で閲覧すると“ワッデカイ”と感じます。スマートフォンなどで見ると丁度いいのかも?

私も時流に乗り、アクセス数の多いページから全てのメディアに対応するページを作成してみました。
この投稿のアイキャッチ画像(ロゴ)は、今回作成しましたが大きすぎて少し欠けています。トップページを見ていただければ新しいロゴは全て表示されています。

とりあえず、このサイトのトップページなど数ページを作成しました、時間のある時に変更しようと思っています。

*私はデザイナーではないので、デザイン的には“いいね”とは思っていません。

200ページを超えました。

www.oac-aka.comを立ち上げて10年を超えました。
このサイトの利用は弊社の宣伝用としてが1番の目的ですが、仕事をしていて質問の多い事項や自身の気になる情報などについて、各種ページを作成してきましたその数は200ページを超えました。
全体像はサイトマップでご覧ください。

各種ページのアクセス数を見ているとチョット大袈裟ですが世相が見えてきます。
***
男性と女性のネット検索数を見ると、男性>女性となっています、女性は口コミで情報を得ている?
男性は高齢であってもネット検索を使用しているがと女性は高齢となると家事が忙しいのかネット検索を行わない?
***
毎月トップページに当サイト先月アクセスベスト3を掲示していますが
Gif画像ファイルの作り方
  単純なことですがWindows基本ソフトを知らないことが解ります。

ワードとエクセルの使い分け
  古い言葉かもしれませんがWord派・エクセル派という方が多いようです。
定年後に起業してみる?
  老後の不安(年金)からか50歳代、60歳代からのアクセスが多い
が固定的なっています。
***
ページの事ではありませんが、前にもコメントで書いたことですが、このサイトにおいてある
Windows10の社内での導入を1人でやってみる。
のダウンロードが今年になっても多いようです。

サイトマップを作成しました

これまで、当サイト(www.oac-aka.com)に様々なぺーじ(100ページ以上)を作成してきましたが、情報処理以外にも自分の興味のある分野のページも作成してきました。
WEB系は知らないことばかり、ネット上に公開されている、html、Javascript、phpなどを参照して自分なりに変更して作成したぺーじも多々あります。googleAPIを色々使用していますが、数年前から仕様が変更され正常に表示されなくなったページの修正も行ってきました。
自分の整理のつもりでサイトマップを作成しました、画面によりますが3回ほどのスクロールしていただけますとすべて閲覧できます
上記のページには、スマートフォン用に作成したページは含まれていませんが、、スマートフォン用も10ページほど作成しました
このサイトマップへのリンクは、当サイト(www.oac-aka.com)トップページに「OACサイト紹介」の下段、のリンク先と
業務紹介サイトのメニュー「oac-aka.com」リンク先に指定しています。