独学文系エンジニアな日々

機械音痴な文系大学生が独学でプログラミングを学んだブログ

【HTML】を知る - 勉強方法とSEOに効果的な構造

f:id:sooriy25:20210304171503p:plain

ブログを書いている皆さん!
なんとなくHTMLを書いていないでしょうか


ブログやメディアを運営していく上で非プログラマーの方でもHTMLを書く機会があると思います。


今回は以下のような方達に是非読んでもらいたいです。

読んでみて ・「HTMLってどういう風に学べばいいの?」
・「SEOに関係するって本当?」



HTMLとは

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)は、ハイパーテキストを記述するためのマークアップ言語の1つ。略してHTML(エイチティーエムエル)と呼ばれることが多い。

引用: HyperText Markup Language - Wikipedia

平たく言うとWeb上に表示させる文章に意味をつけてホームページなどに表示したい情報の形を作るための言語です。
ブログを書いていて、

<h1>見出し</h1> とか
<p>あああ</p> とか
<br>
をみたこと、使ったがある人も多いのではないでしょうか。

Webページの表示には全てこのHTMLが使用されています。
また、すでに公開されているページもブラウザからどのようなHTMLなのか確認することができます。


試しに以下手順で確認してみましょう。

ブラウザ上で右クリック

※私はGoogle Chromeを利用しています。ブラウザによって若干異なります


f:id:sooriy25:20210303231022p:plain

ページのソースを表示


f:id:sooriy25:20210303231039p:plain

HTMLの勉強方法

HTMLの基本文法を勉強するといっても目指すところによって学習のポイントも変わります。

ですが、学習したい人は基本的に以下のどちらかなのでそれに合わせて勉強してみてください。

どんなことに使うか どこまでを勉強する
ブログがかければ良い人 HTML5リファレンス の中からセクション、コンテンツの分類、テーブル、コンテンツの埋め込み あたりはよく使うので覚えておきましょう。
将来的にWebサイトが作りたい人 HTML5リファレンス の全てにプラスして、CSSという言語も合わせて覚える


CSSという言語は、HP上のデザインを作る言語です。
こちらは別の記事で紹介していきたいと思います。

ブログだけ書きたい人は要件に合わせて検索すれば全然問題ありません。
将来Webサイトが作りたい人は、上記をいきなり暗記して使うのは大変困難です。


基本的にはみんな作りながら覚えていくので、まずは実践あるのみです。

おすすめの勉強方法

実際の勉強の進め方は、Webサイトを作りながら勉強するのが良いです。


・学習サイトを使う
私のおすすめは鉄板でドットインストールです。

ドットインストール - 3分動画でマスターできるプログラミング学習サービス

・HTML&CSS系の本を購入する

SEOに有効な構造

f:id:sooriy25:20210304173637p:plain

HTMLとCSSを使ってHPを作っても、検索に引っ掛けてみてもらわらければ意味がありません。

その場合、広告的アプローチではなく、技術的アプローチとしてSEOに効果的なHTMLを構成すると良いと言うことを意識しておくと良いでしょう。


SEOとは、「検索エンジンからサイトに訪れる人を増やすこと」です。


検索エンジンはサイトの構造評価し、検索の順位を決定します。
Yahooも中身の検索エンジンGoogleを使っているため基本的には同じ考え方です。
そのため評価されやすい、HTMLを作ることが重要になるのです。


SEOに効果的なHTMLタグを紹介します。


メタ

<meta name="keyword">,<meta name="description">

この辺は鉄板で入れるべき情報です。
入れすぎると逆効果なので適切な量を守ることが大事です。


タイトル

<title>

記事のタイトルとして検索エンジンが認識します。
ドメイン内の他のページと重複しないタイトルを記述するようにします。
32文字以内が効果的と言われています。


見出し

<h1>,<h2>

この見出しタグをちゃんとつけてあげることが重要です。
こちらは順番が決まっているのでちゃんと入れること、
内容の要点が適切な量、ワードになっているかが大事です。


リンク

<a>

