JavaScriptを活用！iPhoneで使える10の便利技 – Japanシーモア

JavaScriptを活用！iPhoneで使える10の便利技

JavaScriptを使ったiPhoneの便利技を解説するイメージJS
この記事は約21分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

JavaScriptを使えば、iPhoneで便利な機能を手軽に実現できます。

この記事では、JavaScriptを活用してiPhoneで使える10の便利技を徹底解説します。

サンプルコード付きで、使い方やカスタマイズ方法まで解説していきますので、初心者の方でも安心してご覧いただけます。

●JavaScriptとは

JavaScriptは、Webページにインタラクティブな機能を追加するためのプログラミング言語です。

○JavaScriptの基本概念

JavaScriptは、HTMLとCSSと共にWebページの構成要素となります。

HTMLがページの構造を、CSSがデザインを担当し、JavaScriptはページに動的な要素を追加する役割を果たします。

●iPhoneでJavaScriptを有効にする方法

iPhoneでは、JavaScriptはデフォルトで有効になっていますが、無効になっている場合は下記の手順で有効にすることができます。

○iPhoneの設定でJavaScriptを有効にする

  1. iPhoneの「設定」アプリを開きます。
  2. 「Safari」をタップします。
  3. 「詳細」をタップします。
  4. 「JavaScript」のスイッチをオンにします。

これで、iPhoneのSafariでJavaScriptが有効になります。

●JavaScriptを使ったiPhoneの便利技10選

○サンプルコード1：Webページ内の画像を拡大表示する

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像拡大表示</title>
  <style>
    img {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <img src="sample.jpg" alt="サンプル画像" onclick="zoomImage(this)">
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

function zoomImage(image) {
  const newWindow = window.open("", "_blank");
  newWindow.document.write('<html><head><title>拡大画像</title></head><body>');
  newWindow.document.write('<img src="' + image.src + '" alt="' + image.alt + '">');
  newWindow.document.write('</body></html>');
}

このサンプルコードでは、画像をクリックすると新しいウィンドウで拡大表示されます。

zoomImage関数が画像の拡大表示を行っています。

○サンプルコード2：iPhoneの傾きを検出してアクションを実行する

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>iPhoneの傾き検出</title>
</head>
<body>
  <h1 id="tiltStatus">iPhoneを傾けてください</h1>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

window.addEventListener('deviceorientation', handleTilt);

function handleTilt(event) {
  const tiltStatus = document.getElementById('tiltStatus');
  const gamma = event.gamma;

  if (gamma > 20) {
    tiltStatus.textContent = '右に傾けました';
  } else if (gamma < -20) {
    tiltStatus.textContent = '左に傾けました';
  } else {
    tiltStatus.textContent = '傾けてください';
  }
}

handleTilt関数がiPhoneの傾きを検出し、tiltStatusのテキスト内容を変更しています。

○サンプルコード3：タッチスワイプで画像を切り替える

このサンプルコードでは、タッチスワイプ操作によって画像を切り替える機能を実装しています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タッチスワイプで画像切り替え</title>
  <style>
    img {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <img id="image" src="image1.jpg" alt="画像1">
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

const image = document.getElementById('image');
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
let imageIndex = 0;

image.addEventListener('touchstart', handleTouchStart);
image.addEventListener('touchmove', handleTouchMove);

let startX;

function handleTouchStart(event) {
  startX = event.touches[0].clientX;
}

function handleTouchMove(event) {
  const endX = event.touches[0].clientX;
  const diffX = startX - endX;

  if (Math.abs(diffX) > 100) {
    if (diffX > 0) {
      imageIndex++;
      if (imageIndex >= images.length) {
        imageIndex = 0;
      }
    } else {
      imageIndex--;
      if (imageIndex < 0) {
        imageIndex = images.length - 1;
      }
    }
    image.src = images[imageIndex];
  }
}

画像を配列で管理し、スワイプ操作に応じてimageIndexを変更して画像を切り替えています。

○サンプルコード4：ボタンを押すと音声が再生される機能を追加する

このサンプルコードでは、ボタンを押すと音声が再生される機能を実装しています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ボタンで音声再生</title>
</head>
<body>
  <button id="playButton">音声を再生する</button>
  <audio id="audio" src="sound.mp3"></audio>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

const playButton = document.getElementById('playButton');
const audio = document.getElementById('audio');

playButton.addEventListener('click', () => {
  audio.play();
});

ボタンがクリックされると、audio.play()が実行され、音声が再生されます。

○サンプルコード5：現在地情報を取得してマップに表示する

このサンプルコードでは、現在地情報を取得して、Googleマップ上に表示する機能を実装しています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>現在地表示</title>
  <style>
    #map {
      width: 100%;
      height: 400px;
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
  <div id="map"></div>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

function initMap() {
  navigator.geolocation.getCurrentPosition((position) => {
    const lat = position.coords.latitude;
    const lng = position.coords.longitude;
    const map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: lat, lng: lng },
      zoom: 16
    });

    const marker = new google.maps.Marker({
      position: { lat: lat, lng: lng },
      map: map
    });
  });
}

