読者です 読者をやめる 読者になる 読者になる

yuri memo

コーディングとかのメモ帳

スマホでフルスクリーンになるレスポンシブメニュー

jQuery CSS レスポンシブ

今回は以下のようなレスポンシブメニューを実装しました。
・モバイル時に、メニューをフルスクリーンで表示
・メニュー開閉アニメーションはフェードイン/フェードアウト
jQueryのfadeToggleなどは使わずに、classの付け外しをjQueryで行う

デモはこちらです。

yuri memo - レスポンシブメニュー DEMO
 デモは、以下のような構成になっています。
HTML
[ fade_menu.html ]
CSS
[ css/style.css ]
jQuery
[ js/jquery-2.0.0.min.js ]
[ js/script.js ]

HTML

順番にコードを載せていきます。

<body>
  <header>
    <h1 class="logo">yuri memo</h1>
    <!-- ハンバーガーメニュー部分 -->
    <div id="toggle">
      <div class="trigger">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <!-- フルスクリーン部分 -->
    <div class="toggleWrap">
      <!-- メニュー部分 -->
      <ul class="mainNav">
        <li><a class="navItem" href="#">Home</a></li>
        <li><a class="navItem" href="#">About</a></li>
        <li><a class="navItem" href="#">Product</a></li>
        <li><a class="navItem" href="#">Contact</a></li>
        <li><a class="navItem" href="#">Nyaaan</a></li>
      </ul>
    </div>
  </header>

  <main>
    <h2>レスポンシブメニューのデモです。</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </main>

  <!-- jsファイルの読み込み -->
  <script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
</body>

#toggleがクリックされた時に、
.toggleWrapに対して、開閉のクラスやアニメーションのクラスをつけていきます。

CSS

※メニューに関するCSSのみ抜粋しています。
CSSの全コードはデモから確認できます。

/* スマホでメニューを開いた際に背景色が画面全体にかかるようにと
フルスクリーンで固定したいので、position: fixed; top: 0; left: 0; を指定 */
.toggleWrap {
  background: rgba(234, 234, 234, 0.95);
  padding: 50px 15px 10px 15px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mainNav li {
  list-style-type: none;
}
.navItem {
  display: block;
  text-decoration: none;
  color: #3e3e3e;
  border-bottom: 1px solid #ccc;
  padding: 15px 0;
  text-align: center;
  font-size: 2rem;
}

/* メニューを閉じる時のスタイル
display:none; を使用せず、opacityを使うとfadeっぽくなる */
.hide {
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

/* アニメーションはメニューの開閉時のみでいいので
.toggleWrapに書かず、別にclassを用意 */
.animation {
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
}

/* メニューオープン時のみ、メニューの後ろのコンテンツをスクロールさせない
iOS safariには別途対応が必要(jQueryに記述)*/
.no-scroll {
  overflow: hidden;
}

/* 768px以上に適応するスタイル */
@media screen and (min-width: 768px) {
  #toggle {
    display: none;
  }
  .toggleWrap {
    background: none;
    height: auto;
    position: static;
    padding: 0;
    margin-bottom: 20px;
  }
  .mainNav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
            justify-content: space-between;
    max-width: 670px;
    margin: 0 auto;
  }
  .navItem {
    padding: 5px 15px;
  }
  .navItem:hover {
    border-color: #3696da;
  }
  .animation {
  -webkit-transition: none;
          transition: none;
  }

 /* 非表示にしていたメニューを表示させる */
  .hide {
    opacity: 1;
    visibility: visible;
  }
}

jQuery

$(function(){
  fade('.toggleWrap');
});

function fade(elm){
  var $fade = $(elm),
      $body = $('body');
  // .toggleWrapを非表示にしておく
  $fade.addClass('hide');

  // #toggleがクリックされた時に、.hideの付け外しで .toggleWrapの表示・非表示を切り替え
  // .addClass('animation');でアニメーションのCSSを適応
  $('#toggle').on('click', function(){
    $fade.toggleClass('hide').addClass('animation');
    $('.trigger').toggleClass('active');

    // スクロールの制御
    // .hideを持っている状態はメニューが閉じている状態で、このときは.no-scrollは不要
    if ($fade.hasClass('hide')) {
      $body.removeClass('no-scroll').off('.noScroll');
    } else {
      // メニューが開いている時に、bodyに.no-scrollを追加してスクロールさせない
      $body.addClass('no-scroll').on('touchmove.noScroll', function(e){
        e.preventDefault();
      });
    }
  });
}
$body.on('touchmove.noScroll', function(e){
  e.preventDefault();
});