記事の中に記事を紹介することで、サイト内の回遊率があがります。


画像属性

<img alt="画像の説明">

検索エンジンは画像そのものがなんであるかを理解しないので、説明をつけてあげることでなんの画像であるかを判断してくれます。
そのためちゃんと設定しましょう


リスト

<li>

箇条書きはそのリストが人まとまりの内容であると言うことを認識してもらえるため効果的です。
また、ユーザーから見てもわかりやすい情報になるでしょう。


URLの正規化

<link rel="canonical">

ページが複製でないということを宣言します。
同じようなコンテンツが同一ドメイン内に複数ページあると検索エンジンはコンテンツをコピーしていると判断し、検索でペナルティをくらうことがあります。
ですが似たような構造になるケースもあるのでそのような場合は、優先的な記事を決めてコンテンツが1つであると判断させることができます。


強調

<strong>,<b>

サイト内で強調したい部分に使用するタグです。 検索エンジンに対しても、重要度を理解させるタグとして認識されるようです。

まとめ

勉強方法と、SEOに効果的なタグについて紹介しました。
HTMLだけでも学習のボリュームがあるように思いますが、Webサイトを作り出してコピペを繰り返していけば
自然と覚えられます。まずは始めてみましょう。
また、SEOを意識するタグに関しては自身のホームページがあれば、見直してみてみると良いと思います。


【web】【フリーランス】【副業】手軽に受注しやすい案件とスキルセット

f:id:sooriy25:20210302190031p:plain

本業があるけど、副業で小銭稼ぎがしたい!
自由な働き方を求めてフリーランスエンジニアを目指したい!
未経験だけどフリーランスエンジニアを目指したい!


終身雇用制度がなくなってきた「個の時代」では様々な働き方が求められています。

しかし、


実際どのような仕事があるのか?
片手間にできるようなことなのか?
未経験のレベルでこなしていけるのか?


こんな不安はあると思います。


ちょっとした小銭稼ぎがしたいだけなのに、サーバーサイドや運用を含む仕事を受けてガッツリやりすぎて余裕がなくなった。
未経験なのに学習量半端ないんじゃないだろうか...

こんなことたくさんあると思います。

今回は無理しすぎないが、副業として受注しやすいスキルセットを紹介したいと思います。






受注しやすい案件

f:id:sooriy25:20210302191634p:plain

実際にシステムを拘って作ろうとすると運用面、開発面で膨大な時間がかかります。
そのため、機能が標準で使えてデザインを自由にカスタマイズできるCMSを利用するのがおすすめです。

CMSとは

ウェブページを作成し、運用するには、HTMLファイルや、それを保存するディレクトリ構造などについての知識が必要だった。コンテンツ管理システムでは、技術的な知識がなくても、テキストや、画像等の「コンテンツ」を用意できれば、ウェブによる情報発信をおこなえるように工夫されている

引用: コンテンツ管理システム - Wikipedia

その中でも個人的なおすすめは、以下の2つです。


CMS おすすめの理由
Wordpress 最もよく使われており、情報も落ちている。プログラミングができなくてもWebサイトが作れ、プログラミングができると自由に見た目と中身をカスタマイズできる
Shopify 海外で非常に多く使われているECサイト運用/開発のプラットフォーム。利用する側は$29ドルかかるが、プログラミングができなくても運用可、ソースコードをいじることも可、多言語、他通貨、デザインの自由度も高く優れた分析管理も行える。D2Cビジネスが流行っている今、需要が高くなってきている

wordpress ja.wordpress.org

shopify www.shopify.jp

shopifyはパートナープログラムで開発者になれます

www.shopify.jp

スキルセット

f:id:sooriy25:20210302191537p:plain

先ほどのようなCMSをちゃんと使いこなして、提案していくためにはプログラミングの知識が必要です。


まずは以下4つをスキルと理解度で記載したのでこれらをできるようになりましょう。

