読み込み中 読み込み対象

読み込み中

Blogメニュー

独学WEBエンジニアのためのブログ

記事をカテゴリーで絞り込む

  1. 最初へ
  2. 1
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 9
  9. 最後へ

(総記事数:43件)

新着記事一覧

  • 雑記

    独学エンジニア成長目録14

    当記事はアドベントカレンダー連動記事です。

    独学HTMLコーダーがチーム開発案件に参画したら色々覚えた



    stylusに触れる

    先日の記事、CSSプリプロセッサって何?ではcssプリプロセッサの1つ
    sassについて触れました。
    本記事ではまた別のcssプリプロセッサ、stylusで具体的な使用方法に
    触れていきたいと思います。





    stylusについて

    stylusはnode製のcssプリプロセッサです。

    私も現在stylusを使用しています。
    stylusは他のcssプリプロセッサの長所がまとめられているようなイメージで
    とても使いやすいです。

    stylusでcssを書くには
    .styl
    というファイルを作成します。
    記述方法は
    {}
    :;
    を省略してインデントで構造を表現する方法と
    省略せずに生css(純粋なcss)に近い形で記述する方法があり、混在しても
    正常にコンパイルされます。

    出来ることは他のcssプリプロセッサと変わりません。





    ネスト

    ネストは言葉で説明するよりも見た方が早いと思いますので、早速コードを見てみます。


    stylus
    .list
    margin-bottom 10px
    > li
    float left
    margin-right 10px
    &:last-child
    margin-right 0

    コンパイル結果
    .list {
    margin-bottom: 10px;
    }
    .list > li {
    float: left;
    margin-right: 10px;
    }
    .list > li:last-child {
    margin-right: 0;
    }

    &
    は親と同じセレクタになります。
    主に擬似要素・擬似セレクタやマルチクラスで使います。





    変数

    JavaScriptで使う変数と同じです。
    変数に値を格納し、使い回すことができます。


    stylus
    $color = #333
    $error = #f00

    .content
    color $color
    line-height 1.4

    .error
    color $error
    font-weight bold

    コンパイル結果
    .content {
    color: #333;
    line-height: 1.4;
    }
    .error {
    color: #f00;
    font-weight: bold;
    }

    定義した変数は書き出されません。

    サイト内で使うカラーやフォントサイズ等を変数であらかじめ定義しておけば
    後から探す手間が省け、間違った値をつけてしまうこともありませんね。





    ミックスイン

    JavaScriptの関数のようなことができます。
    「ようなこと」と書いたように、そこまで難しい処理は書けません。


    stylus
    createCircle(diameter,color=#fff)
    width (diameter)px
    height (diameter)px
    border-radius 50%
    background color

    .circle
    createCircle(10)

    .circleRed
    createCircle(20,#f00)

    css
    .circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    }
    .circleRed {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f00;
    }

    変数同様に定義されたミックスインは書き出されません。

    よく書くまとまったスタイルをミックスインとして定義しておくと便利ですね。





    直前のスタイルの継承

    あまり取り上げられていませんが、個人的にものすごく使います。


    stylus
    .box
    width 100%
    height 50px
    line-height @height
    text-align center
    &:before
    content ""
    display inline-block
    width 30px
    height @height
    background url(...)

    コンパイル後
    .box {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    }
    .box:before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 50px;
    background: url(...);
    }






    stylusで特に私がよく使う機能を紹介させていただきました。
    stylusに入門した際には、こちらのサイトが参考になります。
    Stylus入門したときのまとめ


    今回コンパイル方法には触れませんでしたが、コンパイルには先日紹介した
    タスクランナーで行うのが非常に効率的です。
    タスクランナーに触れる

    モジュールはgulp-stylusを使います。
    gulp-stylus


    作業効率を求める段階になったら、積極的に導入したいですね!
  • 雑記

    独学エンジニア成長目録13

    当記事はアドベントカレンダー連動記事です。

    独学HTMLコーダーがチーム開発案件に参画したら色々覚えた



    CSSプリプロセッサって何?

    プリプロセッサ(preprocessor)とは、一般にある処理を行うソフトウェアに対して、データ入力やデータ整形などの準備的な処理を行うソフトウェアのことである。
    wikipediaより

    ということで、cssプリプロセッサは
    css(=ある処理を行うソフトウェア)の準備処理ということですね。
    はい。IT言語難しいです。



    sassという言葉を見たり聞いたりしたことがあるでしょうか?
    これがまさにcssプリプロセッサです。
    sassで書かれたファイルは後にcssへ変換(コンパイル)します。

    なぜ、一見手間なこんなことをするのでしょうか?
    それは、sassによってcssがより簡単に、便利に書けるからです。





    cssプリプロセッサの種類

    cssプリプロセッサはsass以外にもいくつか公開されています。
    私が触れたものをあげさせていただくと

    ・sass(scss)
    ・less
    ・stylus


    というものがあります。
    細かな記述方法が違うものの、出来ることはほとんど同じです。





    cssプリプロセッサで出来ること

    cssを書いていて起こる、こんなことが解決できます。

    ・あそこで使ってたカラーコードなんだっけ?どこだどこだ・・・
    ・あそこで使ってたボタンのスタイルを流用したいな。どこだどこだ・・・
    ・.listの中のこれと、これと、これと・・・


    それぞれ 変数ミックスインネスト で解決できます。
    実際の使い方については次の記事で紹介させていただきます。





    cssプリプロセッサの利用方法

    ここではsassを例に書かせていただきます。

    まず、利用したいcssプリプロセッサで使用される拡張子のファイルを作成します。

    style.sass

    このファイルにsass記法でcssを書いていきます。
    sass記法については入門記事がたくさん書かれていますので
    いろいろ探してみると良いでしょう。
    Sass(SCSS)入門



    記述したらコンパイルを行います。
    (以下に、まず難しくて少々手間なコンパイル方法を書きます)

    コンパイルにはまずrubyを使いますので、インストールします。
    rubyがインストールできたら、gemを使いsassをインストールします。

    gem install sass

    sassのインストールが完了したら、コンパイルしてみましょう。

    sass <ファイル名>.sass:<ファイル名>.css

    sassファイルと同じ場所にcssファイルが作成されています。



    いかかでしょうか。
    rubyやらgemやら、sass以外にも混乱する要素が出てきました。
    さらに、コンパイルするためにはコマンドを打たなければならず、変更の度に
    コマンドを打つのはかなりの手間です。

    ここで、以前のタスクランナーが活躍します。
    タスクランナーに触れる

    タスクランナーの環境が整っていれば、sassを導入するのは
    モジュールをインストールするだけです。
    コンパイルはタスクを組んでおけば全てのsassファイルを監視し、変更があった時点で
    自動でコンパイルしてくれます。
    そしてそれをブラウザに即反映させることも可能です。

    gulp-sass





    次の記事ではcssプリプロセッサのファイルの便利な書き方について
    書かせていただきます。
  • 雑記

    独学エンジニア成長目録12

    当記事はアドベントカレンダー連動記事です。

    独学HTMLコーダーがチーム開発案件に参画したら色々覚えた



    タスクランナーに触れる



    タスクランナーは、フロントエンドの開発を楽にしてくれるツールです。

    ローカルでサイト制作をしている時、確認作業はどうしていますか?
    ファイルを保存して、ブラウザに切り替えて、リロードして、確認したら
    またテキストエディタに戻る。というのが普通だと思います。

    さらにスマートフォンで確認したいと思ったら、保存したファイルを保存して、
    サーバーに上げ、スマートフォンでサイトを開き(または更新し)、確認したら
    またテキストエディタに戻る。と、かなり手間な作業となります。

    もちろん私もこれをやっていました。(およそ2年の間)
    しかし、タスクランナーがあればこの手間を省くことができます。

    タスクランナーは、何度も行う面倒な作業を自動化してくれます。





    タスクランナーの選択

    2015年12月現在で、タスクランナーの選択は grunt か gulp になると思います。
    どちらもnode.jsで動き、npmでインストールできます。

    ・・・はい。私もよく分かっていません。

    今出てきた用語に軽く触れておくと
    node.js はサーバーサイドで動くJavaScriptです。
    npm はnode.jsのパッケージ管理ツールです。

    話を戻し、現在主流の2つのタスクランナーで、私が使っているのは gulp です。
    gulpはgruntの約2年後に登場し、実行速度やタスクの書きやすさの面で評価されています。





    gulpの導入方法

    gulpを導入するにはまず、上で登場したNode.jsをインストールします。
    公式サイトからインストーラーをダウンロードすることができます。
    Node.js公式サイト

    インストールが完了したら、コンソールを開き以下のコマンドを打ってみます。

    node -v

    npm -v

    それぞれバージョンを表す文字列が表示されれば正常にインストールされています。
    エラーメッセージが表示される場合、インストールされたフォルダにパスが通っているか
    確認してみてください。



    gulpのインストールは以下のコマンドで実行します。

    npm install -g gulp

    -g
    はグローバルにインストールしてくださいという命令です。
    グローバルにインストールされると、どこにいてもコマンドを実行することができます。
    ローカルにインストールすると、そのフォルダに移動しない限りコマンドは実行できません。





    モジュールの紹介

    冒頭で問題として上げたサイト確認は、 browsersync というモジュールで解決できます。

    browsersync は、ローカルサーバーを立ち上げ、ライブリロード(ファイル保存時に
    自動的にブラウザに反映)ができ、ipアドレスによるサイトの閲覧が簡単にできます。
    同じネットワークに繋がっているスマートフォンであれば、そのipアドレスに
    アクセスするだけでローカルのサイトを確認することができます。
    さらに、ファイルを編集し保存すると、スマートフォン側でも自動反映されます。

    browsersyncをはじめとするモジュールは以下の形でインストールできます。

    npm install <モジュール名>

    グローバルにしたい場合は、gulpインストール時と同様に
    -g
    を付けます。

    モジュールはbrowsersyncだけでなく、様々な「手間」を省くためのものが用意されています。





    タスクの構築と実行

    モジュールがインストールできたら、タスクを組みます。
    そろそろ頭がフル稼働してボーっとしてきましたね。
    ざっくりと説明させていただきます。

    例として、デスクトップにsiteというフォルダがあり、ここにindex.htmlを含む
    開発ファイルが置かれているとします。

    //構成
    Desktop/site/index.html

    siteフォルダの下にgulpfile.jsというファイルを作ります。

    //gulpfile.jsの位置
    Desktop/site/gulpfile.js

    このファイル内にタスクを書き、同フォルダに移動後、定義したタスクを実行します。

    //フォルダ移動
    cd Desktop/site/

    //タスク実行
    gulp <タスク名>


    タスクの書き方については、各モジュールについて解説されているサイトを
    参考にしてみてください。
    Browsersync + Gulp.jsの場合





    かなりざっくりとタスクランナーについて説明させていただきました。

    初めての場合、導入のハードルはなかなか高いですが、使えると本当に便利です。
    本記事で紹介したブラウザ周りの自動化や、プレフィックスの自動付与、各ファイルの
    構文チェックの自動化なんかも出来たりします。

    技術の発達が凄まじいですね。
  • 雑記

    独学エンジニア成長目録11

    当記事はアドベントカレンダー連動記事です。

    独学HTMLコーダーがチーム開発案件に参画したら色々覚えた



    ここが強いぞmac

    エンジニア視点でmacの強みをいくつか挙げてみたいと思います。





    初期装備

    macには、エンジニアとして必要なツールが初期装備としていくつか入っています。
    今年4月に購入したOS X Yosemiteで、把握している範囲では

    ・Apache
    ・PHP
    ・ruby
    ・git
    ・svn

    が入っています。

    購入時にこれらが揃っているのは嬉しいです。
    (今年初めに参画したプロジェクトでは、windowsPCにこれらのツールを
     入れましたが、訳がわからず苦戦した背景があります。)





    開発環境

    Web制作においては、IEを除いた全ての開発環境が揃っています。
    IEでチェックを行いたい際にも、仮想マシンを立ち上げれば可能です。
    (これについては逆も然りですが)

    iphoneのデバッグはPCとiphoneを繋ぎ、safariの開発者ツールで
    デバッグすることができます。

    androidのデバッグも同様、PCとandroidを繋ぎ、chromeの開発者ツールで
    デバッグをすることができます。
    ※androidでデバッグするには、端末側でUSBデバッグを有効にする必要があります。





    ターミナル

    windowsで言うところのコマンドプロンプトですが、コマンドプロンプトは
    使いにくいという意見が多いです。
    私も実際、「これはどうするんだろう?」と思い、調べてわかったコマンドが
    コマンドプロンプトでは使えなかった、という経験が多いです。

    macのターミナルでは、基本的な部分はlinuxと同様に使えます。





    macはエンジニアのことも考慮して作られている印象です。
    普通にパソコンを使っていれば、本記事で取り上げた部分は全く気にならない部分です。

    ただ、私がmacを使う理由の1つには「macを使っている」という気持ちの部分が
    結構な割合を占めます。

    パソコン、スマートフォン、ブラウザ、エディタ・・・
    どれも使いたいものを使うのがベストですね。
  • 雑記

    独学エンジニア成長目録10

    当記事はアドベントカレンダー連動記事です。

    独学HTMLコーダーがチーム開発案件に参画したら色々覚えた



    windowsユーザーからmacユーザーへ

    今年の4月まで、macには触れてこなかった私です。

    学生の頃に少しだけ触れ、マウスが妙だったり、ショートカットのマークが謎だったりして
    「なんだこの使いにくさは〜!」となり、良くないイメージを持っていました。

    しかし、現場のエンジニアは全員macを使用しています。
    現場ではwindowsとmacを選ぶことが出来ましたが、流れ流され
    macを選択しました。

    その週末、mac買いました。(店頭に走り即買いしました)

    たった数日で何に惹かれたのか、本記事で書いてみたいと思います。



    はじめに
    windows、mac、いずれも得意不得意があると思っています。
    パソコンはmacで決まり!という記事ではありません。
    また、本記事は私個人の意見となります。

    本記事ではmacそのもの?に感じた魅力を書いていきます。
    エンジニア視点でのmacの魅力については次の記事に記載します。





    フォントの美しさ

    はじめに感動したのがフォントの美しさです。
    とにかく綺麗で、検索結果一覧をしばらく見つめていた記憶があります。



    適度な太さで、ギザギザ感のない滑らかな曲線が理由でしょうか。





    内蔵辞書

    私はhtmlコーディングでクラス名を決めるとき、この単語は英語で
    なんて言うんだろう?というのが本当に良くあります。
    今まではweb翻訳を常時開いておき、知りたい単語が出来てたら都度
    コピー&ペーストをしていました。

    これがmacだと、知りたい単語の上でトラックパッド(タッチパッド)に
    3本指でタッチするだけで辞書表示が出来てしまいます。



    また、単語や文章を選択後、右クリックしてスピーチを押すと
    読み上げてくれる機能もあります。





    マウスがいらない

    トラックパッドがとにかく優秀です。
    1本指で行うマウスカーソル移動、2本指で行うスクロール、3本指で行う画面移動など
    出来ることがとても多くあり、マウス以上の使いやすさを感じています。

    トラックパッドの操作をよくまとめられている記事がありましたので
    紹介させていただきます。

    Macのトラックパッドの操作性のすごさを知らない人に伝える記事





    画面拡張



    上画像では、デスクトップを3枚に拡張しています。

    上部にデスクトップ1〜3までがあり、クリックすると各デスクトップに移動します。
    中央にはそのデスクトップ内で開いているアプリケーションが表示されており
    クリックすることでそのアプリケーションをアクティブにします。
    Ctrl + Tabで同じような操作を行うことが出来ますが、より直感的な操作が可能です。

    この画面は、トラックパッドで指3本を上に移動すると開きます。
    また、指3本を左右に移動するとデスクトップ間を移動できます。





    私がmacに惹かれた機能について書かせていただきました。
    この他にも、触れれば触れるほど惹かれる機能があります。

    次の記事ではエンジニア視点で、macの強みを書かせていただきます。

WEB講座

講座一覧

HTML講座
CSS講座
JavaScript講座
  • 基礎編
  • 中級編
  • 上級編
  • 特別編

新着記事

記事検索

検索範囲

検索結果

  • ここに検索結果が表示されます。

閉じる

パソ子