本記事で実は第4版目です。 So-netプロバイダーをキャンセルしGMOとくとくBBに乗り換えましたので、自動的に So-netブログは削除されてしまいました。 今は亡き So-netブログで初版を発表し、第三版まで公開してきました。 Ver1 も Ver2 も Ver3 も、この世に有りませんので(実際にはMovableType書式で自宅PCと複数のブログに下書きとして保存していますが「公開」することは無いです)、初版の開発のきっかけから、最新版4.0 までの一からの解説となるかも知れません。
先ず、海外から接続すると、日本語のブログも、日本語のホームページも「完璧に文字化けしている」状況を認識してください。(下の2つの画像をクリック願います) 「麻雀牌(マージャンぱい)」であったり、「寸足らずのバーコード」が延々並んでいる無様をさらしているだけです。 画像しか正常に表示しません。 Google社では Webフォントを提供していますが、化ける文字を「豆腐フォント(TOHU FONT)」(Noto Wiki_)と解説しています。 「文字化けしている日本語」を救済しなければ、みなさんの今日アップロードしたブログ記事も既に「廃墟」です。 無意味な努力が未来永劫に「文字化けが永続する廃墟」として誰の記憶に残りもしません。
そこで、訪問者のブラウザーに設定されている希望する言語に自動的に翻訳することで「文字化け」を解消します。 接続場所に関係なく、例えば「日本の羽田空港」に到着して、ご自分の端末、例えば iPhone のブラウザーの言語設定が「ハワイ語」であれば、自動的に「日本語をハワイ語に翻訳」してしまうことで、端末の環境に関係なく「日本語の文字化け」を積極的に解消させます。
この記事では、無駄な通信を抑制しながら必要なシーンでは自動的に Google翻訳を起動するスクリプトを完全対話方式で自動生成し、日本国内に限定しないで、あらゆる言語を母国語として利用中の世界中のブログやウェブページで即時利用開始できるように、コピー&ペースト_だけの労力で提供することを目的にしています。 100を超える多くの言語に即時対応できる完全対話方式を提供するページです。 自国以外の世界中からの訪問者に、文字化けさせない機能を簡単に提供します。 もうこれだけ簡単なのですから、実装しない言い訳は無用ですね。 特に「観光を推進している」公のウェブページで文字化けを放置していると責任問題ですよ!


無料の出前サポート情報を知りたい!_

困っているなら、「無料の出前サポート情報を知りたい!_」をクリックして、3連の丸ボタンを押してみましょう。

だからと言って、
迷惑行為は損ですよ!

「文字化け対策」が「迷惑行為」でしかない場合があります。たかがブログや、たかがウェブページなのに、訪問直後から「趣味に合わない音楽を鳴らす」のと同じように、「大容量の日本語漢字フォントとの通信を強要する」と言う迷惑行為です。「だって、文字化け対策の必須として、どこかの誰かが推奨していた!」
違いますでしょう!「デザイン・フォントをブログやウェブページで利用する方法」を検索して、「面白い」から実装したのですよね。「大容量の日本語漢字フォントとの通信」を強要しても、「日本語」も「漢字」も読めない世界中の大勢の方々にとっては迷惑な行為でしかありません。あなたが日本国の島国で生まれて、「日本語しか読まない」生活をおくっていて、何かの縁で例えば「アラビア語のブログ」を訪問した際に、「アラビア語のフォントの通信を強要する」ブログに何の効果があるでしょう。もしもアラビア語が読めない日本人にとって、「アラビア語のフォントの通信」を強要されても何も解決しません。相手によって無意味なフォントの通信を強要するよりも、日本人にとって読めるように「速やかに日本語に自動翻訳する」ことこそが「文字化け対策」です。とても大容量な「日本語漢字フォント」の通信を強要する設定は「時間の無駄」と「通信コストの無駄」を強いる迷惑行為でしかありません。それも「自分のサーバーとの通信」ではなくて、例えば「Google社のサーバーとの通信」で実現している場合は、その迷惑行為は酷過ぎます!即時、設定を中止するべきです。どうしても気に入った「大容量日本語フォント」をロードさせたいのなら、ご自分(?)のサーバーに、その大容量の日本語フォントをアップロードして通信設定して下さい。大勢にとって無意味な行為は、誰にも迷惑を掛けないようにして下さい。

本スクリプトの出典元

わたしが参加した「パラメトリックHTML_」で「標準化」の一環で作成したダウンロード配布物に含まれるスクリプトのピックアップでした。その後、記事:「DISQUSを簡単にミラーリングするJavaScriptとグーグル翻訳との連携_」プロジェクトの行程上、新たな開発に努力しました。以下のブログでDISQUSと連携させながら、最新バージョンの「 Google Translator 」が稼動しています。それぞれメニューに「Google Translator & SP font.」があり、「It's DISQUS」をクリックすると連携するDISQUSへ位置決めできます。

