すなぶろぐ

タグ: プログラミング

  • CRUDとは

    CRUDとは

    よく聞くCRUDとは何か、整理できてなかったからまとめてみた。

    システムの最低要件

    システムを作るとき、めっちゃ簡単に言うとWebサイトを作るときに最低限必要と言われている要件のこと。

    Create

    CreateのC、「作成」とか「登録」とか表現する。

    Twitterだとツイート機能、ブログだと投稿機能。

    これらがCreateにあたる。

    Read

    ReadのR、「参照」とか「閲覧」のこと。

    サイトを見る(=閲覧)のに必要な機能。

    これがないと何も始まらない感じはある(=なくても良い珍しいシステムもあるかもだけど)。

    Update

    UpdateのU、「更新」のこと。

    一度作ったブログ記事を更新したりできる。

    珍しく(?)TwitterにこのUpdate機能はない。一度投稿したら、そのツイートを描き直すことはできない。

    Delete

    DeleteのD、「削除」のこと。

    間違えて投稿したツイートを削除したり、誤った情報を載せたブログ記事を削除したりするやつ。

    まとめ

    システムに必要な機能の頭文字を取っている。

    機能を指してるだけで、HTTPメソッドとは似ているが全く別物。

    CRUDの中にHTTPメソッドが含まれているイメージ。

  • 【Web用語】僕がエンジニアを始めた時に知りたかった用語8選

    【Web用語】僕がエンジニアを始めた時に知りたかった用語8選

    皆さん、こんにちは。

    すなです。

    今回は僕がWebエンジニアとして働き始めた頃に知らなくて困った技術用語8選をご紹介したいと思います。

    どの用語も基本レベルなので、駆け出しエンジニアの読者が少しでも早く現場に馴染める様にと思って書きました。

    これらの用語を知らず上司に呆れられない様に、皆さんも一緒に勉強していきましょう。

    ブラウザ

    ブラウザはWebサイトを閲覧するためにソフトウェアになります。

    いくつか有名なものを筆頭に、以下の様なブラウザが存在します。

    • Google Chrome
    • Microsoft Edge(旧 Internet Explorer)
    • Safari
    • Firefox

    ブラウザはそれぞれ挙動に差異があるため、僕のインターン先では社員が新しく作ったデザインがブラウザごとに違わないかをインターン生が確認するという作業がありました。

    サーバー

    Webサイト制作において「サーバー」といえば、一般に「Webサーバー」のことを指します。

    サーバー(=server)の語源のserveは「提供する」のような意味があります。

    ウォーターサーバー的なノリです。

    サーバー上には様々なファイルが保管されており、ブラウザと通信してファイルを提供します。

    一般に制作したWebサイトを公開するときは、それをサーバーにアップロードしなければなりません。

    リクエストメソッド

    普段の生活では聞き馴染みのないワードかも知れません。

    しかしWeb開発では頻出の概念です。

    Web開発で「リクエストメソッド」と言うときは、一般に「HTTPリクエストメソッド」のことを指します。

    ブラウザは一般にHTTPというルールに従ってサーバーに命令・通信するのですが、そのときに命令の種類がリクエストメソッドになります。

    リクエストメソッドは特に頻出な以下の4つを筆頭に、全部で10種類存在します。

    • GET(= 取得)
    • POST(= 送信)
    • PUT(= 更新)
    • DELETE(= 削除)

    日常でインターネットを使うときはほぼGETとPOSTしか使わない印象です。

    ターミナル

    これはソフトウェアエンジニア上級者になると頻繁に使うソフトウェアになります。

    映画やアニメで見かける、エンジニアが操作している真っ黒な画面のやつです。

    上のいらすとやの画像のまさにそれです。

    「ターミナル」はMacでの名称で、Windowsでは同様のソフトウェアを「コマンドプロンプト」と呼びます。

    どちらもデフォルトでインストールされているソフトウェアなので、パソコンの検索で「ターミナル（Windowsの場合はコマンドプロンプト）」と入力すると使えるはずです。

    パソコンを操作するとき（＝指示をするとき）、普段はマウスを動かしてボタンをクリックするなどしますが、ターミナルを用いるとコマンドを入力するだけで同様の操作をすることができます。

    僕はファイルを書くときはVSCodeというエディタを使うのですが、インターン先の先輩はターミナルで操作していました。

    先輩曰くそっちの方が使いやすくなる時が来るそうです、、、（汗）。

    FTP

    File Transfer Protocolの略で、「ファイル(=file)を転送する(=transfer)ときの決まり事(=protocol)」という意味があります。

    サーバーにファイルを転送するとき、みんなが思い思いの方法通信するとめちゃくちゃになってしまうので、このルールに従って通信しましょう、的なのがFTPです。

    現場でも頻繁に使用されているFTPのフリーソフトは以下のようなものがあります。

    • FileZilla
    • FFFTP
    • WinSCP

    ちなみに僕は1番目のFileZillaを長く愛用しています。

    フロントエンド&バックエンド

    Webサイトを開発するときに、その見た目部分と機能部分で分ける考え方です。

    使い方として、HTML&CSSやJavaScriptを扱うエンジニアを「フロントエンドエンジニア」と言います。

    逆にPHPやRuby、Pyhtonなどを用いてサーバー周りの開発を行うエンジニアのことを「バックエンドエンジニア」と言います。

    僕がインターン生のときは、サービスの新しい機能を開発していたのでバックエンドエンジニアでした。

    ローカル環境&本番環境

    こちらWebサイトやWebアプリを開発する場所についての用語になります。

    一般に「ローカル環境」と言うと、自分のパソコン内のことを指します。

    逆に「本番環境」と言うと、実際にリリースしている本番のWebサイトのことを指します。

    新しい機能やサイトを開発するときはいきなり本番環境で開発するのではなく、DockerやVirtualBoxなどを使って自分のパソコンに本番環境に似た環境を用意します。

    そのローカル環境でまずは開発をして、新しいサイトや機能が完成したらそれを本番環境にアップロードします。

    API

    「Application Programming Interface」の略です。

    ソフトウェアの一部を公開して、他からもそのサービスを使える様にしたものを指します。

    指定のフォーマットに従えば、そのソフトウェアの一部を使うことができます。

    例えばzipcloudという郵便番号データ配信サービスの郵便番号検索APIをプログラムに組んでおけば、わざわざzipcloudで郵便番号を検索しなくても同様の機能が外部からでも使用できる様になります。

    僕もインターン生のとき、バックエンド開発で他社のAPIにたくさんお世話になりました。

    まとめ

    いかがだったでしょうか。

    以上が「僕がエンジニアを始めた時に知りたかった用語8選」になります。

    全て知ってるよ！と言う方もいれば、全然知らない、、、という方も居るかも知れません。

    エンジニアの世界には僕もまだ知らない単語が山ほどあります。

    そんな知らない単語にぶち当たったときは、そのとき勉強してしっかりキャッチアップしましょう。

    ではまた別の記事で会いましょう。

  • 4つ目の模写サイトが完成しましたっ！

    4つ目の模写サイトが完成しましたっ！

    皆さん、こんにちは。

    すなです。

    今回はシリーズ「大学卒業までに20万/月を稼ぐ人の話」の第四弾になります。

    今回もサイトを模写するにあたって、ポイントや技術的なお話をできたらなと思います。

    前回に記事をまだ見てない方は、こちらをご覧ください。

    https://sunablog.tokyo/2021/02/27/post-706/

    世界一周団体「TABIPPO」のモノづくりブランド

    今回、模写させていただいたWebサイトは、世界一周団体TABIPPOのモノづくりブランド、PAS-POLのサイトになります。

    PAS-SOLさんのWebサイトは旅の魅力を伝えつつ、モノづくりブランドとして自社で開発している商品の宣伝や、PAS-POLの企画を案内するニュースのページなどがあります。

    Webサイトは非常に綺麗で、デザインはまとまっていて、かなり見やすいのではないかなと思います。

    完成した模写サイト

    今回、模写した僕のサイトはこちらになります。

    元サイトを完全には模写していなくて、

    • トップページ
    • NEWSページ

    のみ模写しました。

    下層ページは似た様なレイアウトの横回しなので、スタミナを付けたいときは有効かもですが、ページの構成を勉強したい人にとっては多少時間の無駄かなと思いました。

    作業量が多かった

    今回のサイト模写で用いたスキルなどについて解説したいと思います。

    HTML&CSSとJavaScript

    今回のサイトで扱ったスキルは以下になります。

    • たくさんのHTML
    • たくさんのCSS
    • 少しのJavaScript(= jQuery)

    今回のサイトが今までのサイトと1番違う点は、1ページあたりのテキスト量がとても多いことです。

    過去のサイトはそこまでHTMLの量が多くなかったのですが、今回はかなり作り込まれたサイトだったのでまずそもそもの量が多かったです。

    レスポンシブ対応

    それに加えて、レスポンシブでレイアウトではなくデザイン自体が若干変わるので、それに対応するのが少し大変でした。

    画面幅が900px以下に時はheaderのメニューがアコーディオンメニューになるので、メニューを2回作る様な作業をしました。

    また下部に外部リンクも画面幅に応じて要素数が変わるので、これも対応するのが少し大変でした。

    レスポンシブ系で毎回重宝しているのは、やはり「display: flex;」ですね。

    こいつはかなり優秀です。

    数年前のBootstrapと同じ様な雰囲気を感じますが、最近はdisplay: flex;の様が覇権を握っている様な気がします。

    同じ内容が実装できれば中身はどちらでもいいと思いますが、もしまだ使ったことな人いたら是非display: flex;も使ってみてください。

    またheader付近にスライドがありますが、これはjQueryは使っておらずcssのみで実装しています。

    複数の画像を用意して、それらにtransition: all 1s ease-in-out;を適用しています。

    詳細を知りたい方は僕が参考にしたサイトを貼っておくので、そちらを参照ください。

    作業時間は50時間

    今回も体感なのですが、この模写サイトを制作するのに50時間くらいかかったかなと思います。

    ニュースの記事部分を全て一旦書き起こしているため、同じ作業が重複しているのも時間がかかった原因かと思います。

    時間の80%はWebサイト自体を制作するのに費やしました。

    残りの20%はそれをWordPress化するのに使いました。

    WordPressめっちゃ便利です

    今までずっと食わず嫌いして避けていたのですが、ちゃんと取り組んだらこんなに使いやすいのかとびっくりしています。

    これは余談なのですが、過去に俺のことをなんとなく嫌っていた人がいたのですが、ちゃんと僕と絡む様になったら今では大親友になったみたいな話が昔ありました。

    その時と似た感覚を覚えました（なんの話？）。

    WordPressはWeb制作をする上では避けては通れない道です。

    Web制作をする際にRuby on RailsやLaravelなどのフレームワークを勉強してちゃんとプログラミングを学習される方は、なんとなく「WordPressって逃げじゃん？」みたいな思い込みでWordPressを避けることがあると思います（僕はそうでした汗）。

    しかしCMS(= Content Management System)なだけあって、使いこなせる様になるとWP側で記事やレイアウトの管理(= Management)をしれくれるので、圧倒的に楽だと思いました。

    要は一度HTML&CSSなどのレイアウト、デザインを決めてしまえば、全ての投稿に同様のデザインが適用されるので、かなり便利です。

    10-15万円で受注できればおけ

    Webサイト制作会社の相場はもっと高いですが、個人でやっているのと、まだ駆け出しなので10-15万くらいで受注できれば全然アリなのではないかなと思っています。

    今回の模写では2ページ分しか模写していないので、実際はもう少し金額を上乗せできる様な気もします。

    先にも書きましたが、最近はWordPressの扱い方が少しずつ分かってきてプログラミングが楽しいと感じれらる様になりました。

    苦痛なく、しかもお金も頂戴できるのならば、これほど幸せなことはありません。

    ありがたいことに学生の長期休暇は勉強にうってつけなので、まだまだ吸収したいと思います！

  • 3つ目の模写サイトができました！

    3つ目の模写サイトができました！

    どうも、すなです。

    前回に引き続き、また新しい模写のポートフォリオができました。

    今回も制作するに当たってのポイントを話したいと思います。

    架空の病院のサイト

    今回もシリーズ「大学卒業までに20万/月を稼ぐ人の話」になります。

    まだ見ていない方は、前回の記事はこちらになります。

    https://sunablog.tokyo/2021/02/23/post-670/

    完成した模写サイト

    3つ目に制作した模写サイトは架空の町の医院のサイトになります。

    早速ですが、完成品がこちらになります。

    はにわまんさんの元サイト

    今回、僕ははにわまんさんのこちらのサンプルサイトを参考にしました。

    技術的にはそこまで高くない

    今回の模写で用いたスキルや詰まったポイントなどを話したいと思います。

    HTML&CSSのみ

    3回目の模写で使ったスキルは以下になります。

    • HTML
    • CSS

    これだけでした。

    JavaScriptやPHPなどの動作確認をしなくてよいので、元のサイトをひたすらに書き書きする作業がメインでした。

    全ページは5枚

    ページ数は5枚と今回は多めになりました。

    ページ間の構造は以下になります。

    • トップ
      • 病院の紹介
      • 施術の案内
      • スタッフの紹介
      • アクセス

    作業時間は12時間

    今回は枚数自体が多かったので、単純計算その枚数分作業時間が増えてしまいました。

    しかし作業自体はあまり難航することなく、今回はスラスラと書くことができました。

    昔の感覚がだいぶ戻ってきています。

    作業量を減らすためにした工夫

    今回は5枚分ページを書いたのですが、真っ当に全部書いているともっと時間がかかると思ったので、今回は書くのに少し工夫をしました。

    サイトを見ていただいた方は分かると思うのですが、5枚それぞれのページでは共通している箇所(ヘッダーやフッター、メニューなど)があります。

    それを今回は逆手(?)に取り、1箇所で作って他の箇所にも転用することで時間と作業量を削減しました。

    cssファイルを2つ読み込む

    基本的に1つのHTMLファイルに対しては1つのcssファイルを読み込むのが普通なのですが、今回は

    • 共通用のcssファイル
    • 個別用のcssファイル

    を用意して、先に「共通用のcssファイル」を読み込んで、後から「個別用のcssファイル」を読み込むことにしました。

    今回のサイト模写ではこれが特に有効で、共通用cssファイルを用意したことで個別用ファイルの分量をかなり少なくできました。

    レスポンシブにも対応

    今回も同様に、全てのページでレスポンシブ対応をさせました。

    Font Awesomeとパンくずリスト

    今回のサイトでは今までで目立って扱ってこなかったこれら2つの要素を扱いました。

    模写についての記事なので、触りだけ紹介します。

    Font Awesome

    Font AwesomeはWebでできる、大量のアイコンを扱っているサイトです。

    文字や記号などのアイコンはもちろん、ツイッターやフェイスブックなどのロゴも扱っています。

    linkタグにFont Awesomeへのリンクを貼り、iタグとしてアイコンを簡単に導入できるので非常に使いやすく、オススメです。

    今回はヘッダーロゴの病院のアイコンと、同じくヘッダーにある電話マークのアイコンにこのFont Awesomeのアイコンを使用しました。

    パンくずリスト

    パンくずリストとは、Webサイトに訪れたユーザーが今どこにいるのかを表したナビゲーションの一種です。

    『ホーム>通販>事務用品>ハサミ』の様に階層的に現在地を案内します。

    今回はページ数が多くなかったので、トップ以外のページで手作業でパンくずリストを作成しました。

    7,8万が妥当(?)

    ページ数こそ多いものの、今回の模写サイトはHTML&CSSのみの作業だけのサイトなので、案件を受注するとしてもそこまで単価は上げられないかなと思いました。

    作業時間の割りには安いかもですが、でもそこら辺の普通のアルバイトと比較したら断然マシなので、めげずにWebサイト制作を頑張りたいと思います！

  • 2つ目の模写サイトができたので紹介します！

    2つ目の模写サイトができたので紹介します！

    皆さん、こんにちは。

    すなです。

    今回も「大学卒業までに20万円/月を稼ぐ人の話」のシリーズ第二弾になります。

    前回に記事をまだ見ていない方は、こちらをご覧ください。

    https://sunablog.tokyo/2021/02/22/post-553/

    2つ目のサイト模写が完成！

    さて、今回も前回に引き続きサイト模写してポートフォリオを充実させようという話をしたいと思います。

    前回制作した模写サイトは、HTMLとCSSのみを用いた簡単なものでした。

    今回は第二弾ということで、技術的に少しだけレベルアップしたサイトを作成しました。

    写真家のポートフォリオサイト

    今回は写真家のポートフォリオサイトを想定したサイトを模写しました。

    参考にしたサイトはこちらです。

    これも前回と同様に、模写用に練習サイトを集めているこちらのサイトから見つけました。

    実際に制作したサイトがこちら

    このサイトを参考に僕が模写したサイトがこちらです。

    こちらも前回と同様に、本家のサイトと同程度のクオリティを保てたかなと思っています。

    所要時間約3時間

    今回も体感時間にはなるのですが、所要時間は3時間程度で済んだかなと思います。

    時間が大幅に短縮できた要因は、前回の第一弾からすぐに2つ目を制作したので感覚がだいぶ戻ったのと、スキル的には大きくはレベルアップしてないので、それもあると思います。

    またレスポンシブ対応も慣れてきて、前回よりも早く作業することができました。

    今回も1ページだけ

    今回のページ数も1枚のみになりました。

    HTML,CSSに少しのjQuery

    このサイトで用いているスキルは以下の様になります。

    • HTML
    • CSS
    • jQuery (=JavaScript)

    今回のサイトは90%が前回と同様にHTMLとCSSのみで制作できるスキル感になります。

    また今回は前回使わなかったJavaScriptを用いました。

    ページ上部のメニューボタンを押すと、ページ下部の該当要素に遷移するのですが、その時にJSのanimate関数を用いたスムーススクロールを使用しました。

    これでサイトが少し動的になりました(厳密には動的ではありませんが)。

    PHPも使いたかった

    ページの1番下に連絡を送る用のフォームがあって、こちらは本来PHPを使わないと機能しません。

    僕個人は過去にPHPを扱っていたので、この機能自体は作成できるのですが、

    • ((居ないとは思いますが)悪意あるユーザーによって不必要に)メールが送信されてしまう
    • 使用するスキルを限定したかった

    ので、今回はHTMLでフォームだけを作成して、機能面のバックエンドは何もしませんでした。

    5万~円程度で受注できたら嬉しい

    気持ち程度ですがjQueryを使用しましたし、本来はPHPでメールを送信できる機能も付けれるので、この程度のレベル感なら5万円程度で受注したいところですかね。

    作業時間を短くできた

    今回の大きな収穫は、作業時間を大幅に短縮できたことです。

    これを作るにはなにをどうすればいい、って言うのがすぐにイメージできる様になったのが良かったです。

    また使う言語も少しづつ増えてきているので、もっと色んなことをできるようになりたいですね！

  • html,cssでいい感じの「表」的なものを作る

    html,cssでいい感じの「表」的なものを作る

    こんにちは、すなです。

    今回、サイト制作で学習した簡易的な表的なものの作り方を皆さんにも共有したと思います。

    少しでもレパートリーに入れていただけたら嬉しいです。

    こんな表を作りたい

    今回、皆さんに共有したい「表的なもの」とは以下の様なものを指します。

    「表的なもの」

    上の画像は大阪でフリーランスエンジニアとして活動されている徳田優一さんのポートフォリオから拝借から拝借しました。

    表と言えば表という様な、ゆるいした感じの表になります。

    tableタグを使う

    基本的にHTMLを用いて表を作成したいときは「tableタグ」というそれ専用のタグを用います。

    簡易的に説明すると、trタグとth、tdタグというタグをtableタグと一緒に使って表を作成できます。

    しかし今回はtableタグを用いずに、「dlタグ」を使って上記に様な表を作成したいと思います。

    dlタグとは

    dlタグは「Definition List」の略で、「定義リスト」を表すタグらしいです。

    dlタグを用意して、中に定義する用語(Definition Term)を書くdtタグと、用語の説明(Definition Description)を書くddタグを用いてリストを作成します。

    <dl>
    <dt>用語</dt>
    <dd>用語に対する説明</dd>
