Sublime Text日本語化とWeb開発が捗るプラグインの入れ方+α

qiita.com

Rubyのフレームワーク「Ruby on Rails」でWebアプリを作る1

新シリーズです。
今の職場で、今の仕事を始めて1年と少し経ちました。
僕のメインの仕事は「社内データベース(DB)の自社運用化」です。

今まで外注していた社内DBを社内で制作し、更にクラウド化することで、全国の顧客データを集計し、業務の効率化を図る、という目的です。
しかしそのプロジェクトの一端を担う僕がプログラミング初心者だったために、僕の上司が初心者でもとっつきやすいRuby on Railsを使って制作することを決めました。

とにかく、RailsでWebアプリを作る際のTipsを記録に残していきたいと思い、このシリーズをスタートします。
これも備忘録なので、後々の自分のために。

基本的にRails開発の環境はできている前提にします。
詳しくはQiitaの私の記事を見てください。

qiita.com

qiita.com

アプリを作る

まず、Railsにアプリを作ります。
フレームワークなので、アプリを作るだけで様々なファイルが自動生成されます。

$ mkdir test
$ cd ./test
$ rails new test_app

後にgitと呼ばれるバージョン管理が容易に出来るツールを使って管理するので、◯◯_appというアプリの名前にする時は、◯◯という名前のディレクトリを作ってからその中でrails newするといいでしょう。

基本構成

test_appのディレクトリの中には様々なディレクトリとファイルが追加されています。
主に編集するものを紹介します。

  • .git
    git管理に必要。後述。

  • app
    アプリ本体と思ってもいい。
    基本的にはこの中のファイルを編集していく。

  • config
    アプリ全体の設定や、アプリ内のプラグインの設定を書いたファイルを入れておく。

  • db
    データベース関係の設定を書いたファイルが入る。

  • log
    サーバのログファイルが入る。

  • public
    公開ディレクトリ。
    公開したい画像や静的ページなどをココに入れておくこともある。

  • test
    アプリが想定通りの動きをするかテストする場合のツール関係の設定ファイルが入る。

  • Gemfile
    gemと呼ばれるプラグインを管理する。

サーバ起動

実はもうサーバを起動することが出来る。

$ rails s

サーバ起動後に、ブラウザで「http://localhost:3000」にアクセスする。

f:id:ShoutaWATANABE:20171012222914p:plain

上のような画面が表示されていればOK これで開発の準備は完了。

次回はDB(MySQL)との接続から。

1から書くHTML(外部ファイル編)

第二回、ありました。
今回は、外部ファイルの使い方についてです。
HTMLファイルは、実はそのファイル1つで見た目も動きも決められます。
ですが、それではメンテナンス時に苦労をするのはあなたです。
一つのファイルの中に様々なシンタックスの言語が混ざるのは、個人的に好きではないので、ファイルは切り分けましょう。
f:id:ShoutaWATANABE:20171011172606j:plain

CSS

カスケーディング・スタイルシート(Cascading Style Sheet)とは、Cascading=滝のように連鎖的に、スタイルが適応されていくためにこのような名前がつけられています。
親要素のスタイルが子要素にも適応される、という意味で、具体的には、

<body>
    <div>
        最終的に<span>表示される</span>ページ
    </div>
</body>
html {
    color: #F00;
}
div {
    font-size: 200%;
}
span {
    text-decoration: underline;
}

このようなHTMLファイルとCSSがあるとするならば、

  • htmlタグのスタイル

    最終的に表示されるページ

  • divタグのスタイル

    最終的に表示されるページ

  • spanタグのスタイル

    最終的に表示されるページ

が、連鎖的に適応されるので、
最終的に表示されるページ
となります。

javascript

今日のwebページは単にコンテンツを表示させておくだけでなく、様々な動きを見せます。
例えば、クリックするだけでページ内をスクロールする、という動きはjavascriptを使っています。
javascriptにはフレームワークと呼ばれる追加機能が数多くあり、中でもjQueryというフレームワークは、動的にページ内の要素を変えるためによく使われます。
今回は一番カンタンで、デバック等でもよく使うconsoleメソッドをご紹介します。

