2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

超リアルなスマホ(iOS)のクローンを作る!

Last updated at Posted at 2022-06-26

スマホ(iOS)のクローン

今回作ったもの(開発中)

iOSのクローン
20220626_184247.gif

製作物の特徴

  • iOSの特徴を捉えた触れるUI
  • YouTubeの簡単なアプリ
  • ピアノ(実際に音が鳴ります)
  • 投稿掲示板(PHP)
  • ロック画面,設定画面
  • 通知,アラートの機能
  • 下のホームバー(黒色の細長いボタン)をクリックするとホーム画面へ
    JointPics_20220626_190051.PNG

コードの解説

HTML

概要は以下の通りです。

index.html
<div id= "frame"> <!--フレーム-->
    <div id= "header"></DIV> <!--ヘッダー-->
    <div id= "notice"></div> <!--通知-->
    <div id= "alert" onclick= "closeAlert()"></div> <!--アラート-->
    
    <div class= "screen"></div> <!--スクリーン-->
</div>

CSS

  • 今回は省略します。
  • 一部のデザインで、SwiperやMaterialize.cssも使用しています。

JavaScrjpt

JavaScript
// アプリ立ち上げ(ボタンを押した0.3秒後に開く)
function launchApp(hashName, num) {
    setTimeout( ()=> {
        location.hash = '#' + hashName;
    }, 300);
}

// ピアノの音も実際に鳴ります。
function pianoNote(note) {
    document.getElementById('sound-note-'+note).pause();
    document.getElementById('sound-note-'+note).currentTime = 0;
    document.getElementById('sound-note-'+note).play();
}

最後に

いかがでしたでしょうか。
今回の開発のほとんどがCSSでした。
今後、未開発のアプリも追加していこうと考えています。
読んでくださりありがとうございました!

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?