カテゴリ: Web、PC

[1607141
画像は、スマホからAdobeサイトへアクセスした時のもの。

URLは正しい(なりすましでない)のに、セキュリティ警告が表示された。そういう場合の対処法について、Adobeを例にまとめ。

パソコンからアクセスしてセキュリティ警告が表示された場合は、このページ下部【備考1】をご覧ください。
スマホでセキュリティ警告を表示させない方法については、このページ下部【備考2】をご覧ください。

1.「証明書表示」をタップ

2.「セキュリティ証明書」が表示される
内容を見ると、「発行先」はAdobeだが「発行者」はVeriSign。「発行先」と「発行者」が同一でないため、警告が表示されたことがわかる。
※発行先が「a248.e.akamai.net」、発行者が「Cybertrust Public SureServer SV CA」の場合は、このページ下部【備考1】をご覧ください。


1607142

3.「ページ情報を表示」をタップ
表示された内容見ると、アクセスしたURL(発行先)はAdobe。2で確認した「発行者」VeriSignは、このサイトは安全ですよ~という証明書を販売する会社。したがって、「発行先」と「発行者」は同一でなくても問題ない。「OK」をタップする。

1607143

4.「セキュリティ警告」で「続行」をタップ
Adobeサイトが表示される。

1607144
以上、ご参考になれば幸いです。

【備考1】
例として、パソコンからfacebookにアクセスして表示された場合。(画像は2014年11月30日のもの)

1.「証明書の表示」をクリック


img1

1.「証明書」が表示される
内容を見ると、「発行先」は「a248.e.akamai.net」、発行者は「Cybertrust Public SureServer SV CA」。同一でないため、警告が表示されたことがわかる。
発行先「akamai.net」は、コンテンツ等の配信サービスを行っている「Akamai(アカマイ)」によるもの。facebookはこのサービスを利用しているため、発行先に問題はない。
発行者「Cybertrust Public SureServer SV CA」は、このサイトは安全ですよ~という証明書を販売する会社。
したがって、発行先と発行者が同一でないこと、facebookのURLと合致しないことに問題はない。「OK」をクリックする。

img2

3.警告画面で「はい」をクリック
facebookが表示される。

【備考2】
スマホでセキュリティ警告を表示させなくする方法。リスキーなので、おススメしかねるが、方法としてあるという紹介。(画像はAndroid 5.0.2)

1.スマホ「メニュー」の「設定」をタップ

1607131

2.「設定」が表示される
「プライバシーとセキュリティ」をタップする。

1607132

3.「プライバシーとセキュリティ」が表示される
「セキュリティ警告」にチェックが入っていれば、タップしてチェックを外す。

1607133
以上、ご参考になれば幸いです。
※この記事は、初稿2014年4月10日を再編集しました。

【関連リンク】
セキュリティ警告が表示されるワケ:のり記(2016年11月30日)
ドメイン名との関係まとめ。

Internet Explorer でセキュリティで保護された Web サイトにアクセスしようとすると、"この Web サイトのセキュリティ証明書には問題があります" と表示される
セキュリティ警告が表示されるわけについて。

総務省|平成27年版 情報通信白書|グローバル市場の動向
平成25年版は標題に「モバイル端末」という単語があった。

Geekなぺーじみんなが知らずに使ってるAkamai
YahooもSONYも利用する配信サービスなので。今回のようなセキュリティ警告は、相当数が表示されているかも。

akamai (アカマイ) ってなに?  a stray jellyfish
既に同じことを調べてブログに書いた方がいました。

mimic_smp
2005年、プロバイダの漫画コンテンツに掲載された『ミミック』。5ページと短いので、タッチスライダーにしてみた。スマホからでも見られるが、縦表示だと画像が小さくなるので、パソコンからがおススメ。

http://tencount.main.jp/comic/mimic/

スライダーにする際、使用したJSスクリプトは「Swiper」。以下、コードサンプル。

/*---------------------------
</header>前でcssを読み込む
------------------------------*/

<link rel="stylesheet" href="CSSまでのパス/swiper.min.css">
/*---------------------------
<body>内にスライド内容を記述
------------------------------*/


<div class="swiper-container">
  <div class="swiper-wrapper">
     
      <!--1 Slide-->
      <div class="swiper-slide">
<img src="mimic1.jpg">
      </div>
     
      <!--2 Slide-->
      <div class="swiper-slide">
<img src="mimic2.jpg">
      </div>
     
      <!--以下、同様にスライド分を記述-->
     
  </div>
     

  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>
    
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
    
  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>
/*---------------------------
</body>前か後にJSを記述
------------------------------*/
<script src="JSまでのパス/swiper.min.js"></script>
<script>       
var mySwiper = new Swiper ('.swiper-container', {
  // Optional parameters
  mode: 'vertical',
  loop: true,
  
  // If we need pagination
  pagination: '.swiper-pagination',
  
  // Navigation arrows
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  
  // And if we need scrollbar
  scrollbar: '.swiper-scrollbar',
})       
</script>
CSSは割愛したが、該当部分では「.swiper-container」と「.swiper-slide img」を指定した。

以上、ご参考になれば幸いです。

【関連リンク】
[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper | コリス

ハイライト表示とは、こういうの。本文でないのがひとめわかる、表示スタイル。ソースコードやレシピの表示スタイルによく使われる。

/*---------------------------
サンプル
------------------------------*/
<?php
$mysql_con = mysql_connect ($dbhost,$dbuser,$dbpass);
?>

このハイライト表示、ブログにそのまま記述すると、本文と同等に表示される。キーボードのタブによるインデント(字下げ)もできない。前述を例にしたのが下記。

/*---------------------------
  サンプル
------------------------------*/
<?php
 $mysql_con = mysql_connect ($dbhost,$dbuser,$dbpass);
?>

これまで、ここブログでソースコードを記述する機会は、さほどでなかったが。今後あるかもということで、ブログでハイライト表示を使う方法を調べてみた。

はてなブログには、簡単な方法があるらしいが、ここはライブドアブログ。jsを使えるようにすればいいんじゃない?と、やってみたら簡単だったので、まとめ。

以下、ライブドアブログでの方法。(ホームページでの使い方は、文末に記載)

Javascriptライブラリを読み込む
ライブドアブログでハイライト表示を使うには、Javascriptライブラリ「Google Code Prettify」を読み込む。

1.左メニュー「ブログ設定」をクリック。

2.「ブログの設定」の「デザイン/ブログパーツ設定」内「カスタムjs」をクリック。
1606255
3.カスタムjsウィンドウのタブ「head内」に、「Google Code Prettify」を読み込むコードを記述。
1606256

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
ボタン「保存する」をクリック。

使いたいブログ記事を作成し、ハイライト表示タグを記述
1.ブログメニュー「記事を書く」をクリック。

2.記事ウィンドウ内「HTMLタグ編集」をクリック。ハイライト表示したい箇所を、以下の括りで記述。
<pre class='prettyprint'>
ここにソースコードを記述
</pre>
3.「HTMLタグ編集」をクリックして通常表示に戻すと、上の画像のような表示がされる。「ここに~」の部分を編集。

ホームページでの使い方も同様。<script src~</head>前に記述、<body>内に、<pre~タグ括りで利用。括りの中を編集。

以上、ご参考になれば幸いです。

※この記事は、「ソースコードを載せるには」として作成したが、わからんという意見を多々もらったので、「ハイライト表示を使うには」として修正。

【関連リンク】
JavaScriptライブラリのホスティングについて - ライブドアブログのヘルプ(PC向け)
「jsライブラリを提供していたが止めたので、今後はGoogleなどのサービスを利用してね」というので、方法にピンときた。

google-code-prettify を使ってシンタックスハイライト | Web Design Leaves
ダウンロードして利用したい場合に。レンタルサーバーある人向け。

Google Code Prettify導入が超絶簡単になっていた | きほんのき
上記のダウンロード利用を一通りやった後。レンタルサーバーない人向けに、記事を書こうと検索してみっけ。

google-code-prettify - Google製コードハイライト表示JavaScriptライブラリ: ある SE のつぶやき
わかりやすい。

↑このページのトップヘ