initMap();

navigator.geolocation.getCurrentPosition()を使用して現在地の緯度・経度を取得し、Googleマップに表示しています。

○サンプルコード6：テキストを読み上げる機能を実装する

このサンプルコードでは、テキスト入力欄に入力されたテキストを読み上げる機能を実装しています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テキスト読み上げ</title>
</head>
<body>
  <input id="text" type="text" placeholder="テキストを入力してください">
  <button id="speakButton">読み上げる</button>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

const textInput = document.getElementById('text');
const speakButton = document.getElementById('speakButton');

speakButton.addEventListener('click', () => {
  const utterance = new SpeechSynthesisUtterance(textInput.value);
  speechSynthesis.speak(utterance);
});

ここでは、SpeechSynthesisUtteranceオブジェクトを使用して、入力されたテキストを読み上げています。

speakButtonがクリックされると、speechSynthesis.speak()関数が実行され、テキストが読み上げられます。

○サンプルコード7：バイブレーションを使った通知機能を作る

このサンプルコードでは、バイブレーションを使った通知機能を実装しています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>バイブレーション通知</title>
</head>
<body>
  <button id="vibrateButton">バイブレーション通知を送る</button>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

const vibrateButton = document.getElementById('vibrateButton');

vibrateButton.addEventListener('click', () => {
  navigator.vibrate(1000);
});

vibrateButtonがクリックされると、navigator.vibrate()関数が実行され、バイブレーションが1秒間作動します。

○サンプルコード8：タッチ操作で文字を描く機能を追加する

このサンプルコードでは、タッチ操作で画面上に文字を描く機能を実装しています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タッチで描画</title>
  <style>
    canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="300" height="200"></canvas>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 描画状態を管理する変数
let drawing = false;

// タッチ開始時の処理
canvas.addEventListener('touchstart', (e) => {
  e.preventDefault();
  ctx.beginPath();
  ctx.moveTo(e.touches[0].clientX, e.touches[0].clientY);
  drawing = true;
});

// タッチ移動時の処理
canvas.addEventListener('touchmove', (e) => {
  if (!drawing) return;
  ctx.lineTo(e.touches[0].clientX, e.touches[0].clientY);
  ctx.stroke();
});

// タッチ終了時の処理
canvas.addEventListener('touchend', () => {
  drawing = false;
});

このコードでは、タッチ操作で描画する機能を実現しています。

touchstartイベントで描画を開始し、touchmoveイベントで線を引き続け、touchendイベントで描画を終了します。

○サンプルコード9：カメラを使ってQRコードを読み取る

このサンプルコードでは、カメラを使ってQRコードを読み取る機能を実装しています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>QRコードリーダー</title>
</head>
<body>
  <video id="video" width="300" height="200"></video>
  <button id="scanButton">QRコードをスキャンする</button>
  <p id="result"></p>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

// 必要なライブラリをインポートする
import QrScanner from 'https://unpkg.com/qr-scanner@1.1.0/qr-scanner.min.js';

const video = document.getElementById('video');
const scanButton = document.getElementById('scanButton');
const result = document.getElementById('result');

// QRスキャナーのパスを設定
QrScanner.WORKER_PATH = 'https://unpkg.com/qr-scanner@1.1.0/qr-scanner-worker.min.js';

// QRコードを読み取ったときの処理を定義
const qrScanner = new QrScanner(video, (decodedText) => {
  result.textContent = decodedText;
});

// ボタンが押されたときにQRコードをスキャン開始
scanButton.addEventListener('click', async () => {
  try {
    await qrScanner.start();
  } catch (e) {
    console.error(e);
  }
});

このコードでは、QRコードリーダーライブラリ「qr-scanner」を利用しています。

QrScannerオブジェクトを生成し、QRコードを読み取った際の処理を定義しています。