例えば iPhoneで
ブラウザーの言語を変更するスキル

道で迷って困っている外国人 ・・・・・ 日本語を読めない海外からの隣人に、自分の iPhone の表示言語を変更して、隣人の母国語に切り替わった iPhone で目的のコンテンツを表示させて、その場で見せてあげる。 ブラウザーならブックマークも出来るから、日本語で地図を探してからブックマークして、表示言語を切り替えてから、ブックマークで表示する。 そんな素敵なシーンに遭遇したなら ・・・・・ iPhone で、ブラウザーの優先母国語を変更する。 iPhone 全体の表示言語を変更する必要がある。 そして自分の為に、素早く日本語表示に戻せるスキルを高めておく。最新モデルを知らないのですが、、、、、
  1. 「設定」
  2. 「一般」
  3. 「言語環境」
  4. 「言語」
  5. 隣人の母国語を選択し
  6. 「完了」をタップする
※ 右の画像は例えば「英語」化した iPhone から、元の言語(日本語)に戻す為の解説用のアニメーションGIF画像です。 ここからZIPファイルをダウンロード_して、解凍し、ご自分の iPhone のカメラロールに保存してください。 迷ったなら画像を表示してみてください。 「英語」が読める隣人に画像を見せて、言語切替画面までタップしてもらいましょう。※ わたしの古い iPhone 4 では「アニメーションGIF」を扱えません。
わたしは「 iTune 」ユーザーではありませんので、「 FREE / CopyTrans Manager_ v1.112 」を利用して、直接MP4動画をアップし、ついでに「 アートワークを変更する 」で適当な画像を指定しています。 ダウンロードには、90度回転したMP4動画も含まれています。
※ さて、例えば優先言語種を切り替えた iPhone や Android OS の、タブレットや携帯電話で「あなたのブログ」を表示してみて下さい。 優先言語種に自動変換する「夢」を見ましたか?! あと少し読み切れば誰でも実現しますよ! あなたのブログの「短縮URL」を印刷したカードを隣人に手渡せば良いですよね。 隣人が希望する母国語に「あなたのブログ」は自動的に切り替わります! 必要なのは今日、コピー&ペーストすることだけです!!
Ujiki.oOへの寄付_

Google社のスクリプトと異なる機能

  • どんな環境でもGoogle翻訳のメニューは「絶対に文字化けせず!」+「いつも同じ」を重要視し、コンピューターの原始ASCII文字コードです。「英語メニュー」です。どんな環境でも、地理的な制約無しで、端末に依存しないで、「わたしが望む言語」のメニューの場所は変わりません!
  • Google翻訳が運用するクッキーが存在する場合は、訪問直後(onload)、自動的に翻訳を開始します。
  • Google翻訳が運用するクッキーが存在しない場合は、ブラウザーの優先言語と訪問先ブログ記事の言語が違う場合に、訪問直後(onload)、自動的にブラウザーの優先言語で翻訳を開始します。
  • ブラウザーの優先言語と訪問先ブログ記事の言語が同じ場合は、Google社との通信は一切発生しません。そこに Google翻訳機能が働いているかのように思い込む類似した偽装アニメーションGIF画像を表示するだけです。この画像をクリックすると初めてGoogle社との通信が始まります。
    あえて「通信が終了」(onload)してから表示させています。あなたのブログは「3秒以内」に通信が終了しますか?!
    「数秒以内に終了しない」ブログの異常さは無視しないで下さい。 あなたも利用する Google検索や Google YouTube が仮に「何十秒も応答が終わらない」としたら、あなたは遅い応答のサイト利用を毛嫌いし、類似する他のサイトを探しますし、とうとう応答が遅いだけのサイトの存在を忘れますよね。 あなたのブログの応答が遅ければ、それでも毛嫌いされないだけの「ここだけの内容」を投稿する必要があって、そんな努力もむなしく、結局は「読まない」で接続を切られてしまう。 「速くて」「素早い」ブログこそを、あなたの「メインブログ」に致しましょう!
  • iPhone など、携帯スマートフォンで言語選択メニューが画面をはみ出さない様に機能します。
    画面の横サイズが狭い場合、 Google Web 翻訳の言語選択メニューの表示形式を自動的に変更し、言語が選択できない問題を回避させます。 但し、リアルタイムに機能させていませんので、先に端末の方向を決めておく必要があります。
Ujiki.oOへの寄付_

