TAの日々ブログ（＋α）: ホームページ

ラベル ホームページ の投稿を表示しています。すべての投稿を表示

2021年10月10日日曜日

【HTML】POSTリクエストを実行する

HTMLファイルで、POSTリクエスト実行するサンプルです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Post Test</title>
</head>
<body>

<form name="f1" method="POST" action="https://aaa.co.jp/web/Login">
clientCD<br>
<input type="text" name="id" value="00000225"><br>
passwd<br>
<input type="text" name="passwd" value="zUT0cOtED5ifg3NkY7LAAA==" ><br>
keyLifeTime<br>
<input type="text" name="lifeTime" value="20221020202923"><br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

【参考URL】

https://www.upken.jp/kb/QfdSQLrcmikTFlXgcrWgzBGpPLJRFQ.html

https://developer.mozilla.org/ja/docs/Learn/Forms/Sending_and_retrieving_form_data

POSTとGETの違い

https://qiita.com/kanataxa/items/522efb74421255f0e0a1

JavaScriptでURL表示する

https://morizyun.github.io/javascript/location-href.html

2021年5月21日金曜日

Webアイコンフォントの作り方

ホームページでアイコン作成するのに、便利なツールがありました。

以下のサイトで詳しく説明されているので、手順通りに大なうとデモページが作成できます。

デモページを参考にすると、アイコンをうまく使うことができます。

【参考ページ】

https://qiita.com/m-nakamura/items/abc871b1da6cfaf4db42

【Webアイコンフォントツール：IcoMoon】

https://icomoon.io/app/#/select

2021年5月20日木曜日

【Edge】ChromiumベースのMicrosoft Edgeと旧Microsoft Edgeを共存させる方法

ChromiumベースのMicrosoft Edgeと旧Microsoft Edgeを共存させる方法をまとめたサイトがあったので、実際に試してみました。

まず、バージョンを確認しましょう。

【確認手順】