スキル理解度
HTMLしっかり理解:HTMLを使って構造の骨組みをかける。SEOに特化した構造が把握できているとなお良し
CSSしっかり理解:このCSSを書けば想定通りのデザインできることが理解できている。
JavaScript基本文法理解:if、forなどの書き方、基本文法とJqueryなどのライブラリの使い方がわかる。
PHP基本文法理解:if、forなどの書き方、基本文法が理解できている。

全部合わせて3ヶ月も勉強すればできるようになると思います。


勉強の方法は以下を読んでみてください。

soriblog.com

また、全くの未経験の方はこの記事から読んでみてください。

soriblog.com

その先の稼ぎ方

上記のスキルを身に付けることができれば、フロントエンド開発がある程度できると言って良いです。
さらに副業の幅を伸ばしたい方は、vue.js、react、typescriptなどを学習してみると良いと思います。

実際にクラウドワークスで検索してみるとフロントエンド開発で募集されていることも多く受注しやすいと思います。

https://crowdworks.jp/public/jobs/search?keep_search_criteria=true&order=score&hide_expired=false&search%5Bkeywords%5D=vue

こんなご時世でもあるので個の力を伸ばし、ガンガン副業していきましょう。


【10分】【そろそろ覚えたい】わかりやすい正規表現 - 入門編

f:id:sooriy25:20210228132204p:plain

はじめに

今回の記事はこんな人に向けて書いています。

正規表現なんてものは知らない、動けばいい」
正規表現をなんとなくコピペしている」
正規表現怖い」


最後まで読めばとりあえず「正規表現に対する恐怖心」はなくなります。





正規表現をかけ!


と言われてもいきなり覚えるのは大変です。
ですが

毎回全てを一から自分で考えてかけ!

といっているわけではありません。
基本的には、ネットにいろいろな情報が落ちているので、まずはコピペしたものが間違っていたら


あれ?なんかこの正規表現おかしくない?


となれるレベルになれれば、複雑なシステムを担当しない限り必要としません。

今回目指すところ  コピペしてきた正規表現が正しいかどうかを理解できる。

いきなり複雑な正規表現を書くのは難しいと思うのでこうした積み重ねからちょっとずつ始めていきましょう。

ではさっそく正規表現について学んでいきます。


正規表現とは

正規表現(せいきひょうげん、英: regular expression)は、文字列の集合を一つの文字列で表現する方法の一つである。正則表現(せいそくひょうげん)とも呼ばれ、形式言語理論の分野では比較的こちらの訳語の方が使われる。まれに正規式と呼ばれることもある。

引用: wikipedia

文字列を記法に沿って表現することです。
これらは文字を抜き出したり、文字列が規則通りであるかを調べたりするのに使ったりします。
表現するのには「メタ文字」という以下のような特殊文字を利用します。

.^$[]*+?|() ... etc


使い方は、環境や言語によって若干異なったりしますが基本は同じなのでまずは特殊文字の役割から理解してしまいましょう。


ワイドルカードと正規表現は違う

よく勘違いされるのですがワイルドカード正規表現は違います。
違いとしてはワイルドカードより正規表現の方が複雑な条件を表現できます。

ワイルドカード 使えるのは「*」と「?」の二種類で表現できる
正規表現 「*」と「?」意外にもたくさんの記号で表現できる

正規表現のルール

正規表現にはルールがあります。
調べてみると以下のように表説明をしてくれている記事がたくさんあります。

基本的な正規表現一覧 | murashun.jp

正直、初めて読んでしっくりくる人はいないと思います。

量も多いし、使ってみないとわからない部分も多いはずなので、今すぐ全部暗記しなくても良いです。
まずは、この記号はこういう意味なんだというのをなんとなく理解できるようになれば良いです。

あるいは、以下のように検索すれば他にも説明してくれている記事がたくさんあります。
眺めてみても良いかもしれません。

・検索ワード例=> 正規表現 パターン
・検索ワード例=> 正規表現 一覧


正規表現おすすめの覚え方

いきなり上からかぶり付くと大変なので、4つに分類して覚えてみましょう。

分類  特殊な意味を表す
 繰り返しを表す
 文字の場所を表す
 文字のグルーピングを表す