以下のコードをコピー&ペーストする

  1. 悪意の第三者のHPから、 <FRAME _ <IFRAME _ で、あなたのHPやブログが盗用されないようにブロックする:
    ご自分のHPやブログで、 <FRAME <IFRAME 内で利用する場合は、この選択肢はOFFにします!
  2. DISQUS リンク文字:
    DISQUSコメントに位置決めするリンク文字です。
  3. あなたのブログやHPの言語コード:
    (あなたのブログやHPが日本語ならば「 ja 」ですので変更は無用です)
    【参考】:ご訪問中のあなたのブラウザーは言語種「 en-US 」にセットされています。 ここで入力する1バイト2文字の小文字は以下のスクリプトを埋め込むブログやHPの作成言語種(ISO_639-1)を意味します。 言語コード ISO_639-1 については「ISO_639-1コード順にGoogle Fontを表示します_」で話題にしました。
    ※ 但し言語によっては、Google社が独自に拡張解釈しています。 例えば中国語です。「台湾」と「中華人民共和国」は ISO_639-1 と異なります。 自国の言語について、Google社が決めたコードを把握する必要があります。 クッキーにどのようなデーターを埋め込んでいるのかを理解する必要があります。 ※ 詳細は後述_しています。
  4. 装飾: しない | する

    「再訪問」された方の「固定観念(どうせ文字化けしてるよね)」を壊しますっ! 品位がどうでしょう? 「する」を選択すると <style が追加されるだけです。 ご自分で自由に変更可能です。 気に入らなければ <style> #google_translate_element { から }</style> を削除して下さい。 逆に、「気に入った」場合なら、 #google_translate_element { から } までをブログやウェブページの CSS(スタイル)に移動、追加して下さい。


  5. 偽装画像: (154x24) 5.3kb by the "Image to Base64 string converter Tool"_ や実際に機能する本物の表示位置決めを決めます。
  6. Powered by」: しない | する
    _
    このページに移動するリンク画像を追加します。以下のコードを利用して戴いても構いません。特に style 指定はしていません。クラス指定は、 class="poweredby2018" です。
  7. コピー&ペースト用コードを自動生成する」ボタンを押して、テキストエリア内のコードをあなたのブログやウェブページにコピペします。サイドバーの一番上が良いなと思います。訪問して下さる海外の方々の為に WordPress や MovableType の「メニュー」に「英語」でアンカージャンプを定義するべきです。旧型 iPhone などで縦向きで持ってブラウジングするとサイドメニューは随分と下に表示しますからね。 (^L~)/~
    タイトル:
    リンク:


  8. Ver: 4.0
    Ver:4.0はブログやウェブページのサイドバー専用です。多重呼び出しは出来ません! ブログ記事内で試用する場合は「追記」でしか Ver:4.0は利用できません!
    <FRAMEタグを利用している場合は、フレーム毎に呼び出す全てのHTMLファイルに、同じ内容のスクリプトをコピー&ペーストして下さい。
    例:記事『ベセスダが開発中の「THE ELDER SCROLLS 6」を待ちながら』内の項目ESP/ESM Translator Tutorial 3.10_」リンクページを辿って下さい。2つに分かれたフレームに英語のページが埋め込まれますが、例えば日本語を所望するブラウザーで訪問すると、それぞれのフレームが自動的に日本語に翻訳されます。左のフレームの幅が狭いので、自動的に言語選択メニューがフレームを超えないように表現されます。
  9. 言語コードについて:
    あなたの「ブログ」や「ウェブページ」が日本語で作成されているのなら迷わず「 ja 」ですが、記事「DISQUSを簡単にミラーリングするJavaScriptとグーグル翻訳との連携_」で話題にした「英語圏専用_」のサイトの場合は、HTML構造トップの言語宣言は「英語」にすべきで「タグ」「キーワード」「概要」「タイトル」も「英語」にしますが、記事本文は「主語」を明確にした「日本語」で投稿します。この場合も言語コードは迷わず「 ja 」です。さて、この記事を読んでおられる方が例えば「セブアノ語_」、「ハワイ語_」、「ミャオ語_」、「中国語」: Chinese (Simplified) / Chinese (Traditional) に注目されているのなら、 Google社の拡張解釈した言語コードを知る必要があります。 また、「セブアノ語圏」、「ハワイ語圏」、「ミャオ語圏」、「中国語圏」で購入したパソコンやタブレットや携帯電話で、搭載されたブラウザーの優先言語種を表す際の言語コードを知る必要もあります。参考にしたいので以下のコメントで是非教えて下さい。 知りたいのは「この記事のGoogle翻訳の言語切り替えが機能しない標準ブラウザーの優先言語コードと言語名」です。 Google翻訳でクッキーに埋め込まれるGoogleが決めた言語コードを知る為の調査の一手は記事「クッキー確認専用ページ_」でGoogle翻訳で「あなたのブログやウェブページの母国語」を選択し、「クッキー再表示」ボタンを押せば googtrans=/xx/yyyy に、埋め込まれています。折角調べた自分のブログやウェブページの本文の言語コードが理解できましたら、「あなたのブログやHPの言語コード_」に登録して、「コピー&ペースト用コードを自動生成する」ボタンを押して、あなたの母国語によるブログやウェブページ即時利用開始できます。
  10. 機械翻訳させたくない箇所
    クラス指定で回避させます。 クラス名:「 notranslate 」です。 class="notranslate" を当該の区間指定/単項HTMLタグに定義します。 クラス定義は半角スペース文字での複数指定可能です。 例えば既に <p class="abc2016"> 」と定義されているなら、 <p class="abc2016 notranslate"> と変更します。 ブログですと「カレンダー」の TABLE タグに指定します。
  11. 機械翻訳させたい箇所
    クラス指定で強制実行させます。 クラス名:「 translate 」です。 class="translate" を当該の区間指定/単項HTMLタグに定義します。 例えば、 INPUT タグ、 type="text"value="" を翻訳できるようになります。
    実例:

以下の JavaScript テストをお願い致します。

Ver:4.0 の公開を開始しますが、「想定外」の問題があるかも知れません。 そこで、3種類の JavaScript を無料版ドロップボックスから配信します。 テストが終了しましたら、本記事のDISQUSコメントでアナウンスしてから、わたしは削除するでしょう。ご注意願います。 完璧な開発って無いと思いますが、問題が皆無なら削除致しません。(笑)
  • 中央位置決め表示」版:
  • 左へ位置決め表示」版:
  • 右へ位置決め表示」版:
どれも、全ての選択肢は「ON」。言語コードは「 ja 」。尚、スタイルは含まれません。 問題がありましたら、DISQUSコメント願います。

次世代開発計画

  1. 多重呼び出し可能な仕様に強化します。
  2. GOOGLE FONTS 2016 earlyaccess / ISO_639-1コード順_」ページで実験しました、 自動的に翻訳言語用のフォントをロードする機能です。

特殊対策

待たされる遅い」のクレームを受け続ける無料提供のブログでは、特に有料会員からの「待たされる遅い」と言うクレームを無視できないので、一般無料会員に自由な広告の貼り付けをサイドバーに埋め込ませないルールによって、あらゆる JavaScript を排除している無料提供のブログは多い。投稿記事本文への HTML構文を許可しない無料提供のブログも多い。そんな中で、投稿記事本文への JavaScript定義を許可している無料提供のブログに「@ニフティー ココログ Wiki_」や「はまぞう Wiki_」があるが、サイドバーに JavaScript を定義できないので、記事内に実装させるしか方法が無い? 先ず「@ニフティー ココログ_」や「はまぞう_」であることを判断する JavaScript のスクリプトです。

if(location.hostname.search(/\.cocolog-nifty\.com$/) > 0){ で判断して、@ニフティー ココログの「追記」に「Google翻訳」を埋め込む。
if(location.hostname.search(/\.hamazo\.tv$/) > 0){ で判断して、はまぞうの「追記」に「Google翻訳」を埋め込む。

リンク

DISQUS連携:
DISQUSを簡単にミラーリングするJavaScriptとグーグル翻訳との連携_」で DISQUS を複数のブログでミラーリング運用を可能にする JavaScript を公開中です。
GOOGLE翻訳連携:
リンク先での文字化けを回避させるPHP公開スクリプト_」で PHP を公開中です。

熟練工に甘えませんか?


Support AIt's free and fastSupport BIt's free and fastSupport CIt's free and fast

「無料サポート」に興味があれば
上の丸ボタンをクリック願います。
サーバーから9kbを受信しますのでお待ち願います。


※ 記事本文は別サーバーから JavaScriptファイルとして配信しており、配信元のサーバーにおける JavaScriptファイル(YUICOMPRESSOR済み)も、実際にあなたのブログが受信する gzip圧縮済みの JavaScriptファイルも、30日間のキャッシュ流用を定義していますので、特にご質問の前にブラウザーのキャッシュを削除してから、再度のご訪問と閲覧をお願い致します。
※ DISQUSについては別管理ですので、毎回、最新のDISQUSを表示できています。 但し、ご自分のDISQUSコメントを編集した直後に編集後の内容に至らない場合がありますが、DISQUS表示の上部にある「あなたの言語でDISQUSメニューを再表示する!」をクリックしますと最新の状況を表示致します。 宜しくご理解願います。

※ どれだけ待ってもDISQUSが表示されない場合は「広告ブロック」機能を切ってみて下さい。
Google Translator.