上記の部分はiOSでは、overflow: hidden;だけでスクロールを無効にできないため追記しています。
こちらの記事が参考になりました。
qiita.com

fadeToggleを使わない理由

jQueryでslideToggleとかfadeIn,fadeOutとか楽なのは事実なんですが
fadeOutは最終的にdisplay: none;の状態になります。
CSSでdisplay: block;とか書いてても
style属性にdisplay: none;が適応されているので
リロードしないとその状態が保持されたままなんですよね(._.)
こんな感じです。ブレイクポイントを過ぎてもメニューが表示されませんね。
http://yurixxx8.com/demo/20170305/2017-03-05.gif
ブレイクポイントによってはスマホの縦横切り替えでこの現象が起きるかも?
なので今回はクラスの付け外しでやってみました!

以上ですにゃ。

プラグインなしで拡大しながらフェードで切り替わるスライド

CSS jQuery

拡大しながらフェードインするスライドを実装したのでめもめも。
さらっと言ってますけど、ほんと分からなくて泣きそうになりながら実装したんだよ・・・ぐすん。

とりあえず、デモをのせますね。

1. フルスクリーン背景バージョン
2. 通常スライドバージョン

フルスクリーンか通常のかはHTMLとCSSで変更し、jsは全く同じものです。

$(window).load(function(){
var slide = $('.slideshow');
var i = 0;
// ページの読み込み時にスライドの1枚目を2000ミリ秒かけてフェードイン
slide.find('.item').eq(i).fadeIn(2000).addClass('in');
// スライドの枚数を調べて変数に格納
var total = $('.slideshow .item').length -1;
// 処理を繰り返す
setInterval(function(){
  if(i < total){
  slide.find('.item').eq(i).addClass('out');
  slide.find('.item').eq(i).removeClass('in');
    j = i;
    i++;
    setTimeout(function(){
      // 1000ミリ秒後に3500ミリ秒かけてフェードインする
      slide.find('.item').eq(i).fadeIn(3500).addClass('in').removeClass('out');
    },1000);
    // 4500ミリ秒かけてフェードアウトする
    slide.find('.item').eq(j).fadeOut(4500);
  } else if(i == total){
  slide.find('.item').eq(i).addClass('out');
  slide.find('.item').eq(i).removeClass('in');
    j = i;
    i = 0;
    setTimeout(function(){
      slide.find('.item').eq(i).fadeIn(3500).addClass('in').removeClass('out');
    },1000);
    slide.find('.item').eq(j).fadeOut(4500);
  };
// この値を変更すると、処理の間隔を遅くしたり早くしたりできる
},4500);
});

setTimeout(function(){
 slide.find('.item').eq(i).fadeIn(3500).addClass('in').removeClass('out');
 },1000);
 slide.find('.item').eq(j).fadeOut(4500);
}
フェードにかかる秒数を変更する場合は、fadeOutの引数を青色の箇所の合計とあわせるようにします。

setInterval(function(){
 // ここに書いた処理が4500ミリ秒ごとに繰り返される
},4500);

今回のデモで言うと、値を6000などにすると画像の停滞時間が長くなります。

1. フルスクリーン背景バージョン[slide sample-01]

<div class="wrap">
  <h1 class="title">slide sample-01</h1>
  <div class="slideshow">
    <div class="item" style="background-image: url(images/slide01.jpg)"></div>
    <div class="item" style="background-image: url(images/slide02.jpg)"></div>
    <div class="item" style="background-image: url(images/slide03.jpg)"></div>
  </div>