</dl>

    ざっとはこんな感じです。

    dlタグを使ってゆるい表を作る

    今回は左側の名前の要素にdtタグを用い、右側の中身の要素にはddタグを用います。

    実はdtタグとddタグをそのまま使っても、画像の様なレイアウトにはならないのでcssを用いていい感じのレイアウトにしたいと思います。

    floatを使う

    dtタグとddタグをデフォルトのまま使うと、いい感じにddタグが改行されて実はレイアウトが2行になってしまいます。

    それを防ぐために、dtタグに対してfloat: left;を用いて要素を浮かせます。浮いたdtタグに対して、ddタグが回り込んで1列になります。

    これだけだと、dtタグの長さに合わせたddタグが回り込むので、画像の様にddタグが綺麗に1列に並びません。

    そこでddタグにmargin-left: 〇〇px;を追加して、左幅を揃えることができます。

    具体的にはこんな感じです。

    (HTML)
<dl>
    <dt>用語</dt>
    <dd>用語に対する説明</dd>
</dl>

(CSS)
dt {
    float: left;
}
dd {
    margin-left: 50px;
}

    こんな感じでcssを追加してあげると、いい感じの表が作れます。

    flexを使う

    次はまた別のアプローチを紹介します。

    デフォルトだと要素が改行されて2列になってしまうので、今回はdisplay: flex;を追加して1列にしたいと思います。

    簡単に説明すると、display: flex;は要素を伸長・収縮させることができます。

    ざっくり言うと、要素がふにゃふにゃになって伸び縮みしますよって感じです。

    要素がふにゃふにゃになるので、要素は改行されずに1列になります。

    親要素にdisplay: flex;を指定すると、子要素にはwidthでそのふにゃふにゃの幅を指定できます。

    例えばdtタグが親要素の20%、ddタグが80%にしたいときは以下の様になります。

    (HTML)
