非jQuery スライダー swiper

ライブラリ参照

swiper公式サイト
http://idangero.us/swiper/
CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/X.X.X/css/swiper.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/X.X.X/js/swiper.min.js"></script>

ファイル参照
<link rel="stylesheet" href="~/swiper.min.css">
<script src="~/swiper.min.js"></script>

実装

スライダー部分
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- スライド部分 -->
    <div class="swiper-slide">画像や文章</div>
    <div class="swiper-slide">画像や文章</div>
    <div class="swiper-slide">画像や文章</div>
    …
  </div>
  <!-- ページネーション(スライダー下の〇〇〇) -->
  <div class="swiper-pagination"></div>
  
  <!-- ナビゲーションボタン(スライダー左右の矢印) -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
スライダー設定
<script>
var appendNumber = 3;
var prependNumber = 1;
var swiper = new Swiper('.swiper-container', {

  ループさせる場合
  loop: true,
  
  ループさせる場合の速度
  speed: 1000,
  
  スライド数
  slidesPerView: 3,
  
  画像の中心部分で揃える
  centeredSlides: true,
  
  スライド間の横間隔
  spaceBetween: 30,
  
  ページネーション(スライダー下の〇〇〇)
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },   
  ナビゲーションボタン(スライダー左右の矢印)
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  
  レスポンシブ
  breakpoints: {
    543px以下の場合の挙動
    543: {
      スライド数を1に変更
      slidesPerView: 1
    }
  }
  });
})
</script>

     
         
画像や文章
    
画像や文章
    
画像や文章
    …   
     
        
  

JavaScript 子要素を操作する方法


<div id="myDiv">
 <label for="myValue">ラベル:</label>
 <input type="text" value="aaa" /><br/>
</div>

// DIV要素内の子要素郡(=innerHtml)を取得
var myNodes = getElementById(~).childNodes;
var NodeCnt = myNodes.length;
var myValue = "";
for (var i = 0; i < NodeCnt; i++) {
 // 子要素のINPUT要素を取得
  if (myNodes[i].nodeName == "INPUT") {
   myValue = myNodes[i].value;
   myValue:aaa
   break;
  }
}

JavaScript InnerHTMLとOuterHTMLの違い

この要素のinnerHTML/outerHTMLを取得する
<div id="myText">
 <b>TEST</b>
</div>
innerHTML
<div id="myInnerHTML">
</div>
outerHTML
<div id="myOuterHTML">
</div>
<script>
 var myText = document.getElementById('myText');
 document.getElementById('myInnerHTML').innerText = myText.innerHTML;
 document.getElementById('myOuterHTML').innerText = myText.outerHTML;
</script>
↓ 結果
innerHTML
<b>TEST</b>
※DIV要素の中のHTMLを取得
outerHTML
<div id="myText">
<b>TEST</b>
</div>
※DIV要素を含めての全てのHTMLを取得

ネットワークの接続を確認する方法

クライアント側

画像ファイルを利用(ロード時のみ)

画像をWEBサーバーから取得できたか否か?で判定する。

function fnConnectOK()
{
 接続OK時の処理
}
function fnConnectNG()
{
 接続NG時の処理
}
<img src="(ネットワークパス)/~.jpg"
  style= "width:0px; height:0px;"
  onload="fnConnectOK()"
  onerror="fnConnectNG()" />

スクリプトファイルを利用(任意のタイミング)

WEBサーバーから取得したスクリプトファイルの関数の実行結果によって判定する。

※~.aspx
<input type="button" id="~" value="更新" onclick="fnBeforeClick()" />
<script type="text/javascript">
 var timerBefore;
 function fnBeforeClick() {
  // 指定秒経過後、エラーと見なす
  timerBefore = setTimeout(fnConnectNG, 3000);
  
  //<script src="~/ConnectCheck.js"></script>タグ を作成
  //キャッシュ対策でパラメーターを付加

  var checkScript = document.createElement("script");
  checkScript.src = "~/ConnectCheck.js?" + Math.random();
  
  // ↑タグを動的に生成
  // ConnectCheck.jsを読み込んで実行 → fnConnectOK()を実行

  var head = document.getElementsByTagName("head")[0];
  head.appendChild(checkScript);
 }
 
 function fnConnectNG() {
  window.alert('サーバーと通信できません。');
 }
 
 function fnConnectOK() {
  // 指定秒経過後エラー表示のタイマー停止
  clearTimeout(timerBefore);
  
  // 本来、ボタン押下で呼び出したい処理
  btnClick();
 }
</script>

ConnectCheck.js
// 関数fnConnectOK()の呼び出し
fnConnectOK();

サーバー側

○:クライアント側からの、サーバーから処理が返ってきているか?の確認。
×:サーバー側からの、クライアントに対する接続確認