</div>
.slideshow {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.slideshow .item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: none;
  background-size: cover;
  background-position: center center;
}
.in {
  -webkit-transform: scale(1);
  transform: scale(1);
  z-index: 2; 
}
.out {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: 4s;
  transition: 4s;
  z-index: 1;
}
.wrap {
  position: relative;
}
.title {
  position: absolute;
  transform: translate(calc(50vw - 50%),calc(50vh - 50%));
  z-index: 10;
  color: rgba(102, 102, 102, 0.70);
}

2. 通常スライドバージョン[slide sample-02]

<div class="slideshow">
  <img class="item" src="images/slide2-01.jpg" alt="">
  <img class="item" src="images/slide2-02.jpg" alt="">
  <img class="item" src="images/slide2-03.jpg" alt="">
</div>
.slideshow {
  position: relative;
  width: 80%;
  padding-top: 35%;
  overflow: hidden;
  margin: 0 auto;
}
.slideshow .item {
  width: 100%;
  position: absolute;
  top: 0;
  display: none;
}
.in {
  -webkit-transform: scale(1);
  transform: scale(1);
  z-index: 2;
}
.out {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: 4s;
  transition: 4s;
  z-index: 1;
 }
.title {
  text-align: center;
  color: rgba(102, 102, 102, 0.70);
  margin: 20px 0 15px 0;
}

えっと・・・こんな感じです・・・。
一応GitHubにもあげてみました。ぷるぷる。
GitHub - yurixxx8/zoom-fade-slide: It is a slide that switches with fade while expanding.

ちなみに、高解像度ディスプレイのFirefoxでみると挙動が怪しいです。
scaleで拡大される時になんだか問題ありそうです・・・。
他の方が作られた近いような感じのプラグインでも、同じ現象が起きたのでFirefox固有の何かなのでしょうかね、、、。
解決策探し中なので解決できたらまた書きます。
(5000pxくらいの画像用意すれば回避できるけど根本的な解決になっていない)

はじめてのさくらVPS。はじめてのサーバー構築で大変だったところ。

VPS サーバー

以前から気になっていたVPSに先日手を出しました。
メモリ 1GB・SSD 30GBで月972円ですよ〜〜〜。

その時の初期設定メモです。
基本はさくらの公式設定ガイド通り。
さくらの初期設定ガイドそこそこ分かりやすくてよかっです。
【さくらのVPS】サーバの初期設定ガイド – さくらのサポート情報

ちなみに、サーバーの知識はほぼないです。
レンタルサーバーでたまにDNS切り替えとかドメイン移管とかそんなくらいで。
コマンドがしがし叩いてサーバー立てるなんてほんとにもう・・・。

〈ちょっと迷ったところ〉 SSH接続の設定変更方法

さくらの公式設定ガイドには以下のようにありますが。

TeraTermを利用して、ログイン方法をパスワード認証から公開鍵認証へ変更する方法です。 

えー、めんどくさい。。。と思い別な方法で。(やったことないくせに)
以下の記事を参考にしました。
Linuxコマンド【 ssh-keygen 】認証用の鍵を生成 - Linux入門 - Webkaru

rootでログインして、

# ssh-keygen

するといろいろ聞かれます。

Enter file in which to save the key (/home/user/.ssh/id_rsa): ← キーの保存先です。Enterぽち
Created directory '/home/user/.ssh'. ← ~/.ssh がない場合ディレクトリを作成
Enter passphrase (empty for no passphrase): ← パスフレーズを入力
Enter same passphrase again: ← もう一度入力
Your identification has been saved in /home/user/.ssh/id_rsa. ← ここにつくったよ
Your public key has been saved in /home/user/.ssh/id_rsa.pub. ←公開鍵これだよ

カギを無事につくれたら、ssh接続をするユーザでサーバへログイン。
公開鍵をサーバに登録します。
ここは以下の記事を参考にしました。
さくらのVPS初期設定 - Qiita

$ mkdir .ssh
$ chmod 700 .ssh
$ vi .ssh/authorized_keys

これそのままコマンドに打ってくです。
で、作った公開鍵(.ssh/id_rsa.pub)の内容をコピペして保存し、
以下のコマンドでパーミッションの変更。