・特殊な意味を表す

例:

  • 「.」=>何らかの1文字を表す

  • 「\s」=>タブ、改行、スペースを表す

  • 「\d」=>0~9の数字を表す

・繰り返しを表す

例:

  • 「*」=>ある文字が0文字以上繰り返している

  • 「?」=>直前の文字を何回繰り返している

・文字の場所を表す

例:

  • 「^」=>行の先頭を表す

  • 「$」=>行の最後を表す



・文字のグルーピングを表す

例:

  • 「()」=>カッコ内を1つの文字のグループにまとめる

  • 「[]」=>カッコ内に含まれるいずれかの1文字

正規表現はこれらの記号ルールに従って引っ掛けるための判定基準を作成していきます。

理解するためにまずは、上記のいくつかを実際に組み合わせて「記号の意味を体感していくと良い」です。

正規表現を試す便利なサービス

f:id:sooriy25:20210228135600p:plain



正規表現を練習する場所として、毎回保存して、毎回サーバーにあげて、とやっていたら大変です。
簡単に試す方法として、web上で簡単に試験できるツールがあります。

PHP/Javascript
正規表現チェッカー PHP: preg_match() / JavaScript: match()


Ruby
Rubular: a Ruby regular expression editor

他にも言語判定ごとに色々あったりしますので調べてみてください。

・ 検索ワード例=> 正規表現 チェックツール

では実際に試してみましょう。


試してみる

郵便番号かどうかを引っ掛けてみます。


まずは、パターンに分解してみてください。



郵便番号は000-0000みたいな感じなので、

「3桁の数字」と「ハイフン」と「4桁の数字」
のものは全部郵便番号に当てはまりそうです。

以下のように書いてみます。※解説は写真の後に


/^\d{3}-\d{4}$/


f:id:sooriy25:20210228124828p:plain

マッチしました。

逆に最後の対象の文字を5桁にしてみましょう。

f:id:sooriy25:20210228135039p:plain

一致しませんでした。と出ているので引っかかっていません。

では先ほど紹介した「正規表現おすすめの覚え方」から解説していくと

正規表現 説明
^ 先頭の一文字が
\d 0~9の数字
{3} 直前の文字0~9が3文字
- ハイフン(そのまま)
\d 0~9の文字
{4} 直前の文字0~9が4文字
$ が最後の文字

こんな感じで、一番最初のルール表をもとにしながらまずは、
色々組み合わせを使って実際に使い方を覚えましょう


手順のポイント 1.文字がどのように表現できそうか設計してみる
2.ツールなどで手軽に試してみる


あるあるパターンをやってみる

今回は「1つ」やってみましたが他にもありがちなパターンをいくつかコピペしてきてでもいいので体感してみてください。

例えばこんなものはよくあります。

  • 英数字5文字以上

  • 電話番号かどうかをチェック

  • IPアドレスをチェックする

  • URLであること、また、URLの一番最後だけを抜き出す

時間があればトレーニングしてみてください。

おわりに

なんとなく試行錯誤しながらできれば、スタートラインに立つことができたと思います。
正規表現を使う機会があればなるべく自分で考えるようにしてみて初心者脱出しましょう。


【ファンクションポイント法(FP)】フリーランスも使える見積もりー 脱 !初心者

f:id:sooriy25:20210223182112p:plain

フリーランスでWebアプリケーションを作る場合、どのように金額を決めるか苦労していたりしないでしょうか。


この規模のメディアサイトなら代替15万かな?
Wordpressなら10万かな?


大体こんな感じで決めていたりしないでしょうか。


これでは機能が予想より膨れ上がった場合に大変辛い思いにすることになります。
これを機になんとなく見積もるのをやめて、ある程度自分で管理して見積もってはいかがでしょうか。

見積もり方の手法の一つにファンクションポイント法というのがあります。

以前にも一瞬だけ取り上げています。気が向いたらこちらの記事も読んでみてください。

soriblog.com



ファンクションポイントとは