Microsoft Edge画面右上の「・・・」から、「設定」選択(新の場合は、「Microsoft Edgeについて」を選択）する。
※表示する手順は、Microsoft Edgeのバージョンによって異なります。

※アイコンで新旧どちらのEdgeかは確認できます。

すでに新Edge(Chromium)をインストール済みの場合は、アンインストールして、旧Edgeに戻します。

手順は、https://tanweb.net/2020/03/11/31135/　を参考にします。

(1) ChromiumベースのMicrosoft Edgeインストーラーをダウンロードする。

(2) Microsoft Edge用グループポリシー管理ファイルをダウンロード、インストールする。

https://paso-kake.com/it/microsoft-edge/9750/　が参考になります。

(3) ローカルグループポリシーエディターを使用してポリシー設定を変更する。

①icrosoftEdgePolicyTemplates.cabがダウンロードされると思います。マウスでダブルクリックすると、cabファイルの中にMicrosoftEdgePolicyTemplates.zipが格納されていると思うので、このzipファイルを任意の場所に展開しましょう。(zipファイルをマウスで右クリック→[展開(E)...]を押下)

②[zipファイルを解凍したフォルダ]\MicrosoftEdgePolicyTemplates\windows\admx\msedgeupdate.admxをC:\Windows\PolicyDefinitionsにコピー、
[zipファイルを解凍したフォルダ]\MicrosoftEdgePolicyTemplates\windows\admx\ja-JP\msedgeupdate.admlをC:\Windows\PolicyDefinitions\ja-JPにコピーします。

③実行ダイアログを表示し、「gpedit.msc」と入力して[OK]を押下します。

（「ここに入力して検索」に「gpedit.msc」を入力捨ても可能）

④ローカルグループポリシーエディターが起動したら、[コンピューターの構成]-[管理用テンプレート]-[Microsoft Edge の更新]-[アプリケーション]を押下して、「Microsoft Edgeでのブラウザーの同時実行エクスペリエンスを許可する」ポリシーを有効に更新します。

(4) ChromiumベースのMicrosoft Edgeインストーラーを使用してインストール(又は一旦アンインストールしてから再インストール)する。

【参考URL】

https://qiita.com/hideki0145/items/2d5b16b4990f8c55bdcd

2020年9月6日日曜日

Bloggerで新しいサイト追加で、addsenseのガジェット追加で、「AdSense ガジェットを設定するには、まず [収益] タブを開いて AdSense アカウントを設定する必要があります」の対応

Blogger、「新しいBloggerを作成する」で新しいブログを作成しました。

そして、「レイアウト」「サイドバー」で、AdSense ガジェット追加を行ったところ、
「AdSense ガジェットを設定するには、まず [収益] タブを開いて AdSense アカウントを設定する必要があります。」が表示されました。

この対応方法を調べていたのですが、なかなか検索で見つからず苦労しました。
対応方法は、以下設定すればできそうことがわかりました。

【設定手順】
①すでに設定しているBloggerの「収益」をクリック
②「AdSense にアクセスして収益の詳細情報を確認する」を選択して、Addsenseの管理画面を開く

③管理画面の左上メニューから「サイト」選択

④サイトの追加で、「新しく作成したBlogger」のアドレスを追加する

⇒サイト追加すると、追加したアドレスに「承認手続きを進めています」と表示されますので、「準備完了」と表示されるようになりましたら、Addsenseのガジェット追加できるかな、と思っています。
Googleからの返事がくるのが待ち遠しい。

【参考ＵＲＬ】
https://support.google.com/adsense/answer/9128461?hl=ja&ref_topic=9137703
https://mycodingjp.blogspot.com/2018/10/blog-post.html?m=1

2020年8月31日月曜日

ブログで稼ぐ

よく聞かれるのが「ブログを始めたい」「ブログで稼げるの？」と聞かれます。
調べてみると、動画がありましたので、紹介します。

資産収入で、ブログを作成して、広告でこつこつ稼ぐのに、下アドレスサイト視聴すると勉強になります。

一回ブログ書いておくと、人気のあるサイトになれば、コツコツ広告費が入るので、やってみる価値はあると思います。

経験上、人気の投稿作成するのがなかなか難しいのですが、それも色々試しながら、コツを獲得するしかありません。

①ブログをどうやって始めるのか？【ブログで稼ぐ】
https://www.youtube.com/watch?v=TEMUZvQSM1Q
　・無料ブログを使用する。
　・WordPressでブログの作成した場合は複雑なものが作成可能です。WordPressで咲くした場合は費用含めて説明していいます（費用年間2万程度だそうです）
　・検索するキーワードを考える

②ブログで稼ぐ
私はBloggerでブログで、始めました。
　　→アフィリエイトもAdsenseで多少稼ぐことが可能です。
　　（私は稼ごうとする気力がないので、稼いだ金額は、年間　やユニセフに募集する程度もないです(2000*12)。真剣にやれば、以外と稼げるかもとは感じています）
　　　キーワードを意識した文章を作成する
　　　　役立つ記事を各。
　　　　稼ぎたい場合は、ジャンルを選ぶ

→ブログで稼いでいる実例を説明した動画
https://www.youtube.com/watch?v=nwrlcNSdw0U
https://www.youtube.com/watch?v=GZyCuuVHhbY
https://www.youtube.com/watch?v=it-lsxybVyo
https://www.youtube.com/watch?v=9meujw24Xt8

③Google検索について
https://youtu.be/GZyCuuVHhbY

2020年8月8日土曜日

【スマホ】サムネイル表示されないの対応方法2

サムネイル表示されないの対応方法をさらに調べてみました。
https://www.sakurasaku-labo.jp/blogs/meta-thumbnail
上記サイトに記載していますように、タグを追加すればいいようです。
<meta name=”thumbnail” content=”http://（画像パス）” />

※設定すれば必ず表示されるわけではなく、表示させるかどうかはGoogleのアルゴリズムが判断するので、考える手段は色々試してみないといけないので、また手段見つけたら投稿します

2020年7月18日土曜日

【株】株を始める人向け動画

株を始める人向けに、見ると勉強になる動画サイトをまとめてみました。

①株を始める方向け
（株ってなに？て所から開設しています）
https://www.youtube.com/watch?v=iQrBHpYYMvA
https://www.youtube.com/watch?v=NLTjeXFnNiY
https://www.youtube.com/watch?v=XuPIdFkgP20
https://www.youtube.com/watch?v=7UWxEYbRH78
分かりやすく説明しているので、本読んで勉強するより、すごく勉強になります。

②信用取引、空売り
https://www.youtube.com/watch?v=IWlNPjGrJP8
クロス取引での優待保持しながら、リスク回避など説明しています。権利日とか考えた取引考えている人はみるといいと思います。

③ 投資信託
https://www.youtube.com/watch?v=9dsBvq1lajY
https://www.youtube.com/watch?v=vyIfi4ecXiY
①で株説明していた人の「投資信託」についての動画です

④REIT
https://www.youtube.com/watch?v=kefZliqrLJM

【その他（株を選ぶときに知っておくこと）】
https://www.youtube.com/watch?v=T5ezuaomvW8 　・・・「会社選び」の説明
https://www.youtube.com/watch?v=at6SqdEU7fQ　・・・株単位の説明
https://www.youtube.com/watch?v=ZD3ZLQ0_gFc　・・・PER,PBRの説明
https://www.youtube.com/watch?v=q8HGf369rQA　・・・配当金の説明
https://www.youtube.com/watch?v=y0G7o-UOIqQ　・・・株主優待の説明
https://www.youtube.com/watch?v=ODjCP6BMIoQ　・・・SBIネオモバイル証券で少ないお金で株購入試したい人向け（Tポイントでも買えます）
①で株説明していた人の動画です

2020年7月5日日曜日

【スマホ】サムネイル表示されないの対応方法

前回ネット上で、公開されている方法で、サムネイル対応してみました。
https://tasano2525.blogspot.com/2020/05/blog-post.html
しかし、サムネイル表示できませんでした。

そこで、実際にサムネイル表示されているサイトで検証して、試したところ無事表示できました。
そこで、実際に試した方法を列挙します。
①OGPの設定
「Open Graph Protcol」の略でFacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素です。設定方法は下記サイトを参考にすると便利です。

https://digitalidentity.co.jp/blog/seo/ogp-share-setting.html
https://hirashimatakumi.com/blog/3049.html

【設定タグ】
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta property="og:url" content=" ページの URL" />
<meta property="og:type" content="website">
<meta property="og:title" content=" ページのタイトル" />
<meta property="og:description" content=" ページのディスクリプション" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像の URL" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="アプリのID" />
// twitter用
<meta name="twitter:card" content="summary_large_image" />

②実際に①で設定した画像をサムネイル以外で使用する
③検索用キーワード（google検索で使用されるキーワード）を設定する（サイト内で使用する）
　おそらく、"og:site_name"に設定するのが有効な様子

同じように、サムネイル表示できなくって、困っている人がいると思いますので、参考にしていただけると嬉しいです。

2018年9月23日日曜日

【Webサイト】HP用のアクセスカウンター

ホームページに張り付けるカウンターをさがしてみました。
https://freesoft-100.com/homepage/rental/counter.html

上記のサイトで色々紹介されています。
他にも紹介サイト（例：https://internet.watch.impress.co.jp/www/article/1999/0719/special.htm）あります。

簡単に設定したい方は、
http://www.rays-counter.com/
が簡単です。

カウンターは、他の広告表示されるものもあるので、選ぶのに慎重さが必要かもしれません。
忍者カウントも設定は簡単だったのですが、広告がうざいのでやめました
http://www.ninja.co.jp/counter/
FC2は設定方法が面倒なのでこちらもやめました。
https://counter.fc2.com/

2018年7月15日日曜日

SVGファイル変換と、WEBアイコンフォント

１、SVGファイル変換
PNGファイルをSVGファイル変換するフリーツールがありました。
https://convertio.co/ja/png-svg/
にて、「ファイル追加」「変換」をクリックします。
変換後、ダウンロードボタンをクリックで、SVGファイルをダウンロードします。

２、WEBフォント作成
追加するには、icomoon.ioを使います。
ブラウザは、google chromeを使用してください。
（事前準備）PNGファイルを、svg形式でアイコンを作っておきます。
①https://icomoon.io/のselect画面を開いて、IcoMoonAppをクリック。

②初期状態でアイコンが表示されています。
登録済みのアイコン一覧を読み込むため、左上の「import icon」をクリックし、以前作成した場合は、\selection.jsonを開きます。
⇒初回の場合は、この処理はいりません。
登録済みのアイコンが選択状態で表示されます。（黄色枠が選択状態）

③追加するアイコンを登録します。
　左上の「import icon」から準備したsvgファイルを選択します。選択して画面に表示された段階だと選択されていないので、アイコンをクリックして選択状態にします。
④右下の「Generate Font」をクリックします。
　フォントが作成され、プレビューが表示されます。直近で追加したものが上部に表示されます。content名は自動で割り当てられます。（この画面のHTMLはダウンロードファイル内に含まれます）
⑤フォントセットを右下のDownloadをクリックしてダウンロードします。
⑥ダウンロードしたicomoon.zipを解凍します
⑦解凍したファイルにあるディレクトリの
・style.css
・fonts フォルダ
（内の4つのフォントファイル
icomoon.eot
icomoon.svg
icomoon.ttf
icomoon.woff）
をすべて作成するHTMLのあるフォルダにコピー・上書きします。

これでアイコンフォントが設置できました。

３、アイコンフォントの使用
　解凍したファイルにdemo.htmlがあるので、このファイルをみて、アイコンフォントを設定の参考にします。。

例：icon-icn_b0162を使ったタグです。
<span class="icon-icn_b0162"></span>

【参考URL】
https://www.webantena.net/service/iconfont-icomoon/

2018年6月16日土曜日

自分PCで、WEBサイト構築

作ったウェブアプリをローカルネットワーク内で公開する手順をまとめました。
⇒（目的）手元にある Windows PC をウェブサーバーとして IIS をセットアップし、外部からWebサイトアクセス可能にする

１、IIS と ASP.NET の有効化と動作確認
①Window ボタンを左クリック「Windowsシステムツール」「コントロールパネル」「プログラム」「Windows の機能の有効化または無効化」選択
②「インターネットインフォメーションサービス」にチェック
③インターネットインフォメーションサービス > World Wide Web サービス > アプリケーション開発機能、の「ASP.NET 4.6」にチェック
　⇒全部で次の項目にチェックが付く。
.NET 拡張機能 4.6
ASP.NET 4.6
ISAPI フィルター
ISAPI 拡張
④「OK」
⑤http://localhost/ にアクセスし、デフォルトウェブページが表示されることを確認

２、同一ネットワークの他端末からアクセスする
①Window ボタンを右クリック > コントロールパネル > システムとセキュリティ > Windows ファイアウォールを介したアプリまたは機能を許可をクリック

②「World Wide Web サービス (HTTP)」の「プライベート」と「パブリック」の両方にチェックし「OK」

続いて、同一ネットワーク内からのアウセスを試すために、URL を調べ、ウェブブラウザから確認します。
③Windows キー + R で「ファイル名を指定して実行」を立ち上げ
④cmd と入力し「OK」
立ち上がったコマンドプロンプトで ipconfig を実行し、例えば「Wireless LAN adapter Wi-Fi:」の「IPv4 アドレス」をメモ
⇒192.xxx.xxx.xxx
外部 PC やスマホなどのウェブブラウザの URL にメモした IP アドレスを入力してデフォルトウェブページが表示されることを確認。

３、IIS設定
①［Windows管理ツール］［インターネットインフォメーションサービス（IIS)マネージャ］を選択
②左側の「サイト」「Default Web Site」右クリックで、「アプリケーションの追加」を選択
　※「サイト」「Webサイトの追加」でWebサイト追加可能ですが、URL入力がホスト名となってしまうので、アプリケーション追加でサイト作成する
③下記情報を入力
エイリアス：任意の名前 (作成したサイトのURL＝ホスト名(自己のPC名)/エイリアスとなる)
物理パス：任意のディレクトリ（サイトモジュールのあるディレクトリ）

