初心者向けにJavaScriptのクロスドメイン制約について解説しています。クロスドメイン制約を簡単に説明すると、違う名前のサーバーに対して通信できないという制約になります。不便な場合もあるので、今回は制約を回避して通信する方法について解説します。[テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。JavaScriptのクロスドメイン制約について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。今回は、JavaScriptに関する内容だね!大石ゆかりどういう内容でしょうか?田島悠介JavaScriptのクロスドメイン制約について詳しく説明していくね!大石ゆかりお願いします!クロスドメイン制約とはクロスドメイン制約の説明の前に、「オリジン」という言葉について説明しましょう。Webサイトにアクセスするには、以下のような「URL」という文字列を使います。このURLが指し示すWebサイトの場所や通信手段のことを「オリジン」といいます。https://www.google.comhttp://www.test.co.jp:8080クロスドメイン制約とは、セキュリティを保つためのブラウザの仕組みで異なるオリジンのデータにアクセスできないように制限するものです。JavaScriptのプログラムから、他のサイトのデータを取得しようとした際、クロスドメイン制約に該当してしまうと、以下のようなエラーが発生します。クロスドメイン制約の前提となる「同一オリジンポリシー」については、以下のサイトが参考になるでしょう。従来は、ブラウザのクロスドメイン制約が厳しかったため、JavaScriptのプログラムから他のサイトのデータを取得する際、クロスドメイン制約に該当しないよう、以下のような工夫を行う必要がありました。JavaScriptからではなく、自オリジンのサーバサイドのプログラムを経由してデータを取得するjsonpという取得方法を使うFlashを使うしかし現在では、データを取得されるサーバー側で適切なアクセス制御情報「Access-Control-Allow-Origin」を設定しておくことで、クロスドメイン制約に該当することなく、他のサイトのデータを取得できるようになっています。実際に書いてみよう今回のサンプルプログラムでは、XMLHttpRequestを使い、他のサイトのデータを取得しています。httpbinは様々なレスポンスを返してくれるサイトで、プログラミングのテストの際に良く用いられます。」と指定すると、自分のIPアドレスが返ります。<body></body></html>実行結果は以下のようになります。数値(IPアドレス)は環境によって異なります。Chromeの場合、デベロッパーツールのコンソールで確認することができます。太田和樹(おおたかずき)ITベンチャー企業のPM兼エンジニア普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。システムの開発・導入マネジメント地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。大石ゆかり内容分かりやすくて良かったです!田島悠介ゆかりちゃんも分からないことがあったら質問してね!大石ゆかり分かりました。フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。関連する記事JavaScriptのaddEventListenerの使い方を現役エンジニアが解説【初心者向け】JavaScriptのaddEventListenerの使い方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。...JavaScriptJavaScriptでオブジェクトにプロパティを追加する方法を現役エンジニアが解説【初心者向け】JavaScriptでオブジェクトにプロパティを追加する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説し...JavaScriptJavaScriptのonclickの使い方を現役エンジニアが解説【初心者向け】JavaScriptのonclickの使い方について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。&...JavaScriptJavaScriptで日付チェックする方法を現役エンジニアが解説【初心者向け】JavaScriptで日付チェックする方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。入門向けのJav...JavaScriptJavaScriptのシングルクォーテーションとダブルクォーテーションの使い分けを現役エンジニアが解説【初心者JavaScriptのシングルクォーテーションとダブルクォーテーションの使い分けについて解説します。実際のコードをもとに解説していきますので、理解を深め...JavaScriptJavaScriptでAPIを呼び出す方法を現役エンジニアが解説【初心者向け】JavaScriptでAPIを呼び出す方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。入門向け...JavaScriptあわせてよく読まれている記事JavaScriptでiframeを操作する方法を現役エンジニアが解説【初心者向け】JavaScriptでiframeを操作する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。インラインフレームの略で、ページ内に別のHTMLページを埋め込むことが出来る便利なものです。src属性で指定した別ページをiframe内で表示させます。CSSと組み合わせることで、表示させる枠を調整したり、内部コンテンツの調整したりも可能です。クロスドメインでの利用には注意が必要になるので気をつけて下さい。クロスドメインの場合はiframe内のDOMへのアクセスが制限されます。);で要素を取得して利用します。内部のDOMへのアクセスでは、取得したオブジェクトに対してcontentWindow.documentで要素を取得します。onclick="iframe_test()">iframe内の操作を行います。onclick="iframe_test2()">クロスドメインは変更できません。alert("ここのアラートは出ます。alert("contentWindowが利用できず、このアラートはでません。※index.htmlとcolor_iframe.htmlは同じフォルダーに配置して下さい。contentWindowは、WEBサーバ上でないと機能しません。ローカルで確認する場合でも、WEBサーバを通して動作確認して下さい。現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。自分のWebサイトを公開するときに、独自ドメインを取得したいと考える人も多いと思います。そこで今回は、初心者でもすぐに使えるドメイン取得サイトをご紹介します。最後に金額などを比較しているので、見比べて選んでみてはいかがでしょうか。格安、簡単でガイドもわかりやすい初心者向けのサイトです。不要になったドメインを買い取るサービスもあります。GMOインターネットグループのpaperboy&co.が運営しているため、レンタルサーバーの「ロリポップ」、「ヘテムル」とも連携しています。アドレス資源の標準化を行っているICANNという団体公認のサイトです。新規ドメインの取得料金が格段に安くなるキャンペーンもあります。レンタルサーバーの「ミニバード」、「ファイアーバード」等と連携しており、これらのサービスと同様にネットオウルポイントを利用することが可能です。DTMS(ドメイン・トータル・マネジメント・サービス)という高度な管理機能があり、ドメインを長く運用するときに便利です。レンタルサーバーと合わせて申し込むと最初の登録料が無料になります。「初心者歓迎」とサイトでも名言されているとおり、オンラインマニュアルや電話窓口などのサポートが充実しています。キャンペーンなども随時実施されているのでお得な時に入手したいですね。ICANN公認のサイトです。都道府県や国の名前が付いたドメインを取得することができます。「100年ドメイン」という、100年の間一切の更新手続きが不要という独特のサービスがあります。ガイドラインが分かりやすく、初めてでも簡単に取得できます。同サービスのレンタルサーバーと合わせて使うとより便利です。プランの種類が豊富で、自分に合ったコースを選べるようになっています。新規取得の他に、短くわかりやすい文字列など、今では入手が難しそうなドメインをオークションで入手することができます。手続きのわかりやすさと24時間対応可能のサポートも魅力です。老舗の格安サービスです。専用のコントロールパネルが多機能で、様々な操作が行えます。電話でのサポートには対応していませんが、ユーザーフォーラムでメンテナンス情報などを確認することが可能です。お手頃価格、お手軽操作で初心者でも安心なサイトです。ドメインを一つ無料で取得することができます。NTTPCコミュニケーションズが運営するサービスです。ひとつのパスワードで複数ドメインの管理が可能になっています。最後に、今回紹介したサイトを比較してみます。新規取得の費用、また電話サポートがあるかを表にまとめてみました。おすすめのレンタルサーバーを比較した記事もあるので、合わせてチェックしてみてください。[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。Webデザイン【Webサイト作成に役立つ!】中古ドメインと新規ドメインを比較してみた[PR]自身や企業でWebサイトを作成しようと思ったらまず最初にドメインとサーバーを用意する必要があります。基本は新しくドメインを取って作ることが多いですが、過去に誰かが使っていたドメインを再利用することも可能なのです。それを中古ドメインと呼びますが、新規ドメインと何が違うのか、どんなメリットがあるのか詳しく紹介しています。やったことは無いけれど「これからWebサイトを作ってみたい」という方はぜひ知っておきたい内容でしょう。最初に、ドメインには新規ドメインと中古ドメインの2つがあるということを知っておこう。ここでは新規ドメインと中古ドメイン、それぞれのメリットとデメリットについて解説するよ。通常Webサイトが閲覧できるのは、人が住んでいる家と同様に指定された住所に訪問するからです。インターネット上での住所を取得する必要があり、住所のことを独自ドメインと呼びます。独自ドメインは、ドメイン指定事業者と契約をして取得することができます。ドメインを取得する代表的なサービスとしては、「お名前.com」や「ムームードメイン」などがあります。取得したいドメインが本当に新規のものなのかドメイン年齢というツールを使ってチェックすることができます。「yahoo.co.jp」と入力してドメイン年齢を調べるをクリックすると、ドメインの取得日が表示されます。取得日が表示されれば過去に運用されていた、もしくは現在も運用しているドメインとなります。新規ドメインであれば、取得日が表示されないので、事前に確認しておきましょう。新しく事業やプロジェクトを立ち上げる場合、ゼロからブランドを確立することができます。「yahoo.co.jp」のようにサービス名と会社名、そしてドメイン名が同じであれば長期的にブランド認知を獲得することができるでしょう。新しくドメインを取得した場合、検索エンジンにとっても認知度が無い状態からスタートするので、検索結果の上位に表示されるまである程度の時間がかかります。検索順位が上位にいるサイトは、「更新頻度が多い」「サイトのページ数が多い」「コンテンツ自体の品質が高い」「多くのリンクを獲得している」といったSEO対策がしっかりしています。これらを満たすためには長い月日が必要で、新規ドメインで始める場合ゼロからのスタートとなるので、検索エンジンにインデックスされるまでに時間を要するでしょう。新規ドメインについての概要だね。検索で見つけやすくなるまでには、少し時間がかかるということですね。履歴がないということは、その分安心して利用できるということでもあるんだ。次は中古ドメインについて見てみよう。そもそも中古ドメインという言葉自体を初めて聞く人もいると思います。中古ドメインを利用するメリットは何なのか、中古ドメインはどこで取得できるのかなど、これからWebサイトを作ろうと考えている人に役立つはずです。中古ドメインとは、過去にあるサイトで使われていたドメインを指します。運営者がサイトを閉鎖してドメインを手放したり、期限切れでフリーになったドメインです。過去に運営されていたサイトのドメインパワーをそのまま引き継ぐので、クローラーや検索エンジンに見つけてもらいやすいのが特徴です。いえ、中古ドメインがSEO的に良いとは限らず、以下で紹介する3つのポイントを注目しておきましょう。新規ドメインと中古ドメインの大きな違いとして、「被リンク」が挙げられます。被リンクとは、外部のWebサイト上に自分のサイトのリンクが設置されることです。検索エンジンは、良いコンテンツであれば多くのサイトで紹介、引用されているという発想で、検索順位を決める上で被リンクの数や質が指標になっているのです。被リンクの質をチェックする上で、良質なWebサイトから自然な形でリンクが貼られているかが重要です。同じサイト・ページから100個も200個もリンクが貼られていたら検索エンジンは不自然に思うはずです。下記の被リンクは、悪質なリンクとして認識されているので、作為的なリンクでないかチェックしておきましょう。悪質サイトだと評価されるとGoogleから手動ペナルティを受ける場合があります。この場合は、別のドメインを利用すべきでしょう。中古ドメインは、ドメインパワーを引き継ぐことを主な目的としているため獲得したリンク元のサイトに注目することが重要です。一般的に好ましくないジャンル(アダルト・ギャンブル)のサイト履歴があった場合、好ましくない被リンクを受けている可能性が高いです。中古ドメインを利用するメリットは主に3点あります。被リンクが付いていることが大きなメリットです。中には教育機関や政府機関などから被リンクを貰っている評価の高い中古ドメインもあります。新規ドメインでは、サイトを公開してすぐに被リンクを貰うことは難しいですが、評価の高い中古ドメインほど良いサイトから被リンクが貼られている状態でスタートすることができます。早く検索結果に反映したい人にとっては大きな特徴と言えるでしょう。その他にも、誰かが取得していて新規で購入できないドメインを手にいれることも可能です。過去に使われていたサイトの評価を引き継ぐ形になるので、アダルトサイトや悪質なサイトなどそもそも検索エンジンから評価されていないドメインを利用すると、どれだけ良いコンテンツを作っても検索上位に表示されるのは難しいでしょう。URL自体がブラックリストに登録されている場合もあるので、むやみに中古ドメインを利用するのは危険です。ドメイン自体を取得するのに数万円の初期費用が必要になります。中古ドメインを利用するならアクセス中古ドメインをチェックしておきましょう。単純に「運用期間が長い」「被リンクが多い」という情報だけで判断せず、総合的に判断する必要があります。アクセス中古ドメインでは、以下の項目などを比較することができます。リンクを受けているページがどのページなのか確認することもできますし、リンク元のサイトも見ることができます。他にも外部ツールを使って手動ペナルティやブラックリスト、過去のWebサイトの運用履歴なども確認できます。被リンク数、参照元ドメイン数、参照元IP数、参照元クラスC分散、バックリンクスコアの5項目を独自の指標を用いて点数(パワーランク)をつけています。パワーランクは4つに分かれていて、ブロンズ・シルバー・ゴールド・プラチナという順にランク付けされています。メインサイトを作るのであればゴールド・プラチナのランクが向いているでしょう。このパワーランクや被リンク数を指定して検索することもできるので、目的に合ったドメインが探せるはずです。新規ドメイン・中古ドメインそれぞれ詳しく紹介しました。早くクローラーに認識、検索エンジンにインデックスされることを望んでいるのであれば中古ドメインを使うことも選択肢に入れると良いでしょう。アクセス中古ドメインを見てみるWebデザインJavaScriptのスクロールイベントの使い方を現役エンジニアが解説【初心者向け】JavaScriptのスクロールイベントの使い方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。画面を上下左右にスクロールしたときに発生するイベントです。画面初期表示時からのスクロールによる移動距離を取得したり、スクロールが一定以上行われたら処理を発生させるときに使用します。スクロールイベントは、発生頻度が非常に多いイベントになります。処理の内容によってはブラウザに負担がかかってしまいます。スクロールイベントによる処理回数を間引くためにsetTimeout()を利用します。250msに1回の頻度で処理を行なうようにイベントを抑制していきます。"px"JavaScriptJavaScriptでページ最下部にスクロールする方法を現役エンジニアが解説【初心者向け】JavaScriptでページ最下部にスクロールする方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。ページの最下部へ移動する方法として、scrollHeight(ページの高さ)とclientHeight(ブラウザの高さ)を使用します。<p>最下部へ移動しました。スクロールが発生した際に、自身のスクロール箇所が最下部かどうかを判断してイベントを発動します。2014年より、某物流会社のシステム開発担当として入社。PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。JavaScriptアクセスされているページが分かる!PHPでURLを取得する方法【初心者向け】PHPでは、今現在ブラウザでアクセスしているURLを取得することが出来ます。この取得したURLをアクセスランキングとして計測したり、URLの内容によってデータベースへ問い合わせて、ページの表示内容を変えることも出来ます。URLを取得するには、PHPのスーパーグローバル変数である$_SERVERを利用します。$_SERVERにはヘッダ情報、パス情報、スクリプトの位置のような情報が格納されています。このスーパーグローバル変数には、PHPプログラムならどこからでも参照することが出来ます。URLは、おおざっぱに「プロトコル名://ホスト名/ページ名」で構成されています。httpやhttpsなどのプロトコル名やサーバーのドメイン名(ホスト名)を除いた、ページURLが入っています。リクエストは要求という意味なので、ブラウザに要求されたURI(URL)の一部という意味になります。サーバーのドメイン名を表示します。URLは、プロトコル名+ドメイン名+ページ名の形になっています。httpやhttpsなどのプロトコル名を表示します。HTTPSではなかったら、$_SERVERのHTTPSは空になっています。空だったらhttpを、そうではなかったらhttpsを表示するようにします。三項目演算子は、「?」が真だった場合。「:」が偽だった場合になります。emptyはもし変数が空だったら真で、空でなかったら偽という意味になります。実際に書いて出力結果を見てみましょう。localhostの/test/フォルダのtest3.phpで実行しました。ページ自体のURLが/test/test3.phpになっています。ホスト名がlocalhost。プロトコルがhttpになっています。以上、URLを取得する流れを解説しました。閲覧されているページを確認することができるので、ぜひ書き方を覚えておきましょう。思ったことはないでしょうか。そんな方のために、TechAcademyではオンラインブートキャンプPHP/Laravelコースを提供しています。現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。独学に限界を感じている場合はご検討ください。CORPORATION.。