ファンクションポイント法(ファンクションポイントほう、英: function point method)とは、1979年にIBMのアレン・J・アルブレヒト(A.J.Albrecht)が考案したソフトウェアの規模を測定する手法の1つ。ソフトウェアがもつ機能数や複雑さによって重みづけした点数(ファンクションポイント:FP)を付け、そのソフトウェアにおける合計点数から開発工数を見積もる。米国International Function Point Users Group(IFPUG)によってマニュアルが策定された。

ファンクションポイント法 - Wikipedia

wikipediaにも記載してある通り、作りたいものを機能ごとに分類し、難易度(評価点)と重み付け(調整係数)を行い、それに対して工数や金額を加点する方式です。

評価点

f:id:sooriy25:20210223182313p:plain

評価点とはどういう基準で決めるかという話ですが、基本的には難易度を軸に決定します。

一般的には、以下の5つに分類して見積もりを決めることが多いです。

機能分類

1.外部入力:データの入力

  例:ログイン、ユーザー登録フォームなど

2.外部出力:データを加工して出力

  例:ダウンロード処理、領収書など

3.外部照会:データを加工せずに出力

  例:検索、〇〇ランキング表示処理など

4.内部論理ファイル:データの追加・更新・削除といった操作を行うファイル。

  例:ユーザー登録処理

5.外部インタフェースファイル:外部アプリケーションから参照を行う

  例:位置情報、SNS取得


実際には、1〜3、4〜5で分けて考えます。

* トランザクションファンクション→1、2、3
* データファンクション→4、5

しかしながら全てをこれになぞる必要があるというわけではなく、企業などで活用する場合は、上記のようにある程度ルールを縛っても良いと思いますし フリーランスであれば自分が管理しやすいレベルまで落として管理すると良いと思います。
プロジェクトのメンバー数によっては基準をブラしたくないので臨機応変に対応するのが良いかと思います。

例(個人(フリーランスなど)小規模で行う場合)

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

※データ層も含んでいます。

f:id:sooriy25:20210223172925p:plain

基準があると決めやすいと思います。
例えば、ログイン機能が3点で一番簡単な機能であれば、それより難しいか難しくないかで判断します。
また、評価点の説明も用意しておくと便利です。

調整係数

f:id:sooriy25:20210223182442p:plain

調整係数は不確定の強い要素の計算です。 基本的には以下の14のシステム特性によって変化します。


システム14つの特性

  • データ通信

  • 分散データ処理

  • 性能

  • 高負荷構成

  • トランザクション

  • オンライン入力

  • エンドユーザ効率

  • オンライン更新

  • 複雑な処理

  • 再利用可能性

  • インストール容易性

  • 運用性

  • 複数サイト

  • 変更容易性


量が多いので多くは説明しませんが、0〜5点で評価します。 例えばデータ通信であれば、「アプリケーションの通信頻度」であり、

webアプリケーションとしてhttp通信だけを行うので4点。

というように決めていきます。

それぞれの説明は検索するとすぐに出てきます。

検索キーワード例 => FP法 調整係数

計算式は以下で、TDIに14項目の合計値を入れて決定し、
調整係数=(TDI*0.01)+0.65

算出された割合を評価点と掛け合わせて算出するというのが大枠の概要となります。

1点が1万円で評価点合計が100万だとしたら


評価点(100点)*調整係数(0.95)= 95万

という見積もりです。

メリット

メリット   プログラムに依存しないためクライアントにも説明しやすい
  自分でも機能を整理出来る
  ある程度は再利用できる


要件を整理するだけで上記のような恩恵を受けることもできます。
何より、説明的になっていればクライアントも納得してくれるし信頼してくれます。
まずは何もしないよりしっかりと見積もることを始めてみましょう。
以上がファンクションポイント法の概要になります。
導入してもっと具体的に知りたいという方は、検索してみてください。



【Web】【フリーランス】も知っておきたい脆弱性対応について

f:id:sooriy25:20210220120134p:plain

Webアプリケーションのライブラリバージョンを長らく放置していることはないでしょうか?