console.log("hoge")

これは、ブラウザのコンソールに文字や計算結果を表示するメソッドです。
使用しているブラウザがgooglechromeであれば、windowsならF12、macであればcommand + alt(option) + iでdeveloper toolが開くので、そのなかからconsoleを開いて確認します。
javascriptのエラーはこのコンソールに表示されるので、スクリプトが上手く動いているかどうかはここを確認するようにしましょう。

外部ファイルの指定

では、上記で紹介した2つの種類の外部ファイルを実際にHTMLファイルの中で指定してみましょう。 まずは、2つのファイルを名前をつけて保存します。
保存する場所は、HTMLファイルと同じフォルダにstyleフォルダとscriptフォルダを作って、その中に保存しましょう。

index.html
style
  |
  --style.css
script
  |
  --script.js

その場合は下記のように指定します。

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style/style.css">
    </head>
    <body>
        <div>
            最終的に<span>表示される</span>ページ
            <script type="text/javascript" src="script/script.js"></script>
        </div>
    </body>
</html>

このような構成にすることによって、このHTMLファイルにcssファイルとjavascriptファイルを指定することができます。
文献によってはscriptタグをheadタグの中に書いているものもあるかと思いますが、ファイル読み込み順序が関係して、ページの表示が遅くなってしまうので、最近はbodyタグの中の一番下で読み込むのがbetterとされています。
また、href属性とsrc属性はどちらもファイルの場所を指定しているのですが、今回は相対的(index.htmlを規準にしたファイルの場所)で記述しています。
http://〜〜といったURLを完全に記述しても指定できることを覚えておいてください。
これによってサーバ内に保存してあるファイル以外を指定することもあります。

まとめ

今回は外部ファイルの指定の仕方についてまとめました。 これでhtml・cssjavascriptを書くための準備が整いました。 いよいよ内容を書いていくわけですが、それは次回のお楽しみです。 次回も書きたいですね笑

  • cssはページの見た目を決める
  • javascriptを用いるとページを動的に変化させることが出来る
  • cssはhead、javascriptはbodyタグ内に指定する。

1から書くHTML(構成編)

今回はwebページ作成(ハイパーテキスト=テキスト同士が結びついて従来のテキストを超えた(hyper)テキスト(text)なんて言い方もする)のマークアップ言語であるHTML(HyperTextMarkupLanguage)を1から書く方法についてです。

僕もよく書きますが、結局何が必要なのか忘れてしまうので、備忘録も兼ねて。

構成編以降は考えてないですが、続けばいいなぁとは思ってますよ笑

f:id:ShoutaWATANABE:20171010142613j:plain

原則

HTMLはタグと呼ばれるパーツで構成されています。

一つ一つのタグに意味があり、用途があります。

また、HTMLのルールを簡単に説明すると、

  • 単体で使用できるものと、閉じタグとセットでなければいけないものがある

    例)

<p> <!-- 段落を作るタグ -->
    これは閉じタグが必要
    <br><!-- 改行するタグ これは単体 -->
</p>
  • タグと閉じタグの中に、別のタグを入れ子構造にすることが出来る

    例)

<div> <!-- ブロックレベル要素の範囲を指定するタグ -->
    <h1>
        これは大見出しのタグ
    </h1>

    <h2>
        これは中見出しのタグ
    </h2>
</div>
  • タグには様々な属性があり、複合的に使用できる属性もある

    例)

<div class="wrapper">
    <h1 id="title">一番良く使う属性</h1>
    <p class="contents">
        id属性、class属性は一番良く使う属性です。
    </p>
</div>

こんな感じです。 厳密には認識が違うものもあるかもしれませんが、初心者の僕はこういうものだと思って使っています。

要素

html

これがないと始まらないって感じですね。 一番最初と最後に書きます。 ページで日本語を使う時はlang属性を指定する必要があります。

<html lang=ja>

</html>

head