<dl>
    <dt>用語</dt>
    <dd>用語に対する説明</dd>
</dl>

(CSS)
dl {
    display: flex;
    flex-wrap: wrap;
}
dt {
    width: 20%;
}
dd {
    width: 80%;
}

    細かいこと言うと、dlやddタグはデフォルトでcssが付いているので、それは適宜リセットしてください。

    おすすめはどっち？

    個人的には2つ目のdisplay: flex;を追加する方がいいかなと実感しています。

    レスポンシブを使えば、ケータイで見るときのレイアウトも調整できるので(まあそれを言えば全部でできることはできるんですが)、全体としてやりたいことに対してアプローチがシンプルかなと思いました。

    皆さんもWebサイト制作、是非一緒に頑張りましょう！

  • 初めてサイト模写した結果

    初めてサイト模写した結果

    こんにちは、すなです。

    今回は「大学卒業までに20万円/月を稼ぐ人の話」のシリーズの第一弾になります。

    この記事では、大学生である僕が20万円を稼ぐまでどういう過程をイメージしているかを書いているので、こちらの記事も是非チェックしてみてください。

    https://sunablog.tokyo/2021/02/11/post-297/

    さて今回は、その過程でお話した「ポートフォリオ」を作るという話をします。

    具体的には、僕がサイト模写で作成したサイトを紹介して、その模写にかかった時間や労力、技術のレベル的な話もできたらなと思っています。

    今回は「初級レベル」のサイト模写

    さて、ポートフォリオを作成するに当たって、僕は久々にWeb制作をすることになりました。

    普段からプログラミングには触れているのですが、ただのプログラミングとWeb制作では(個人的には)全くアプローチや扱うジャンルが違うと感じます。

    自転車の趣味サイト

    暫くぶりにサイト制作することになったので、ウォームアップがてら最初に模写するサイトは初級程度のサイトにすることにしました。

    今回、参考にしたサイトはこの趣味の自転車サイトになります(ちなみに、このサイトはサイト模写のやり方を調べるときに見つけたこのサイトから見つけました)。

    恐らく趣味が自転車の人がプライベートで公開しているサイト、という想定のサイトになります。

    多分、この方もサイト模写の一貫で作成したサイトだと予想しています。

    実際の制作物はこちら

    僕がこのサイトを参考にして模写したサイトはこちらになります。

    本家のサイトとは同程度のクオリティを保てたかなと思っています。

    所要時間は5時間

    正確に計測はしていないのですが、このサイトを制作しきるのに体感で5時間程度かかりました。

    久々のサイト制作過ぎて、昔ならスムーズにできた箇所で躓いて、時間がかかってしまいました。

    この量で5時間は多分かなり遅い方だと思います(というか遅いです)。

    ちなみに、サイト模写の際に僕が詰まった技術的なポイントも並行して別の記事にしていますので、そちらも合わせてご覧ください。

    ページ数は1枚だけ

    ページ数は1枚で、右上のリンクらしきボタンも同一ページに遷移するだけなので、サイト量はとても少ないです。

    画像はフリー素材

    サイトで用いている5つの画像は全て「Pixels」という自由に画像が使える海外の画像サイトから拝借しています。

    最大画質でダウンロードしたので僕が模写したサイトでは少し画像に読み込みに時間がかかってしまいます(汗)。

    HTML/CSSだけでok

    こちらのサイトを制作するに当たって、僕が用いた知識は

    • HTML
    • CSS

    だけです。プログラミング初心者でも時間をかければ作成できるレベル感のサイトを選びました。

    少しだけ技術的な話で深掘りすると、ケータイでもレイアウトが崩れない様にレスポンシブ対応しました。慣れていない初心者の方だと、そこに時間がかかってしまうかも知れません。

    加えてJavaScrpitやPHPも一切用いていないので、サイトには何も動きを加えていません。

    1万円でも利益

    僕は大学生で、現在のアルバイトの給料が1100円なので、この程度のサイトを1万円(かなり安い気はしますが)で受注して5時間で納品すれば、同じ時間アルバイトするよりも圧倒的に効率はいいです。

    また今回の模写サイトは1枚だったので、中身が異なる他のページも複数枚制作すれば、単純計算でページ数分単価を上げられます。

    いいスタートになった

    JavaScriptもPHPも使用してない静的なページではありますが、昔に勉強したことや、新しい知識にも出会えて、いいスタートになったかなと思います。

    少しづつサイトのレベル感を上げていって、クライアントにサイト制作を任せてもらえる様なエンジニアになりたいですねっ！

  • 大学卒業までに20万円/月を稼ぐ人の話

    大学卒業までに20万円/月を稼ぐ人の話

    どうも、すなです。

    人生で何回目か分かりませんが、親のおかげでまた春休みを頂くことになりました。お父さん、お母さん、いつもありがとうございます。

    さて今回はそんな長期休暇を利用して、時間があり余っている大学生がプログラミングでお金を稼ごう、という話をします。

    社会人になる前にスキルつけとこ！

    やみくもに「稼ぐぞ〜！」と言っても、勝手にお金が銀行に振り込まれる訳ではないので、そのやり方を説明したいと思います。

    案件受注までの流れ

    理由などの説明はあとでするとして、先に結論から話します。下の流れが答えです。

    月に20万円を稼ぐ
    ↑
    例）10万円の案件を月に2つこなす
    ↑
    ①スキルを付ける
    ②営業する

    ざっとこんな感じかなと思います。

    スキルを付ける

    エンジニアは専門職です。スキルを磨いて、常に自分の牙を磨いておかないといけません。ではWebサイト制作におけるスキルとは一体なんでしょう。個人的には以下のスキルがあれば大丈夫かなと思います。

    • HTML/CSS
    • JavaScript (≒jQuery)
    • PHP
    • ※wordpress
    • ※SEO

    基本的にはそのプログラミング言語を勉強しましょうという話なのですが、wordpressは言語ではなくPHPを用いたソフトウェアで、SEOもプログラミング言語ではないので、一応米印(※)にしておきました。これくらいできる様になれば、正味どこかしらのWeb制作の会社に就職できるくらいかなとは思います。

    営業する

    自分のスキルが十分にあってもそれを販売する方法がないと、せっかく身に付けたスキルも宝の持ち腐れです。それを周囲の人に宣伝して、Webサイトを制作して欲しい人とマッチしないといけません。僕が考える今できる営業方法は以下です。

    • クラウドソーシング
    • 知り合いなどに個人的に営業 (営業というかお手伝い)
    • クラウドシーシング経由でWeb制作会社から受注
    • ブログでプログラミングのことを発信しつつ、それを担保に受注
    • 営業職の知人に副業的にWebサイト制作の営業もしてもらう

    営業はやったことないのでどこまで現実的か分かりませんが、ざっと思いつくのはこんな感じでしょうか。

    目標との差を埋めるために必要なこと

    ①今の僕に足らないスキル

    リストアップしたスキル、すなさんは全部あるの！？って話ですが、残念ながら今の僕は持ち合わせていません。何が足りてて、何が足りてないのか一先ず整理しましょう。

    • HTML/CSS → 十分、多分困らない
    • JavaScript, jQuery → 最低限はできる、分からなくても調べたらできる
    • PHP → 十分、インターン時代の専門言語だった
    • wordpress → ダメ、今まで避けてきた
    • SEO → ダメ、やったことないけどめちゃ興味はある

    ②営業するのに必要なこと

    営業と言っても、先にリストアップした方法はクラウドソーシングを利用したり、それ経由でWeb制作会社から受注だったり、営業職の知人に代行してもらったりなので、実際に僕が足を動かして営業する訳ではありません。

    じゃあ後は何が必要なのかと言ったら、相手に「この人だったら自分がほしいWebサイトを作ってもらえそうだな」って思ってもらうためのポートフォリオとそれを細分化した簡易的な見積書かなと考えました。

    Webサイトが欲しい
    →でもスキルがない
    →外注して専門家に頼もう
    →自分でできないからエンジニアに具体的な指示もできない

    ⇦「こういうことなら〇〇円でできますよ」と最初に自分の手札を見せて、相手に好きなものを選んでもらう(＝お店で店員さんにオススメを聞くときも、多分皆んな同じことをされてる)

    直近でやること

    よって①スキルを磨くのと、②ポートフォリオを充実させて、自分が何ができるのか(＝自分の商品)を理解することが、今は直近でやることかなと思いました。

    具体的にはwordpressの勉強をして、そのスキルでポートフォリオを作る。実際に案件を獲得したら、練習で用いたサイトの代わりに実際の制作物をポートフォリオに組み込む。こんな感じかなと思います。

    【結論】

    結構殴り書きみたいな感じで書いちゃったんで、綺麗にはまとまってないかもですが、やりたいことは伝わったと思います。また進展があったら続きを書きたいを思います。ばいばい〜♪

  • 【知らなきゃ損】三項演算子が便利って話

    【知らなきゃ損】三項演算子が便利って話

    皆さん、こんにちは。すなです。

    最近、エンジニアをしていて「やっぱりプログラミングって楽しいなぁ」とつくづく感じる日々です。

    今日はそのプログラミングの技術的なお話。

    要はif-else構文と同じ

    エンジニアの皆さん、変数に何かを代入するときにif-elseで場合分けして代入するみたいなシチュエーション、よくありませんか？

    文章だけだと分からないので下の例を。

    $result = file_get_contents($file_path);