今回は、フリーランスとしても社会人としても考えるべき脆弱性とリスクについてお話しします。




脆弱性とは


セキュリティホール - Wikipedia

脆弱性(ぜいじゃくせい)は、英語の vulnerability の日本語訳である。この分野での意味は「 弱点 」であり、セキュリティホール(安全性欠陥)と類似している。ただし、セキュリティホールがより具体的な欠陥を指す傾向があるのに対して、脆弱性は欠陥だけではなく、たとえ意図した(要求仕様どおりの)動作であっても、攻撃に対して弱ければ、つまり「弱点」があれば用いるという点が異なる。

システムに弱点があり、外部からの攻撃を受けやすい状態です。いわゆる欠陥です。


例えばWebアプリであればライブラリを使うことが非常に多いです。 PHPならcomposer、node.jsならpackage.jsonに大量にライブラリが書かれていないでしょうか。 これらのライブラリにも脆弱性のリスクを負うものが入っていたりします。


脆弱性は発見された時に影響があるわけではありませんが、今後影響してくる、あるいは影響を受けているというリスクをはらんでします。


リスクには大きく4つの選択肢があることを理解しておきましょう。


今回  低減:一時対応などを行い、少しでもリスクを低減
 移転:問題が起きた場合の保険となるものを用意しておく移転
 許容:リスクが少ないと判断できた場合にコストを相対的に考えた許容
 回避:パッチやバージョンをあげるなどでリスク回避

どれも聞いてみると確かにこれは意識しておく必要があるなというものです。
知っているのと知っていないのでは考え方や動き方も違うので常に意識するようにしましょう。


事例


event-streamのような様々なライブラリが依存しているパッケージでさえ、不正なソースが混入することがあります。


www.itmedia.co.jp

他にも調べたら無限に出てきますが、会社が倒産するほどの損失が起きることもあり得ます。 十分に理解しておきましょう。


対応について

f:id:sooriy25:20210220120900p:plain

脆弱性を調べられる環境を整える

脆弱性は日々すごい勢いで発見されています。日常的に知るために常にアンテナを貼ることが大事です。


脆弱性の情報を載せてくれるサイトはたくさんあります。
自分のシステムにあった情報を収集するようにしましょう。調べるとセキュリティを扱っている記事は出てきます。


例:

www.security-next.com

cve.mitre.org

jvn.jp

他にも脆弱性の警告を受けたnpmパッケージを出してくれる
npm audit
のようなものも存在します。

発見されたものが致命的な場合もあるため、できるだけ検知できるように心がけることが大事です。

脆弱性があることを知る

情報収集の中から該当のものがシステムで利用されているかを確認します。 内容を確認し、影響が判断できるレベル、あるいはエンジニア以外のステークホルダーまで説明できるようにしましょう。

対応の方針検討、実施

収集した情報からどの程度影響があるのか調査し、内容に合わせた対応方針を決定し、それらを実施(対応)していきます。
脆弱性があっても許容せざるを得ないものもあったりします。

例えば、社内のみで公開しているアプリケーションがあった場合に、アプリケーション経路から攻撃される脆弱性が見つかった場合 緊急性はそこまで高くないとして判断することもできます。(許容)
また、ライブラリ側で致命的で改善する見込みのないものであれば代替する方法を考えたりする必要もあります。
場合によっては法的に問題が出るケースもあるかもしれないのでエンジニア以外のステークホルダーを巻き込むケースもあります。

このように確認する量、対応難易度、判断力を要するので対策を考えるチームを作り、いつでも対応できるようにしておくことが大事です。


それ以外のリスク

バージョンを定期的にあげないとそれ以外に起こる障害もあります。
例えば、ライブラリや公式がEOLを発表した際にバージョンを最新に上げなくては...!
なんてことがあったとします。

保証が切られているので当然脆弱性の話題も上がってきづらいです。

そうなった時に、いざ2.x → 5.xにあげようとしても完全に互換性が保たれておらず移行に非常に苦戦を強いられることも少なくありません。
放置しすぎると自分が苦しむことにもなります。