この部分にはページの追加要素になる内容を書きます。 ページのタイトル、見た目を決めるスタイルシートの指定などは全てここに書きます。

<html lang=ja>
    <head>
        <title>ページタイトル</title>
        <link rel="stylesheet" type="text/css" href="xxx.css"><!-- スタイルシートの指定部分 -->
    </head>
</html>

body

ここが表示されるページの内容を書く部分です。 先述したclass属性やid属性などを用いたdivタグなどもこのbodyに書きます。

<html lang=ja>
    <head>
        <title>ページタイトル</title>
        <link rel="stylesheet" type="text/css" href="xxx.css"><!-- スタイルシートの指定部分 -->
    </head>
    <body>
        ここに表示される内容が入ります。
    </body>
</html>

まとめ

今回はHTMLファイルの構成についてまとめました。 タグは慣れてくると簡単に書けるようになると思います。 ただ、次のステップの、スタイルシートの設定の際につまづく場合が多い(というか僕がつまづいた)ので、始めは自分にルールを決めてから書くといいと思います。 最後までお読み頂きありがとうございます。

  • HTMLではタグを使う
  • タグは属性を決めたり、入れ子にして使ったり出来る。
  • 基本的にはhtmlタグに囲まれたhead部分とbody部分で構成されている

※写真引用: 写真素材なら「写真AC」無料(フリー)ダウンロードOK

このブログについて

ブログタイトルについて

この「モラトリアム」という言葉、僕が中1のときに出会った言葉です。

学生など社会に出て一人前の人間となる事を猶予されている状態を指す。心理学者エリク・H・エリクソンによって心理学に導入された概念で、本来は、大人になるために必要で、社会的にも認められた猶予期間を指す。日本では、小此木啓吾の『モラトリアム人間の時代』(1978年(昭和53年))等の影響で、社会的に認められた期間を徒過したにもかかわらず猶予を求める状態を指して否定的意味で用いられることが多い(草食系も参照)。(ウィキペディア)

中学・高校・大学と好きなことをやってきた僕が、社会人になった後もゆるゆると自分の好きなことをやりたいなと思って、このタイトルにしました。 ただ、サブタイトルにもあるように、慎重かつ大胆にってのが大事なんです。 僕はとても楽観的で、注意散漫なので、何も考えずに思ったことを口に出してしまったり、空気を読まずに自分勝手に行動してしまったりするところがあります。 そのくせ、いざという時にはビビって一歩引いてしまったりするところもあります。 出るとこ出て、引くとこ引いてが出来るようになりたいという思いが、あのサブタイトルです。

メイン画像について

f:id:ShoutaWATANABE:20171009145117p:plain
メイン画像

stores.jp

こちらのロゴメーカーで作りました。 やろうと思えば全く同じものも作れると思うんですけど、やめてください笑 シンプルに、でも差し色だけは入れたかったので、大満足の出来です。 電球をチョイスした理由は、今後仕事を進めていくにあたって、ひらめき力が大事になると思ったから。 意識してひらめいていきたいっすね。

きちんとブログを書く

目的

中学時代に携帯電話が流行り始めて以降、高校、大学と幾度となくブログを書こうと思っては挫折。

社会人になって3年目、やっと自分の生活が落ち着いてきたところで、また懲りずにブログを書いてみようって思った。

仕事柄、文章を書くことが少なくなってるので、あまり良くないなって思ったこともある。

でも以前と違うのは、ネタがあること。

仕事でやってること、思ったことを記録しておこうと思ったのもきっかけの一つ。

まぁ、長く続けばいいなぁって思ってます。

こんな内容

 今日はこんな感じだけど、今後は仕事の内容8割、日常的なこと2割くらいでつらつら書いていく予定です。 

f:id:ShoutaWATANABE:20171009190539j:plain

 文末とか言葉のチョイスもあんまりこだわらないで書こうかな。

毎回形にこだわろうとして続かなかったし。

でも何かしらの画像は毎回残そうと思う。

今回は何年か前に何故か感動した空。