作ったもの、プログラミングで共有できそうなこと、IT関連でやってみたことなど、なんでも書いていきます。ヤドン可愛い

最近ファーボというパズルゲームにハマりました(^^;) くそ面白かったけど時間泥棒なためもう封印します・・・ 気が向いたらやるだろうけど・・・

月曜から三日間のまとめ

  • スマホサイズの画面の場合、ボタンをタッチして検索メニューを出し入れをするようにした
  • いろんな画面サイズに合わせてCSSを最適化した

月曜からの三日間はほぼほぼCSSの最適化と、スマホでの画面の切り替えを理想通りになるようcoffeescriptに記述していました。

スマホの時のみ表示するメニュー開閉ボタン

頭の中では欲しいなってデザインが浮かんでたけど検索してもヒットしなかったので自作しました。

-----  index.html.erb
    <div class="smartphone_nav dispnone_nav" ontouchstart="">
      <div class="smartphone_nav_bar_top"></div>
      <div class="smartphone_nav_bar_center"></div>
      <div class="smartphone_nav_bar_bottom"></div>
    </div>

CSS


.smartphone_nav{
  box-sizing: border-box;
  position: fixed;
  top: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  background-color: #444;
  border: 1px solid black;
  border-radius: 3px;
  z-index: 5;
}
.smartphone_nav_bar_top, .smartphone_nav_bar_center, .smartphone_nav_bar_bottom{
  border-radius: 5px;
  border: 10px solid white;
  width: 70px;
  margin: 10px auto;
}

.smartphone_nav_bar_top{
  top: 40px;
}

.smartphone_nav_bar_center{
  top: 60px;
}

.smartphone_nav_bar_bottom{
  top: 80px;
}

結果こんな感じに作れました

こんな感じの結構いろんなサイトで見かける気がするんだけどな・・・

次です。タッチするたびにメニューが、右からフェードイン、右へフェードアウトを繰り返すようにしたかったので、以下のようにしました。

CSS

  .fadein{
    animation: fadein 0.5s ;
    opacity: 1;
    visibility: visible;

  }

  .fadeout{
    animation: fadeout 0.5s ;
    opacity: 0;
    visibility: hidden;

  }

    @keyframes fadein {
    0%{
      transform: translateX(380px);/* ここは画面の横幅に応じて変更 */
    }
    100% {
      transform: translateX(0px);
    }
  }

  @keyframes fadeout {
    0%{
      transform: translateX(0px);
    }
    100% {
      transform: translateX(380px);/* ここは画面の横幅に応じて変更 */
    }
  }

fadeinとfadeoutについては、以下のサイトを参考にしました。

【HTML/CSS】たかがフェードイン/フェードアウトするだけの挙動に全力で取り組んだ結果、最強のCSSができてしまった話【最強】

画像を徐々に表示する CSS アニメーション

で、inとoutがボタンを押されるたびに切り替わるので、coffeescriptに以下を実装。

-----  pages.coffee

  $(document).on 'touchstart','.smartphone_nav', ->
      $search_wrapper.toggleClass("fadein")/* search_wrapperはメニュー画面のクラス */
      $search_wrapper.toggleClass("fadeout")

これでボタンを押すたびに、検索メニュー画面のフェードインとフェードアウトを交互に行う機能が追加されました。

後、エンコードが二重にできることを知りました。

-----  page.controller.rb
    def search_html(url)
      search_url =  url.encode("shift_jis")
      search = URI.encode search_url
      html = open(search).read 
      return html
    end

このように、encodeを二回行うことで、正しい検索結果が返ってくるようになりました。 これにはだいぶ苦しめられましたがこんなことでよかったんだなぁ・・・

この記事へのコメント

まだコメントはありません