※~.aspx
function fnAfterCheck()
{
 // 前提
 // 更新実行後、サーバー側でクライアント側imgの画像パスに値を入れる。
 // サーバーでの処理後、クライアントに処理が戻っていれば、
 // ここで画像パスを取得できる


 var imgServer = document.getElementById('SvrImage');

 // 5秒後に画像パスを取得
 // 画像パスに値が入っていなければサーバーから処理が返ってきていないと見なす。

 mTimer = setTimeout(function () {
  if (imgServer.src == "") {
   window.alert("サーバーから反応がありません。");
   return false;
  }
 }, 5000);

 return true;
}
※サーバー側から処理終了の合図としてパスを設定する為の画像
<asp:Image id="SvrImage" ImageUrl="" runat="server" />
<asp:Button ID="MyButton"
 runat="server" Text="Button"
 OnClientClick="fnAfterCheck()"
 OnClick="MyButton_Click" />

※~.aspx.cs
public partial class MyForm : System.Web.UI.Page
{

 protected const string CONST_PicPath = @"(画像パス)";
 protected void MyButton_Click(object sender, EventArgs e)
 {
  for(;;){}
  // ↑テスト用無限Loop。これにより↓の画像パスが設定されない。
  // 結果、タイマーが作動しエラーメッセージが表示される。

  
  // クライアントの画像を設定
  this.SvrImage.ImageUrl = CONST_PicPath;
 }
}

AngularJS

概要

JavaScriptのMVMフレームワーク
MVW(Model-View-Whatever)
正確にはAngularJSはMVVMフレームワーク
AngularJSではMVCの「C」が置き換わった「VM(View-Model)」部分が自動化される。
クライアント側動作専用
CRUD機能有り
・フォーム入力を同一ページに即時表示(ポストバックやボタン押下の必要無し)
入力チェック
・検索
・ソート
等をクライアント側だけの機能で実現できる

使い方

<!–ライブラリのCDN参照–>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
ファイルを参照する場合はAngularJS公式サイトからダウンロード
https://angularjs.org/

即時表示

<html ng-app>
  <script Angulur.JSライブラリの参照 </script>
  <p><input type="text" ng-model="name"></p>
  <p>{{name}}</p>
</html>


↑ に入力した文字が ↓ に即時表示される。

{{name}}

入力チェック

<html ng-app>
  <form novalidate name="myForm">
  名前:<input type="text" name="txtCheck"
    ng-model="check"
    required
    ng-minlength="2"
    ng-maxlength="5">
    
    <p ng-show="myForm.txtCheck.$error.required">未入力</p>
    <p ng-show="myForm.txtCheck.$error.minlength">2文字未満</p>
    <p ng-show="myForm.txtCheck.$error.maxlength">5文字を超えている</p>
  </form>
</html>

名前:

↑ の入力チェック結果が ↓ に即時表示される。

未入力

2文字未満

5文字を超えている


ループ処理

<html ng-app>
  <script>
    var loopCtrl = function($scope) {
      $scope.week = [
        {"jp":"月","en":"Monday"},
        {"jp":"火","en":"Tuesday"},
        {"jp":"水","en":"Wednesday"},
        {"jp":"木","en":"Thursday"},
        {"jp":"金","en":"Friday"},
        {"jp":"土","en":"Saturday"},
        {"jp":"日","en":"Sunday"}
      ];
    }
  </script>
  <div ng-controller="loopCtrl">
    <p>{{week.length}} days</p>
    <ul>
      <li ng-repeat="day in week">{{day.jp}} {{day.en}}</li>
    </ul>
  </div>
</html>


ng-controller=”loopCtrl”>

{{week.length}} days

  • {{day.jp}} {{day.en}}


JavaScript Windowオブジェクト

JavaScript Windowオブジェクト

構造

window document Form select option
  Frame   Anchor   Button    
  history   Applet   Checkbox    
  location   Area   Hidden    
        Image   Password    
        Link   Radio    
            Reset    
            Text    
            Textarea  

全てはWindowオブジェクト=ブラウザ

windowオブジェクト

グローバル変数
var a = 5;
※window.a = 5; と同じ意味。

印刷ダイアログボックス
window.print();

window.alert()
window.alert("警告");

window.confirm()
メッセージ + OKボタン + キャンセルボタン
if (window.confirm("警告") == true) {
  OK時の処理
} else {
  キャンセル時の処理
}

window.onload()
//windowロード時に行う処理を指定する(document.body.onloadより早い)
window.onload = TEST();

window.open()
//新しいウィンドウを開く
var obj = window.open(
  "https://office-yone.com/",
  "sample",
  "height=300,centerscreen,resizable" )

window.close()
//ウィンドウを閉じる(openで開いたwindowのみ)
window.close;

window.showModalDialog()
モーダルウィンドウを開く
window.showModalDialog("http://www.yahoo.co.jp/", "", options);
//モーダル用オプション
var options = "dialogWidth=400px; dialogHeight=300px; center=1; status=1; scroll=1; resizable=1; minimize=0; maximize=0;";