if ($result) {
　　$announce = "ファイルを取得しました";
} else {
　　$announce = "ファイルがありません";
}
echo $announce;

    これはfile_get_contentsというurl先のWebページの内容を取得できるPHPの関数です。返り値として読み込んだデータを返し、失敗した場合はFALSEを返します。

    したいことに対してコードが多過ぎる

    これ$announceに文字を代入したいだけなのに、控えめに言って無駄が多過ぎますよね？

    変数に文字列を代入するために、if-else構文で3行使ってますし、変数に文字列を代入するほぼ一緒のコードが2回出てきます。

    三項演算子を使おう

    そんな時は今回ご紹介する「三項演算子」を使いましょう。

    さっきと同じコードを三項演算子を使って書いてみます。

    $result = file_get_contents($file_path);
$announce = $result ? "ファイルを取得しました" : "ファイルがありません";
echo $announce;

    見てください、この収納の良さ。それでいて綺麗ですね。

    三項演算子に初めて触れる方は何をしてるかさっぱり分からないかも知れませんね。実は大したことないので、解説します。

    条件式 ? trueのとき : falseのとき

    もう答え書いちゃいました。そういうことです。

    すみません、ちゃんと解説しますね。

    $condition = true;
$result = $condition ? "これはtrueです" : "これはfalseです";
echo $result;
// これはtrueです

    条件式

    最初に条件式を書きます。ここがtrueかfalseになります。上記の例で言うと$conditionの位置が条件式で、これの中身を判定します。

    ? true

    条件式のあとに「?」を書いて、その次に条件式がtrueだったときに返す値を入れます。上記の例は$conditionがtrueのとき、「これはtrueです」を返します。

    : false

    そのあとに「:」を続けて、今度は条件式がfalseだったときに返す値を入れます。上記の例は$conditionがfalseのとき、「これはfalseです」を返します。

    さっきの例全体としては、$conditionがtrueなので三項演算子は全体として「これはtrueです」を返します。それが「$result = 」と繋がっているので、$resultに「これはtrueです」が代入されます。

    もちろん$condition === falseのときは$resultに「これはfalseです」が入ります。

    他の例

    他にも例を見てみましょう。

    $age = 18;// 自分の年齢