【Web】デザイナー/フロントエンジニア/サーバーサイドエンジニアの境界線

f:id:sooriy25:20210218005641p:plain

WebエンジニアあるいはWebデザイナーという職業を目指していく中で以下のような疑問にぶつかることがあるかもしれません。

・フロントエンジニア、サーバーサイドエンジニアどっちを目指したらいいのだろう。
Webデザイナーになりたいけどフロントエンドエンジニアとの違いはなんだろう

簡単に説明します Webデザイナー:見た目をデザインする
フロントエンドエンジニア:見た目の構築
サーバーサイドエンジニア:サーバーで実行されるプログラム(ロジック)


ただし、もし会社に入社してデザインだけやりたいと思っていても必ずそうなるわけではありません。


自分が過去に何社かみてきた経験ではWebデザイナーがフロントエンジニアも担当したり、大手企業なんかはエンジニアがフロントエンド、サーバーサイドを担当みたいなケースもあります。


では具体的にはどのようなことをするのでしょうか?



Webデザイナー

f:id:sooriy25:20210217011654p:plain

WebデザイナーPhotoShopIllustratorなどのデザインソフトを利用し、画面のデザインを主に行います。
フロントエンドエンジニアも兼任していることが多く、HTML、CSSJavascriptといった言語を使ってフロントエンド相当の動きをすることもあります。
その他には、見た目をつかさどる重要なポイントになるので自社サービスであれば企画や営業、クライアントワークであればお客様と直接やり取りすることもあります。
さらに、場合によってはマーケティングに近いこともしている人もいます。

フロントエンジニア

f:id:sooriy25:20210217012009p:plain f:id:sooriy25:20210217012022p:plain


フロントエンドエンジニアはWebの場合、HTML、CSSJavascriptPHPなどを用いて、見た目の構築やサーバーへの要求までを構築します。
CSSJavascriptにとてつもなく力を入れている会社であれば専任の方がいることもありますが基本的にはWebデザイナーもしくはサーバーサイドエンジニアが兼任 していることが多いです。これだけで就職という形はなかなかありませんが、スキルを持っていればフリーランスエンジニアとして独立し月30万程度は稼ぐことが可能です。

サーバーサイドエンジニア

f:id:sooriy25:20210217012713p:plain


バックエンドエンジニアの場合、フロントエンドで構築された要求に倒して適切な処理(ロジック)を構築し、返却するまでを構築します。
こちらも様々な言語で書かれています。最近であれば、Java、GO、Node.js、Rubyなどが多く使われます。もちろんサーバーサイドで動くのでC++などでも書くことができます。
サーバーに入って作業することも多いため、セキュリティやサーバー操作の知識(Linuxなど)ある程度のネットワークの知識も必要とします。
仕事の8~9が設計と開発です。マネージャークラスにならない他の職域の人と直接仕事する機会も少ないためプログラミングが好きな人が向いていると言えるでしょう。

【フリーランス】も知っておきたいOSSライセンス

f:id:sooriy25:20210215221826p:plain



 

これめっちゃ便利じゃん!使おっと

 

という感じでなんとなーくOSS(オープンソース)を使用したりしていないでしょうか。

 

これらも他人が作ったものなのでちゃんと著作権があります。

 

エンジニアをしていく上である程度必要な知識です。

特にフリーランスの方は周りが誰かが管理しているわけではないですし、大きな会社とやり取りする際は信頼を失えば業界で生きていくのが難しくなることさえあるかもしれません。

 

 

 

 

 

 

OSSとは

オープンソースとは、ソースコードを商用、非商用の目的を問わず利用、修正、頒布することを許し、それを利用する個人や団体の努力や利益を遮ることがないソフトウェア開発の手法。ソースコードへのアクセスが開かれている。

 

引用:

オープンソース - Wikipedia

 

また、以下のような10の定義があります。

 

オープンソースの定義

The Open Source Definition (Annotated) | Open Source Initiative

 

ポイント

何やら色々書いてあります。