window.moveto()
//座標(100,100)にwindowを移動(window.open()したwindowのみ)
window.moveTo(100,100);

documentオブジェクト

document.write()
※HTML上に文字列を出力できる
document.write('TEST');
document.write('<br />');
※HTML文字列も出力可能。

document.body.onload
※bodyが描写されるタイミングで行う処理を指定する(window.onloadより遅い。)
全てのHTML描写の後なので最も遅い?
funtion Test() {
  window.alert('TEST');
}
document.body.onload = Test;  //()を付けると動く場合と動かない場合がある?(検証中)
document.body.onload = Test();

document.body.doScroll()
※キー押下実行をシュミレート
document.doby.doScroll("pageUp");
document.doby.doScroll("pageDown");
※2014/03/15現在 IE限定(バージョン不明)
document.getElementById()関数
※指定した要素を操作する

locationオブジェクト

location.reload()
※ページ再読み込み
location.reload(False);  //キャッシュから再読込。引数無し時はこちら。
location.reload(true);   //WEBサーバーから再読込

location.href()
※ページ読込(遷移)
①location.href('http://www.yahoo.co.jp/');
指定のURLへジャンプする
②location.href('TEST.html?prm1=100&prm2=200');

location.search
遷移パラメーターの取得
var parm = location.search;
前述例②の場合
→?prm1=100&prm2=200

screenオブジェクト

screen.availWidth
screen.availHeight
※画面幅、画面高さの取得
var width = screen.availWidth;
var height = screen.availHeight;

Monaca (JavaScriptで作るAndroid/iPhoneアプリ)

概要

Monaca
ハイブリットモバイルアプリ開発プラットフォーム
利点:
・HTML5+JavaScriptで作成した同一のWebソースをAndroidアプリ、iOSアプリに変換できる。
・無料。
・Web上で開発できる。
・PCと直接繋がなくてもクラウド上のソースをデバイスにダウンロードして動作確認できる。
欠点:
・Java、Objective-Cでそれぞれを作るより少し動作が遅い。
・Java、Objective-Cでそれぞれを作るより少し機能が限られる。

プラグイン設定

monaca
jQuery、jQuery-Mobileに加え、GPSやバイブ等のスマホの機能を使用する為のAPI、後述するnend広告のAPI等をここで取り込む。
前述の様に、Monacaではアプリをhtmlで作成するのでheaderタグ内に、
取り込んだAPIファイルを更に取り込むloader.jsの参照を追加する。
<script type="text/javascript" src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
(このloader.js内にjQueryライブラリ等の参照コードがあるので独自に参照を記述する必要はない。追加しても無視される。)

バイブレーション

navigator.notification.vibrate(1000);
※1000:ミリ秒

外部ブラウザ起動

<a href="~" target="_blank">テキスト</a>
ではアプリ内にWebサイトを読み込んでしまい、アプリに戻れなくなる。

window.plugins.webintent.startActivity(
  {
    action: window.plugins.webintent.ACTION_VIEW,
    url: 'https://office-yone.com/'
  },
  function() {},
  function() {alert('Failed to open URL via Android Intent')}
);

広告表示

ここではAndroid/iPhone用広告を利用
<script type="text/javascript" >
  var nend_params = {"media":99999,"site":99999,"spot":999999,"type":1,"oriented":3};
</script>
等のJavaScriptコードが発行されるので、
html上に↓の様に貼り付ける。
<div class="nend_wrapper">
  <script src="http://js1.nend.net/js/nendAdLoader.js"></script>
</div>

<script type="text/javascript" >
  //ウェブサイトを開く関数(「外部ブラウザ起動」参照)
  var fnOpenWebSite = function(prmUrl) {
    window.plugins.webintent.startActivity(
      {
        action: window.plugins.webintent.ACTION_VIEW,
        url: prmUrl
      },
      function() {},
      function() {alert('Failed to open URL via Android Intent')}
      );
  };
  
  //この変数をloader.js内で使用
  var nend_params;
  
  //iOS/Android処理を切り分け
  if( monaca.isIOS ){
    nend_params = {"media":99999,"site":99999,"spot":99999,"type":1,"oriented":3};
  }
  if( monaca.isAndroid ){
    nend_params = {"media":99999,"site":99999,"spot":99999,"type":1,"oriented":3};
  }
  
  //広告をタップするとそのままリンク先を開いてしまう対策
  window.addEventListener('load', function() {
    var nend_links = document.querySelectorAll('.nend_wrapper a');
    for(var i = 0; i < nend_links.length; i+=1){
      var href = nend_links[i].href;
      nend_links[i].href = "#";
      nend_links[i].onclick = function(){fnOpenWebSite(href); return false;}
   }
  });
</script>
<div class="nend_wrapper">
  <script src="http://js1.nend.net/js/nendAdLoader.js"></script>
</div>