$ chmod 600 .ssh/authorized_keys

これでSSHログインできるようになります。
直後にさっそくログインしようと思ったら、なぜかタイムアウトしてしまう現象にハマって・・
よくみたら起動していたはずのサーバーが停止してました。てへ。起動したらログインできた。

〈詰んだところ〉ポート番号変えたらログインできなくなった

さくらの公式設定ガイドや他の方の記事にもあるように以下の設定をします。

  • 攻撃を回避するために、SSH接続のポートを22番から変更する
  • rootユーザでのログインを無効にする
  • パスワード認証を無効にする
$ su -
Password: ← rootのパスワードでログイン
# vi /etc/ssh/sshd_config
#Port22 
→Port65228
49152番〜65535番の間で

#PermitRootLogin yes 
→PermitRootLogin no
rootユーザでのログインを無効

PasswordAuthentication yes 
→PasswordAuthentication no
パスワード認証を無効

設定変更したら、設定ファイルの変更読み込みして終了でし。

# service sshd restart

いざログイン。

# ssh admin@xxx-222-12345.vs.sakura.ne.jp -p 65228 -i ./.ssh/id_rsa

※admin@xxx-222-12345.vs.sakura.ne.jpのところはVPSのコンパネに書いてあったよ!

で、ログインできない。何回やってもできない・・・。
ポートを22に戻すとログインできる。いみわかんない(´;ω;`)

調べた結果、
☑️ 変更後のポートをリッスンしているか確認
→ リッスンしていれば正常にポート番号の変更がされてるのでファイアウォールが原因かも
☑️ ファイアウォールの停止をしてログインできるか確認
→ ログインできたらファイアウォールの影響なので指定したポートを解放する
とのことで、まさにファイアウォールが原因でした。

●リッスンしているポートの確認

# netstat -tanp | grep LISTEN

ファイアウォールの停止方法

# /etc/rc.d/init.d/iptables stop 
iptables: Setting chains to policy ACCEPT: filter [  OK  ]
iptables: Flushing firewall rules: [  OK  ]
iptables: Unloading modules: [  OK  ]

ポートを解放するためにiptablesを編集します。
サーバの利用用途に合わせて許可するポート番号を設定する

# iptables -A INPUT -p tcp -m tcp --dport 65228 -j ACCEPT
# iptables -A INPUT -p tcp -m tcp --dport 80 -j ACCEPT
# iptables -A INPUT -p tcp -m tcp --dport 443 -j ACCEPT

※ 80 HTTP / 443 HTTPS

iptablesを再起動して変更を適用します。

$ service iptables restart

これで無事SSHログインできました。

順番が逆になっちゃったけど最後にOSのアップデートで終了。

# yum update

途中で[y/n]が表示されたら「y」を選択。
Complete!が表示されればOK。

ポート番号変更してログインできなくなった時は心折れそうでしたが
無事にサーバー立てられてよかったです。
せっかくサーバー契約したので真面目に使っていく所存♡

yuriについて。この仕事が好き。

一昨日、念願のMacBookProが届きました。わーい。

さて今回は、わたしの普段の仕事や日頃思っていることや考えていることをながながと書こうと思います。
あらかじめお伝えいたしますが3,000文字くらいあります。

1.わたしについて

地方の制作会社でフロントエンドエンジニアみたいなことやってます。
レベルは卵くらいです。
写真を撮ることが趣味になりつつあります。
勢い余って先日、FUJIFILMのX-T10を相棒にしました。かわいいです。

2.なんでweb業界に入ったか

父がSEをしていることもあり、小さい頃からパソコンは身近な存在でした。
その頃から漠然と「パソコンかたかたして仕事してる人かっちょいい」みたいなのはあったと思います。
学生時代に一度は、父と同じ道を、、と思ったのですが
当時相談した先生からの「勉強しないとだよ〜数学できないと」の一言で一瞬で諦めました。
諦め早いですね。
卒業後、webとは全く別のサービス業に就きましたが、「何かが違う。やりたいことはこれじゃない。」と思い2年弱くらいで退職しました。
なんだかんだ「パソコンかたかたして仕事してる人かっちょいい」の気持ちが大きかったんでしょうね。
退職後、職業訓練PhotoshopIllustratorDreamweaverを教えてくれる講座があったので受講しました。

以下感想

ってな感じでコーディング楽しいなって思いました。
そして、「コーディングしたい」その一心で今の会社に就職しました。

3.普段の業務

基本的にHTML/CSS/jQueryでのコーディングがメインです。
弊社は分業制なのでデザイナーはコーディングはしません。
人数もそんなに多くないので、わたしがディレクション的なことをする場合も結構あります。
とは言っても、デザイン・企画はデザイナーがメインですので大したことはしてません。
プロジェクトの進行管理、クライアントとのやり取りなどですかね。
案件によっては、コンセプトからコンテンツ出しまで考えたこともありますが、めっちゃ大変でした。
正直、こういうの向かないかも…と思うくらいしんどかったです。(笑)
楽しいは楽しいんですけどね。デザインができないのもあって難しいところもありました。

4.最近知ったこと・やってみたこと

web業界に入ってから、もう2年経つのですが、今まで外の世界を見てこなかったと言うか、社内が基準だったので世の中のweb界隈の動きとか全く見てなかったんですね。
今思うと、本当もったいないなぁと後悔しております。
積極的に技術などを学ぶようになったのは今年の7月?とかですかね?
ちょうど今のTwitterアカウント(yuri (@yuri_xxx8) | Twitter)を使い始めたのと同時期ですね。
そこからはもう毎日が発見と学びの連続です。

2016年7月以降に知った存在

・Node.js
・タスクランナー(Gulp/Grunt)
 参考記事https://ics.media/entry/3290
・React
 参考記事http://qiita.com/rgbkids/items/8ec309d1bf5e203d2b19
・AngularJS
・Git
AWS
・さまざまなCSS設計(FLOCSS/SMACCS…)
 参考記事:http://uxmilk.jp/43386

などです。いや〜知らないってこわい。

最近やったこと

・Gulp導入してみた
 Autoprefixer一度使うとやめられないです。
・Sass(SCSS記法)で書いてみた
・Reactのチュートリアルやってみた(まだ途中)
Linuxを入れる(思いつきでやりました)
・黒い画面と戯れる

お気に入り

Boostnote
スニペットとメモを管理してます。
今のところ結構気に入って使ってます。
アカウントは不要で、ストレージをGoogleDrive等にすると複数端末でもデータが共有できるので便利です。

CodePen
HTML/CSS/JSをweb上で編集したりプレビューしたりできるやつ。記事に埋め込んだりシェアもできる。
とりあえず想定した動きをするか?などサッと確認したいときに使ったりします。

Emmet
突然Emmet?!ってなったらすみません。
アクションが素敵だと思います。コーディングが捗りますね。

Atom
長らくお付き合いしていたDwに別れを告げAtomへ移行。
個人的な感想ですがDwより好きです、好きだから使ってます。
Dwと違うのはパッケージを入れて自分好みにカスタマイズしていく感じですね。
最近はvimに興味ありありなのでMBPも来たことですしvimっていこうと思ってます。

色々ありますが全部書いてたらキリないのでこの辺にします。

5.これからについて

今後もwebの仕事はしていくと思うし、し続けたいと思ってます。
やってみたいこととしてはプログラミングがしたいですね、アプリ開発してみたいです。
VRとか人工知能にも興味ありありです。
やってみたいことがたくさんあるのでちょっと困ってますが、エンジニアとしてどんどん成長したいと思ってます。
webいいなって思うのは、インターネットを通じて気軽にいろんなサービスに触れられるところだと思っています。
誰かが作った何かで誰かが少しハッピーになったり、便利になったり。
しかも先ほど紹介したBoostnoteやAtomなど無料ですからね、当たり前のように使っていますがありがたいことだと思っています。
今後は、ユーザーに「このサービスがあってよかった」って思ってもらえるような仕事をするのが目標です。

あと、わたしは制作に携わってるみんなが好きです。(ちょっと言い方違うかも)
デザイナーもディレクターもプログラマーも。もちろんコーダーも。
これはきっと社内のみんなのことが好きだからなんでしょうね。
そこから始まって他の会社の方もそうだし、Twitterのフォロワーさんとかもそうです。
だからわたしは自分のできることでディレクター、デザイナー、プログラマー 、そしてユーザーに寄り添ってものづくりをしていきたいなって思ってます。

おわりに

はい、予想以上に長くなってしまいました。
これであなたもyuriマスターLevel5ですね!おめでとうございます!
この記事はスダ Advent Calendar 2016 - Adventar 3日目の記事です。
スダさんについて一切触れてなくてごめんなさい、実際のスダさんはTwitterのイメージよりも真面目で素敵な方です。

最後までお読みいただきありがとうございました。

PHPプログラミング入門講座を受けてきました

PHP 講座 勉強会

先日、PHPプログラミング入門講座を受けに行ってきました。
そのことについて、記憶のあるうちにメモしておきます。
(word campの次の記事書けてなくてごめんなさい土下座します)

講座を受けた経緯

・業務で使いたい
・ゆくゆくは自分でプログラムを書きたい(今はHTMLやCSSがメインです)
・とにかくプログラムの勉強がしたい

講座での習得目標

・お問い合わせフォームを作る(ざっくりすぎかな)
未入力やメールアドレスの不一致があった場合にはエラーを出し、最終的にはthanksページまで誘導する
・プログラミングは楽しいことだと知る

以下、講座で学習した内容です。

■忌まわしき(?)文字化け問題

そもそも文字コードとは
・一文字一文字ごとに割り振られた背番号みたいなやつ
文字コードの規格は複数存在する(Shift_JISとかUTF-8とか)

文字化けが起きる理由
文字コードが同じ機械同士であれば文字化けは起こらないが、文字コードが違うと割り振られた番号がずれて違う文字が表示されてしまう
※もっと論理的な説明は以下の記事などをご参考ください。
http://michisugara.jp/archives/2015/mozibake.html

今の標準の文字コードはなに
UTF-8が標準と考えていい

文字コード対策
・サーバー側と開発側の2か所にする必要がある

■サーバー側
.htaccessに文字化けしないようにいろいろかく

php_value output_buffering OFF
php_value default_charset UTF-8
php_value mbstring.detect_order SJIS,EUC-JP,JIS,UTF-8,ASCII
php_value mbstring.http_input pass
php_value mbstring.http_output pass
php_value mbstring.internal_encoding UTF-8
php_value mbstring.substitute_character none 
php_value mbstring.encoding_translation OFF

現在のレンタルサーバーなどはすでに対策がされてるものが多いので不要な場合もある

■開発者側
TeraPADを例にしますf:id:yurixxx8:20161030234604p:plain
以下の2つにチェックを入れる
□文字/改行コードを自動認識する
□再読み込みは現在の文字コードで行う
文字コード:UTF-8N(※UTF-8ではないので注意)
改行コード:LF
UTF-8にはBOMありのもの?もあるらしいが、プログラムが正しく動作しない場合があるためBOMは不要

もし名前が入力されていなかったら「入力されていません」の文言を表示する

<? php
$name = $_POST['name'];

//PHP文は最後に必ずセミコロン
if ($name == ''){
//nameが空だったら
    print 'お名前が入力されていません。';
}
else {
//そうでなければ(名前が入力されていたら)の時に実行させたいプログラムを書く
    print 'お名前:'.$name.'';
    //printのほかにechoもある
}
?>


ここまで書いて疲れてきました・・・。
あとはフラグ制御、XSSXSSの対策を学びました。

感想

自分が書いたプログラムが動くのは最高に楽しいです、気分がいい。
私はビビりのチキンなので、とりあえず書いてみようぜイエ!みたいにできなくて、地道に理屈から勉強するタイプですが、今回の講座でとりあえず書いてみるほうが何倍も吸収できるとな思いました。
で、実際にやって動かなかったりしたらなぜ動かないのか?を考えて調べればいいだけなんですね、簡単!(全世界のプログラマの皆様怒らないでください)
今回の講座で、やっぱり楽しいなーと思えたのでこれからどんどん学んでいこうと思います。
普段はすでに出来上がったものを修正したり、ベースをもとにして、という触れ方なので一から作るのは新鮮でよかったです。
またいろんな勉強会に行きたい!!!!!

WordCamp Tokyo 2016の感想 (1) -Webアクセシビリティのお話。

ウェブアクセシビリティ WordCamp

先日、東京で行われたWordCamp Tokyo 2016に参加してきました。
WordCampへの参加は初めてで、なおかつWordPressを触っていないという素人っぷり。
先に感想を言うと、普段WordPressを触っていなくても勉強になりました。
というか何からでも学ぶことってあると思うんですね、異業種からだって学ぶことはあります。
学ぼうという気持ちがあれば、必ず発見や気づきがあると思います。
話が脱線しましたね、すみません。

特に印象に残った2つのセッションのうちの1つについてお話しします。
(もう一つは近いうちに書きます)

WordPressでも意識したいアクセシビリティ ~「優しいウェブサイト」作りをはじめよう~」

このセッションのスピーカーは横田 東母子さんと森田 壮さんです。
スライドはこちら。

www.slideshare.net

私は「Webアクセシビリティ」というワードを聞いたことはあるし、
なんとなくこんな感じだよね?ってぼんやりと知っているつもりでいました。
Webアクセシビリティとは、一言で言うとこういう事のようです。

Webアクセシビリティとは、主に高齢者や障害者など身体に障害や不自由のあるWeb利用者に配慮したホームページなどのWebサービスを提供し、アクセスした誰もが容易に情報を共有できる状態にあることをいいます。
Webアクセシビリティとは - JAWAA

なんとなく理解できますよね、ああその通りだなと。
ですがこのセッションでは、「障害のある人のためだけに特別なことをするのがウェブアクセシビリティなのか?」という問題提起がされました。

続きを読む

背景画像を隙間なく表示させる方法 - background-sizeの使い方

CSS

実務でもよく使うのでメモです。
サムネイルつきリストなどを作る際に、画像サイズが決まったサイズであれば特に問題はないのですが
CMS化してクライアントが直接更新作業する場合などは、必ずしもすべての画像サイズが同じとは限りませんよね。
そんな時にサムネイルに対して画像がうまく収まらないとこんな感じになってしまいます。
f:id:yurixxx8:20160822221250p:plain
高さが揃ってなくてあまりキレイじゃないですね。

いろいろ迷った結果、サムネイル画像を背景で表示させた。

はい、いろいろ試してみました。
あまり面倒なことはしたくなくてスマートな方法を探した結果、背景画像で表示させる方法に落ち着きました。
(もっといい方法がありましたら是非お教えくださいませ。)
肝心の実装方法ですが、jQueryとかなにも必要ないです、CSSだけで大丈夫です。

background-size:cover;を使う。

background-sizeプロパティは、背景画像のサイズを指定する際に使用します。

background-size:cover;
・縦横比を保持
背景領域を完全に覆う最小サイズに背景画像を拡大縮小する
→画像がはみ出し、見えない部分も出てくるが隙間はできない

background-size:contain;
・縦横比を保持
背景領域に収まる最大サイズに背景画像を拡大縮小する
→画像の全体が見えるが隙間ができてしまう

分かりやすいように図にするとこんな感じです。
f:id:yurixxx8:20160822221254p:plain
背景領域に隙間を作らないためには、background-size:cover;を使うということになりますね。

書き方は以下の通りです。

<ul class="thumbnailList">
  <li class="thumbnail">サムネイル画像</li>
  <li class="thumbnail">サムネイル画像</li>
  <li class="thumbnail">サムネイル画像</li>
</ul>
.thumbnail {
    width: 160px;
    height: 150px;
    background-image: url(../img/sample.jpg);
    background-size: cover;
    background-position: center center;
}

※実際にCMS化する際は、書き方が少し変わりますが割愛させていただきます。

以上でした!
不明点、間違い等ありましたらコメントにてお知らせください。m(__)m