そう。定義が色々あるように種類もたくさんあるのです。

ライセンスごとに詳細が異なっていますが、ひとまず以下の考え方が存在することをインプットしておきましょう。

 

  • 配布、販売の制限がない

ソースコードを手に入れた人は、無償有償関係なく再配布できる。

  • 無保証

公開はしているが動作の保証はしない。メンテナンスされなくても文句をいうなということです。

利用したソースは、改変したらオープンソースとして公開すること。ない場合もあります。

  • デュアルライセンス

複数のライセンスを持って利用者に好きな条件を選択させる。

 

違反すると?

会社によっては億を超えるほどの罰則金やソースコードの開示といった例もあるようです。

 

事例は検索するとたくさん落ちています。

 

検索ワード例

ソフトウェアライセンス違反 事例

 

「これは違反じゃないだろう...」とか、「これぐらいなら...」と思っていても状況が複雑になる>と思わぬあるかもしれません。

 

ライセンスの種類(一部)

ライセンスごとに実際によくあるライセンスでは以下のようなものがあります。

 

  • MITライセンス
  • Apacheライセンス
  • GPL/LGPLライセンス
  • BSD ライセンス

参考&詳細:Licenses & Standards | Open Source Initiative

 

それぞれの具体的な話は、調べてみるとたくさん出てきます。

ポイントをしっかり抑えながら利用するようにましょう。

 

みなさんも、利用する際は気をつけるようにしましょう。

【IOS14/iphone】安全性の低いセキュリティ - 無線の認証方式と暗号化方式

 

f:id:sooriy25:20210214175637p:plain

 

「IOS14」のバージョンを挙げた際に

 

「安全性の低いセキュリティ」

 

と出るWifiに接続した方も多いのではないかと思います。

これって大丈夫なの?って思う方もいらっしゃると思います。

 

セキュリティ上よろしくないのでできるだけ変更しましょう。

※これはIphoneでもandroidでもPCでも関係なく等しく同じ考え方です。

 

 

 

 

 

リスク

以下のようなリスクがあります。

 

Check   通信情報の搾取
  なりすまし
  通信データ盗

 

いうまでもなくどれも被害による損失は大きいです。

 

対応方法

 

認証方式、暗号方式を変更しましょう。

各環境のルーターにログインしてください。

 

お使いのルーターの製品番号をインターネットで検索すると説明書が出てくるかと思います。接続の仕方は大体はこんな感じでブラウザで開きます。

f:id:sooriy25:20210214172612p:plain

※192.168.x.x 

 

ログイン(変更してなければデフォルトの設定が購入時の箱などに記載されていると思います)できたら、説明書を参考に暗号化モードを変更するようにしてください。

 

対応表は以下のような感じです。(2021/2/14現在)

記載していませんが特にWEPと書かれたものは使わないようにしましょう。

認証 暗号化 判断基準(ios14)
WPA-PSK TKIP ×
WPA-PSK AES ×
WPA-Parsonal AES ×
WPA/WPA2-mixed mode PSK TKIP/AES mixed mode ×
WPA/WPA2 Personal TKIP/AES mixed mode ×
WPA2-PSK AES
WPA2 Personal AES
WPA2/WPA3 Personal AES
WPA3 Personal AES

 

バッファローなどはAOSSを有効にしているとデフォルトでWPA/WPA2 Personalになったりするみたいです。

当てはまらない場合はルーターの購入を検討した方が良いかもしれません。

 

変更後、ルーター再起動はお忘れなく。。

 

種類

認証と暗号化の組み合わせによって強度が変わります。

詳しく知りたい方は、以下のような検索で色々出てきます。

検索ワード例=> 無線LAN 暗号化方式 認証方式

 

基本的には上記テーブルであれば、下に行くほど強度が強いです。

方式だけでもたくさんあるように日々ネットワークも進化しているのでずっと同じものを使っていれば良いというわけではありません。

異変に気がついた際は検索して必要に応じて新しいものを買う必要があります。

 

そういうリスクもある。ということだけ心にとめておきましょう。