Information

59d3c7f9 d3d4 48ed 8a72 5ec6ed5a4fd0
  • 作者
  • 26379fd7 96b4 4164 a268 208d145fd2df クリックパワー
  • 作品リンク
  • 59d3c7f9 d3d4 48ed 8a72 5ec6ed5a4fd0 Y-clock 時刻読上機能つきレスポンシブ時計
  • 概要
  • PC・スマホ・タブレットで使える時計です。
    デジタル表示・アナログ表示に加え、5分ごとに時刻を読み上げます。
    さらに毎時0・15・30・45分には視覚効果とサウンドが加わります。
    日の出・日の入り・深夜で色が変わります。これにより夜の眠気を妨げません。
    作者はこれを使い、朝の支度をしながらテレビをつけるのを止め時短もできました。

  • タグ
  • こだわり・開発背景
  • ・現在手がけている実務案件では純粋な個人成果としてのPRが困難な為、現在のフロントエンドスキルで制作可能な物を作成しました。
    ・画面表示はゲームアプリ同様1/60秒ごとに更新することで、スムーズな動作とアプリならではの画面演出を実現しました。
    ・SVGベクターを動的制御し、角度や色を変えることで時計の針やルームインテリアとしても機能する配色を実現しました。
    ・WebAudioAPIを使い、音声読み上げ機能をPCだけでなくスマホにも対応させました(IEや古いAndroid OSは非対応)
    ・今回PHPはSafari mobile等におけるCSS・JavaScriptファイルのキャッシュを禁止する目的で使用しており、バックシステムとしての機能はありません。
    ・デジアナ時計アプリや時刻読み上げアプリはいずれもネイティブアプリでは既出です。しかし全画面広告表示による不快感やポケットに入れた時に意図しない動作が発生するなどの問題があり、実際に使いたい物には巡り会えませんでした。加えてレスポンシブデザインの時計WEBアプリも特に見当たりませんでした。

  • 開発環境
  • Windows10、Illustrator、DreamWeaver、HTML5、CSS3、jQuery、CeVIO(音声読み上げ素材作成)、KORG Gadget(メロディー素材作成)、共有サーバ

  • 制作期間
  • 2018年5月中旬から2~2.5週間かけて制作しました。

  • 学習方法
  • 独学と実務を通じ学んできました。