④「OK」押した後、作成したアプリケーション右クリックして、「アプリケーションの管理」「参照」を選択
　⇒ブラウザに表示されるURLが作成したサイトのURLになります(他社のPCでみるときは、localhostを自己PC名となる）

【参考URL】
http://sedmft001.tworkscloud.com/Standard/#/develop-login
http://www.wannko.net/windows10/iis/iis_00.html
http://www.aichi-c.ed.jp/contents/network/socket/iisinst/iis.htm
https://support.gmocloud.com/public/guide/win_manual/web.html

https://blog.goo.ne.jp/hiros-pc/e/de599e58878d8981c16a05fceee5fb78
https://blog.goo.ne.jp/hiros-pc/e/be30c4a34cf9c7d907985cc29be88a32
http://oki2a24.com/2015/12/16/set-up-iis-with-asp-net-in-my-local-pc/

http://www.atmarkit.co.jp/ait/articles/0908/14/news045.html
http://mtgiis.blogspot.com/2013/02/blog-post_9.html

2018年5月12日土曜日

Bloggerでのアフィリエイト広告設定手順

下記サイトでアフィリエイト募集していたので、登録して、Bloggerでのアフィリエイト設定方法をまとめてみました。

https://www.seshop.com/campaign/affiliate?utm_source=seid&utm_medium=email&utm_campaign=tandokumail_20180414_seid

(1) A8.netに登録
https://www.a8.net/にて、アフィリエイター（メディア会員）登録をお願いいたします。
※登録すると、楽天など色々承認されました。その他お勧めプログラムが紹介されますので、「提携申請」をして、承認されるとメールがきます。
右のバナー（株式会社ファンコミュニケーションズ）をクリックして、登録してみてください。
(2) 審査・承認
ログイン後、検索バーにて『SEshop』と検索します。表示されたSEshopのアフィリエイトプログラムの提携申請をしてください。
(3) アフィリエイトリンク生成
貼り付け用のアフィリエイトリンクを生成してください。「広告リンク」「商品リンク」の２パターンから選択できます。
①Bloggerのメニュー「レイアウト」選択
②sidebar-right-1の「ガジェット追加」を選択
③「HTML/JavaScript」を選択する
④A8.netの承認プログラムを追加する
　タイトル、コンテンツ(承認プログラムを書く）を入力して、保存する

※A8.netの承認プログラムは、https://www.a8.net/にログインして、メッセージボックスの「新着プログラム」を選択して、プログラム情報にある「広告リンク」をクリックします。「広告リンクを表示」をクリックすると、下に「URL」があるので、これが「承認プログラム」となります。

静的コンテンツの圧縮方法

以下のサイトにIISでの設定方法が記載されていたので、ログとして、記載。
https://blogs.technet.microsoft.com/jpiis/2016/02/28/iis7/

静的コンテンツの圧縮の確認方法
IE の F12 開発者ツールや、Fiddler 等のパケットキャプチャーツールを利用して、リクエストヘッダーと応答ヘッダーにはContent-Encoding: gzip
を確認する

ただし、上記サイトに記載してありますように、「IIS では、すべての要求で圧縮コストが生じるのを避けるため、圧縮が行われるのは頻繁に要求されるコンテンツに限られます」

2018年1月2日火曜日

BOMについて

WEBサイト表示時に、うまく表示できないことがありました。

調べてみると、
開発ツールのコンソールみると、 Json変換エラーが起こりました。
そして、サーバからのレスポンスみると、レスポンスの頭に、
ï»¿
という意味不明な文字がついていました。

これは、BOMの設定すると、存在するみたいで、Json変換エラーが起こる原因になるみたいです（削除したら、変換エラーがなくなった）。

BOMについては、Wikipediaには下記のように書いてあるので、なるべく使わない方が無難なようです。

UTF-8は文字コードとしてASCIIを前提としたプログラムでもおよそ支障なく動作するように設計されているが、BOMによって正常に処理できなくなる場合がある。Unicodeの規格において、UTF-8においてBOMは容認されるが、必須でも勧められるものでもないとされている。[3]また、データベースやメモリにロードするデータなど、内部的なデータ形式では、プログラムの性能や効率の観点から普通BOMは用いられない。

BOMによってUnicodeのテキストデータが他のUnicode符号化形式や、BOMのバイト表現(UTF-7を除く)に符号位置に該当する文字のない日本語の文字コードから正確に区別をすることができる一方で、0xFEに"þ"、0xFFに"ÿ"が割り当てられているISO/IEC 8859-1に対しては、この2文字が先頭にくる文章を誤ってUnicodeと判断してしまう問題がある。

【参考URL】
https://alaki.co.jp/blog/?p=1236
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1090879270
https://stackoverflow.com/questions/4614378/getting-%C3%AF-at-the-beginning-of-my-xml-file-after-save

2017年3月7日火曜日

【Googleアナリティクス】サイト管理（ユーザ追加）

Googleアナリティクスで管理しているサイトを他の人も分析する権限付与する手順をまとめました。

意外と必要な事なのですが、めったに行わないので、忘れて困ってしまいました。

１、アナリティクス画面右側メニューの管理クリック

２、サイト選択
①右上のサイトを選択する
②ユーザ管理をクリック

３、ユーザ追加
①権限を付与するユーザー
　→gmailアドレス追加
②こおユーザーにメールで通知をチェック
③追加クリック

【参考URL】
http://wind-mill.co.jp/iwashiblog/2013/09/googleanalytics-multiple/

2016年12月12日月曜日

【JavaScript】JavaScriptを高速化するプログラミングテクニック

JavaScriptの処理を早くする方法について調べてみました。
調べて、覚えておくとよさそうな事をまとめてみました。

１．length の参照を減らす
for (var i = 0, len = elements.length; i < len; i++) {
：
}
２．ドット演算を減らす
要素の設定をまとめる。
【悪い例】

function BuildUI(){
    var nameElement = document.getElementById('name');
    nameElement.innerHTML =  '';            
    nameElement.innerHTML += "T";  
    nameElement.innerHTML += "A";   
    nameElement.innerHTML +="の日記"; 
}

【良い例】
function BuildUI(){
var elementText = "T"+ "A"+ "の日記";

    document.getElementById('name').innerHTML = elementText;
}

3．関数ポインタをキャッシュする
Work関数はグローバルスコーブで定義されている関数とする。
全ての参照（ポインタ）をローカル変数のfuncWorkに格納し、ループ内でそのローカル変数を使って関数を呼び出すことでパフォーマンスが向上する。
function funcCollection(){
    var funcWork = Work； //ローカル変数
    var length = myCollection.getItemCount();
    for(var index = 0; index < length ; index++)
        funcWork (myCollection[index]);
    }
}

4．文字列結合する場合は、+= じゃなくて join 使う
function test () {
    var html = [];
    for (var i = 0; i < 5; i++) {
       html.push('あ');
    }
   $('tx').innerHTML = html.join("");
};

5．配列に要素を追加するのはpushよりlengthを使う
【悪い例】
ary.push("a");
【良い例】
ary[ary.length]="a"

6．DOMに要素追加する場合、複数の要素をまとめて追加する（置き換えもまとめて行う）

7．複数のスタイルの書き換え
スタイル変更は纏めて行う
【悪い例】
element.style.background = ‘gray’;
element.style.border = ‘1px solid black’;
【良い例】
element.setAttribute(‘style’, ‘background: gray; border: 1px solid gray;’);

8．htmlファイルの読み込みは、CSSファイルを先に、javascriptファイルを後に記述する

9. 出来る範囲で、関数呼び出しを避ける

10. newを使わずに、〔〕や{}といった括弧を用いて配列やオブジェクト生成を指定する

11. メソッドチェーンを活用する

【参考URL】
その他、以下URL参考になります
https://html5experts.jp/yoshikawa_t/1016/
https://html5experts.jp/yoshikawa_t/1932/
http://tokkono.cute.coocan.jp/blog/slow/index.php/web-technology/top-10-reasons-javascript-blocking-page-load/
http://buzzmemo.blogspot.jp/2010/08/javascript.html
http://itpro.nikkeibp.co.jp/article/COLUMN/20080109/290747/?rt=nocnt
https://www.ibm.com/developerworks/jp/web/library/wa-aj-jsajaxperf/
https://www.inter-office.co.jp/contents/177/

http://news.mynavi.jp/news/2009/11/11/015/
http://gihyo.jp/dev/serial/01/js-foundation/0007
http://www.atmarkit.co.jp/fwcr/design/index/index_htmltuning.html

http://www.atmarkit.co.jp/ait/articles/1409/02/news032.html
http://qiita.com/redamoon/items/1c38ee93834588e3c4ff

2016年12月11日日曜日

【JavaScript/HTML5】Webサイトトラブルの回避方法をプログラム側で制御する

Webサイトのトラブル解決について、調べてみたので、まとめてみました。

１、メモリリーク（Javascriptのメモリリーク対策）
・GC(ガベージコレクション)を（任意に行われるので、）意図的に行わせる
　→ 変数に対し、明示的にnullをセットした時
・必要が無い場合はクロージャの利用を避ける
　⇒クロシージャは、自分を囲むスコープにある変数を参照できる関数
・循環参照によるメモリリークを避ける

※以前説明したIEの開発ツールのメモリツールを使って、循環参照している箇所をみつけましょう。

２、文字化け
ブラウザがどの文字エンコーディング（特定の文字をどのようなバイナリ値で表現するかを規定したルール）か分からず、発生します。
htmlファイル内に次のタグを追加して、文字エンコーディングをUTF-8に指定します。

<meta charset="UTF-8">

※サーバへのリクエスト・レスポンスも文字化けが起こっている場合は、文字エンコーディングが原因かもしれません。（サーバ側での文字コードの設定も確認しましょう）

３、最新のサイトが表示されない
ブラウザのキャッシュが原因なので、htmlファイル内に、キャッシュを使わないように指定します。

<meta http-equiv="Pragma" content="no-cache">

※HTTPヘッダで指定する方法もあります

４、互換性が問題で表示されない
以下のURLで記載していますように、IEの互換性が問題で表示できない場合があります。
http://www.buildinsider.net/web/ie11attention/01

htmlファイル内に、最新レンダリングを指定します。
<meta http-equiv="X-UA-Compatible" content="IE=edge">

【参考URL】
https://utage.headwaters.co.jp/blog/?p=1116
http://itpro.nikkeibp.co.jp/article/lecture/20061218/257172/
http://qiita.com/takeharu/items/4975031faf6f7baf077a
https://www.html5rocks.com/ja/tutorials/memory/effectivemanagement/
http://www.ibm.com/developerworks/jp/web/library/wa-jsmemory/

2016年12月7日水曜日

IE開発者ツールの使い方（メモリリーク調査）

IEに「開発ツール」があります。
IEの歯車アイコン選択して、「 F12開発ツール」選択すると起動します。

この「開発ツール」を使うことで、以下調べることができます。
・パフォーマンス調査(CPU時間など）
・メモリリークの調査

【メモリリーク調査】
［メモリ］ツールは、メモリの使用量を調査できるツールで、以下の機能があります。
① プロファイリングセッションの開始。
② プロファイリングセッションの終了。
③ プロファイリングセッションのインポート。
④ プロファイリングセッションのエクスポート。
⑤ ヒープスナップショットの作成。
⑥ メモリ合計。

　プロファイリングセッションを開始①すると、終了②するまでメモリの合計⑥がグラフで表示される。
⑤の［ヒープスナップショットを作成します。］をクリックすると、そのクリック時点での、ページで使われているメモリの詳細情報（＝スナップショット）が採取される

ヒープスナップショットは、メモリの状況を以下確認できます。
① ページ内のメモリ使用量。
② ページ内で保持しているオブジェクト数。
③ メモリ使用量と前回のスナップショットからの増量が表示される。
④ オブジェクト数と前回のスナップショットからの増減数が表示される。

①～④のようなリンクをクリックすることで、その詳細を確認できる。例えば、オブジェクト数の増減を示している④をクリックしてみよう。すると次の画面のように表示される。

タブ［種類］［ルート］［ドミネーター］をクリックして、オブジェクト数の関係詳細を把握することができます。
詳細は、実際に表示してみると、何となくわかりますが、
詳しく知りたい人は、【参考URL】のサイトを確認すると、分かりやすいです。

まとめますと、
・作成したページのメモリ使用量が多い場合
・使っているうちに次第にメモリ使用量が増えていく場合
などで、問題がどこにあるのかを特定する際に役に立ちます。

パフォーマンス調査用に、YSlowというツールも便利そうです。
下の参考URLにYSlowについて、詳しく書いてありました。
時間のある時に、使ってみようと思っています。

【参考URL】
http://www.yoheim.net/blog.php?q=20130708
http://www.buildinsider.net/web/ief12devtools/01

2016年12月4日日曜日

ホームページ表示した時に、スクリプトエラー表示がでる場合

ホームページ表示すると、スクリプトエラーが発生する場合はありませんか？。

原因は、Yahoo!ツールバーが原因かもしれません。
Yahoo!ツールバーをアンインストールして、再度ホームページ表示してみてください。
うまくいく場合があります。

【Yahoo!ツールバーのアンインストール（削除）手順】
①ツールバーの［カスタマイズ］ボタンカスタマイズボタン

を押して、表示されるメニューから［Yahoo!ツールバーについて］-［ツールバーを削除］を選びます。
②確認の画面が表示されるので、［アンインストール］ボタンを押します。
ツールバー7.2以前では［はい］ボタンを押します。

※Windowsのコントロールパネル内にある［プログラム（アプリケーション）の追加と削除］（Windowsのバージョンによっては、［プログラムと機能］または［プログラムのアンインストール］）を利用してのアンインストールも可能です。

また、余計なアドインをインストールしたのが原因かも、しれません。
余計なものは削除すると、うまくいくと思います。

こちらのMicrosoftのURLには、その他の対応方法にいろいろ記載しています。
https://support.microsoft.com/ja-jp/kb/308260

【参考URL】
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1066447425
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1372587433
http://oshiete.goo.ne.jp/qa/1612865.html

2016年10月3日月曜日

【JavaScript】エラー処理

HTML5サイトをJavaScriptを使って、エラーが発生する場合での、エラー原因追求の方法について、調べてみました。

１、 window.onerror
window.onerrorに関数を設定しておくと、処理中catchされてないエラー情報をここで取得することが出来ます。

window.onerror = function (msg, file, line, column, err) {
    console.error(msg + file + ':' + line);
    alert(msg + file + ':' + line);
};

throw new Error('test'); // エラーを発生させる

２、try-catch
try～catchでエラー発生した場合に、catch内でエラー表示させる

try {
      /* 何かの処理 */
} catch (e) {
      alert(e.name + '\n' +
            e.message + '\n' +
            e.fileName + ':' + e.lineNumber + '\n' +
            e.stack);
}

３、タスクバーに情報表示
関数の前後に以下のコード記述して、タスクバーに表示する。
valは関数内で使用する値など。
window.status = "関数名 : start" + val;

４、開発ツール使用
【Google ChromeでJavaScriptエラーを表示・確認する場合】
ブラウザの一番右側にある「Google Chromeの設定」アイコンをクリックして、
「ツール」→「JavaScriptコンソール」を選択します。
（もしくは、F12キー）

【参考URL】
http://kitak.hatenablog.jp/entry/2014/10/08/093056
http://www.yscjp.com/neweb/error/
http://www.koikikukan.com/archives/2013/07/31-005555.php
https://support.microsoft.com/ja-jp/kb/308260
http://www.ajaxtower.jp/js/error/index1.html

登録: 投稿 (Atom)