$alcohol = 20 < $age ? "最初の一杯は？" : "飲酒は二十歳になってから";
print $alcohol;
// 飲酒は二十歳になってから

    $ageに皆さんの年齢を代入してみてください。そのあと、三項演算子の「条件式」のところで真偽を判定します。例の場合は、「20 < $age」がfalseなので、$alcoholには「飲酒は二十歳になってから」が代入されます。

    // 入力されたパスワードが合っていたとして
echo $password === $_POST["password"] ? "ログインしました" : "パスワードが間違っています";
// ログインしました

    これはformタグから入力されたパスワードを判定して、ログインするかしないかを返します。三項演算子自体が文字列を表すので、echoで直接出力すると結果が表示されます。

  • LPサイト制作で痛感した必要なスキル

    LPサイト制作で痛感した必要なスキル

    皆さん、こんにちは。すなです。

    最近、本業の方が少し落ち着いてきたのでフリーランスの活動を再開する様になりました。

    先日、「会社のLPを作成してほしい」という旨の案件を受注いたしました。その時に痛感したフリーランスエンジニアとして持つべき能力を紹介したいと思います。

    「分からないから外注している」という事実を理解すべき

    先日僕はある案件をとあるクラウドソーシングのサイトで受注しました。クライアントは企業の方で、ご依頼内容は「会社のランディングページを作成してほしい」というものでした。

    この案件を見つけたときの僕の頭の中は以下です。

    今までLP作ったことないけど、クライアントの参考サイト見た感じシンプルだから、他より低価格で提案して、受注できたら頑張るか。

    この目測が大きな誤りでした。その結果、僕はこの案件を最後2徹して納品しました。

    LP制作で必要なスキル

    LP制作には以下の能力が必要です。

    • サイト自体を作る　→　HTML、CSS、WordPressならPHPも
    • ページ内のコンテンツを作る　→　IllustratorやPhotoshop

    Webサイトを作るの自体はHTMLやCSSなどのプログラミングや、それをサーバーにアップロードするなどのパソコン周りの能力が必要になります。しかしそのページの中身の文章や画像・イラストにはIllustratorやPhotoshopなどのスキルが必要になります。

    受注してから後悔

    実際に案件を受注してクライアントと話を進めるうちに「LP制作はプログラミングだけのスキルじゃ無理」って事実に気付きました。その参考サイトは割とシンプルで、その時の僕にはプログラミングだけでいけそうに見えました。プログラミング以外にもデザインのスキルが必要だと言うことに気付きました。その時はかなり死にたい気持ちになりました。

    納期は近いし、案件は僕のスキルを大幅に超えてるし、今更断れないし、どうしよ、、、。

    「鬼模倣」&「鬼ググり」でなんとかなった

    どうにもならないことを悲観してもしょうがないので、僕はクライアントから頂いた、参考にしたいWebサイトをめちゃくちゃ観察し、鬼の様に模倣することにしました。お陰で0から作るのではなく、参考サイトと同じ風に見える様に作業すればいいやと思える様になりました。

    そこからは怒涛の鬼ググりです。

    たまたまIllustratorをインストールしていたので、あとは鬼の様に使い方を調べて、なんとか参考サイトの画像と同じ様に見える様に鬼作業しました。

    案件を受注した日から納品まで4日間しかなく、最後は2徹しました。しかし飲まず食わずの4日間に鬼模倣&鬼ググりをしたお陰で最後は無事に納品。クライアントからokを貰い、その日は久々に0時に布団に入りました。

    勉強になったこと

    この案件はかなり勉強させていただくことが沢山でした。

    LPはプログラミングだけでは作れない

    まず、LPはプログラミングスキルだけでは作れない、と気付かせてもらいました。今回の案件ではプログラミングは1割くらいで、残りの9割の時間はIllustratorの使い方を調べてました。

    個人だと限界がある

    次に、個人だと限界がある、というのも分かりました。誰かが言ってるのを聞いたことあるのですが、

    早く行きたければ1人で行け、遠く行きたければ皆んなで行け。

    1人だとスピードは早いのですが、長持ちしない。グループだと時間はかかるけど、大きな力で遠くに行ける。本当にそうだなと思いました。

    別にこの案件を1人でずっとやる必要はなくて、デザイナーやIllustratorやPhotoshopが使える人が知り合いにいれば、その人に頼んで自分はプログラミングだけをやれば良いですね。そしたら僕ももっと寝れたと思います。

    最後はなんとかなる

    最後に、これが1番勉強になったのですが、結局は何とかなる、と知りました。

    クライアントからヒアリングしたときはかなり絶望して、「なんでこの案件取ったんだろう、、、」と後悔しました。

    しかし、寝る時間も削って(あまり良くはないですが、、、)納期に遅れるなら頂く報酬も全返しして、自分では無理なら、無理な箇所を自分が外注して、身銭を切ってでもクライアントに商品をお渡しする。

    最悪、自分がその案件を納品できなくて、とても怒られたとしても死ぬわけではないですし、隣の部屋の人は平気で生き続けます。宇宙はとても広いので、目の前の後悔の囚われないで、一旦落ち着いて、自分ができることをやりましょう。

    【結論】

    最後はなんだか宗教じみたお話みたくなっちゃいましたが、つまりは全力で頑張ろうというお話です。あれ、徹夜とかしたくないからエンジニアになったんじゃないっけ、、、。

    まあ一旦忘れて次の案件でも探しましょうか。