スキャンボタンが押された際に、カメラを起動してQRコードの読み取りを開始します。

○サンプルコード10：アプリのような画面遷移を実現する

このサンプルコードでは、アプリのような画面遷移を実現する方法を紹介しています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画面遷移のデモ</title>
  <style>
    .page {
      display: none;
    }
    .page.active {
      display: block;
    }
  </style>
</head>
<body>
  <div id="page1" class="page active">
    <h1>ページ1</h1>
    <button id="toPage2">ページ2へ</button>
  </div>
  <div id="page2" class="page">
    <h1>ページ2</h1>
    <button id="toPage1">ページ1へ</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

// 各ページとボタン要素を取得
const page1 = document.getElementById('page1');
const page2 = document.getElementById('page2');
const toPage2 = document.getElementById('toPage2');
const toPage1 = document.getElementById('toPage1');

// ページ遷移の関数を定義
function changePage(fromPage, toPage) {
  fromPage.classList.remove('active');
  toPage.classList.add('active');
}

// ボタンが押された時のイベントリスナーを設定
toPage2.addEventListener('click', () => changePage(page1, page2));
toPage1.addEventListener('click', () => changePage(page2, page1));

このコードでは、CSSクラスを使ってページ遷移を実現しています。

各ページは<div>要素で定義され、CSSクラス.activeが適用されているページだけが表示されます。

ボタンが押されたとき、changePage関数が呼び出され、表示されているページの.activeクラスが削除され、別のページに.activeクラスが追加されることで、画面遷移が実現されます。

●JavaScriptをカスタマイズする方法

○サンプルコード11：独自の機能を追加するカスタマイズ方法

このサンプルコードでは、独自の機能を追加するカスタマイズ方法を紹介しています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>独自機能のデモ</title>
</head>
<body>
  <h1>現在時刻を表示する</h1>
  <button id="timeButton">時刻を表示</button>
  <p id="currentTime"></p>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

// 時刻表示ボタンと現在時刻表示要素を取得
const timeButton = document.getElementById('timeButton');
const currentTime = document.getElementById('currentTime');

// 現在時刻を表示する関数を定義
function showCurrentTime() {
  const now = new Date();
  currentTime.textContent = now.toLocaleTimeString();
}

// ボタンが押された時のイベントリスナーを設定
timeButton.addEventListener('click', showCurrentTime);

このコードでは、ボタンをクリックすることで現在の時刻を表示する独自の機能を実装しています。

showCurrentTime関数では、現在時刻を取得し、<p>要素に表示しています。

ボタンが押されたときにこの関数が呼び出されるよう、イベントリスナーを設定しています。

●注意点と対処法

○JavaScriptを使う際の注意点

セキュリティ対策

クロスサイトスクリプティング（XSS）やクロスサイトリクエストフォージェリ（CSRF）などの脆弱性を防ぐため、サニタイズやエスケープ処理を適切に行いましょう。

ブラウザ互換性

すべてのブラウザで動作するように注意してコードを記述しましょう。

必要に応じて、PolyfillやBabelを利用してブラウザの違いを吸収することができます。

○対処法

セキュリティ対策

セキュリティに関する文献を読むことで、最新の対策方法や脆弱性に関する知識を得ることができます。

また、Webアプリケーションのフレームワークが提供するセキュリティ機能を利用することで、効果的な対策が可能です。

ブラウザ互換性

ブラウザごとの対応状況を調べることができるサイト（例：Can I use）を利用し、適切な対応を行いましょう。

また、必要に応じて、PolyfillやBabelを利用してブラウザの違いを吸収することができます。

パフォーマンスの最適化

大規模なWebアプリケーションでは、遅延の原因となるJavaScriptの実行を最適化することが重要です。

コードの最適化や、遅延読み込み（lazy loading）の実装などが効果的です。

メンテナンス性の向上

コードの可読性や保守性を高めるために、適切な命名規則の遵守やコメントの記述、モジュール化などの工夫が必要です。

まとめ

本稿では、JavaScriptを利用したさまざまな機能の実装方法を紹介しました。

サンプルコードを参考に、自分のプロジェクトに応用してみましょう。

また、JavaScriptを使う際には、セキュリティ対策やブラウザ互換性、パフォーマンス最適化、メンテナンス性向上の対策を行うことが重要です。

適切な対処法を用いて、より良いWebアプリケーションを開発していきましょう。