スタイル・エッジ技術ブログ

士業集客支援/コンサルティングのスタイル・エッジのエンジニアによるブログです。

技術書輪読会、はじめました

f:id:styleedge_tech:20190603132534j:plain
congerdesignによるPixabayからの画像

はじめまして!スタイル・エッジ システム事業部のやっすんです。
現在は主にLaravelでのアプリケーション開発に携わっています。

スタイル・エッジのシステム事業部には20代以下の若手が多いため、
週1で若手だけの技術書輪読会を行い、スキルアップと技術的なコミュニケーションの促進をめざしています。
今回は、上記を目的とした技術書輪読会の進め方について紹介します。

続きを読む

YAMAHAのRTXにL2TP/IPsecを実装する1

はじめに

こんにちは! スタイル・エッジ システム事業部のKYTです。

このブログを書いているメンバは開発担当がほとんどなのですが、 私はそのなかでは数少ないインフラ担当です。

これまでネットワークエンジニアとして働いていたこともあり、 弊社システムと社内LANの ネットワーク・サーバ周りを主戦場としております。

ただ小さな会社ですので、 ネットワーク機器やサーバを触るにとどまらず、 phpstormを使ったコード改修など、 一般的なインフラエンジニアの領域からはみ出た仕事もしております。

自分的にはそこがおもしろいので、楽しくやらせて頂いている今日この頃です。

f:id:styleedge_tech:20190512090235j:plain

今回のテーマについて

さて、インフラ担当として何をテーマに書こうかと思ったのですが、 ネットワークの領域には他の皆さんは手を出さないとみて、 YAMAHAのRTXにおけるL2TP/IPsecの設定、 について書くことにしました。

弊社は士業のコンサルティング業をやっておりまして、 各事務所さんのIT環境のお世話もさせて頂いております。

今回は社内と各事務所さんで設定した、 VPN接続の知見から記事を書きたいと思います。

実装config

まず実装したconfigからVPNに関連する部分をご覧ください。

pp select 1
    ip pp nat descriptor 1

pp select anonymous
    pp bind tunnel1
    pp auth request mschap-v2
    pp auth username ID パスワード
    ip pp remote address pool 192.168.10.200
    ip pp mtu 1258
    pp enable anonymous

tunnel select 1
    tunnel encapsulation l2tp
    ipsec tunnel 1
     ipsec sa policy 1 1 esp aes-cbc sha-hmac
     ipsec ike keepalive use 1 off
     ipsec ike local address 1 192.168.10.1
     ipsec ike nat-traversal 1 on
     ipsec ike pre-shared-key 1 text 事前共有鍵
     ipsec ike remote address 1 any
    l2tp tunnel disconnect time off
    l2tp keepalive use on 10 3
    l2tp keepalive log on
    l2tp syslog on
    ip tunnel tcp mss limit auto
    tunnel enable 1

nat descriptor type 1 masquerade
nat descriptor masquerade static 1 1 192.168.10.1 esp
nat descriptor masquerade static 1 2 192.168.10.1 udp 500
nat descriptor masquerade static 1 3 192.168.10.1 udp 4500
ipsec transport 1 1 udp 1701

l2tp service on

解説

さて、これを解説するにあたり、今回だけで全部を解説するとなると ボリュームが大きくなってしまうので 今回はpp select anonymousの設定箇所に絞ってお話しします。

申し訳ありませんが、全部の解説はこのブログを追いかけてください(苦笑)。

※なお、nat descriptorについては下部の設定値の解説でまとめて扱います。

それでは設定に即して解説します。

pp select anonymous

特定の端末ではなく、 どこからでもユーザ名とパスワードでアクセスできる形で VPNを設定するときに使うものになります。

pp bind tunnel1

この設定に紐づくトンネルインタフェースを設定するものです。 これによりanonymousで認証を受けたユーザは 後に出てくるtunnel1の箇所で設定された設定に基づいて VPN通信を行うことになります。

pp auth request mschap-v2

ユーザとパスワードを認証するときに使用するやり方を指定するもので、 ここではmschap-v2を指定しています。

pp auth username

ここでユーザ名とパスワードを設定しています。

ip pp remote address pool 192.168.10.200

VPNで接続した際にリモート先で通信を するときのipアドレスを記述しています。

つまりこの設定のRTXに接続すると 192.168.10.200の端末として社内ネットワークにつながるということになります。

ip pp mtu 1258

L2TP/IPsecVPNを使用する際に付与されるヘッダを考慮して あらかじめ送るときのデータ大きさを1258byteより大きくならないように しましょうという設定です。

pp enable anonymous

そのまま意味で、上記の機能を有効にする設定です。

おわりに

pp select anonymousの解説だけにとどめましたが、 やはり、それなりのボリュームにやっぱりなってしまいました。 ブログは継続していきますので、最後まで読んでいただけると幸いです。

↓続編です techblog.styleedge.co.jp

最後に

スタイル・エッジ システム事業部では、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください!

株式会社スタイル・エッジLABO採用サイト

Webで出てくる広告、邪魔なだけでしょう?

こんにちは、スタイル・エッジ システム事業部のぽんです。
チーム内では主に、PHPを使ったシステムの保守や新規開発、
あとは社内のISMS担当でもあるのでセキュリティ面の観点についても現在勉強中です。

じゃあセキュリティの話かな?と思いきや、
今回は、弊社に入って初めて触れた広告系の内容について書こうと思います。

Web広告について

弊社は士業コンサルティングという企業なので、ご支援させて頂いている事務所さんの
Web系広告のお手伝いなんかもしています。

みなさん、Webで出される広告っていくつか種類があるのは知っていますか?
ブログとかによく出ているバナーの「エンジニアなんだからFAXも直せるでしょ?」ってやつ。あれも立派に広告ですね。
邪魔なところに出てくるのは、それぞれ見て貰えるような工夫があるからなんです。
種類や用語をいくつか取り上げて紹介したいと思います。

リスティング広告

Googleなどの検索エンジンで、検索をした時に一番上や右に表示される、一瞬検索結果の一部かと思うあれです。
検索してもらって真っ先に目に入る場所にあります。
これが大事で、新しく作ったばかりの事業などは
検索エンジンの上位の候補には出てこないのでこういう広告を使って覚えてもらい
検索の上位に入るのを目指します。

アフィリエイト広告

アフィリエイターさんと呼ばれるサイトを持っている一般ユーザや、メディア企業さんに広告を貼ってもらって、宣伝してもらう広告。
広告を貼ってくれる方へのメリットは、そこからクリックや商品の購入、申し込みなどがあった際には、一定の費用が還元されるという所にあります。
広告を出す側も、表示してもらうだけであれば費用がかからないのでそこはメリットですね。

純広告

特定のサイトの枠を一定期間買い取って広告を表示させてもらいます。
最初に取り上げたバナー広告もこれの一種ですね。
費用形態的には、クリック保証型、imp・PV保証型、期間保証型があります。

.

説明を見ていても、急に広告用語が出てきて分からなくなりますよね。
私も聞き慣れない用語が多くて、最初はすごく困りました。
最後に出てきた、クリック・・ただのクリックではなくこれが広告にとっては結構大事になってきます。

imp・PVって?

  • impはインプレッション
  • PVはページビュー

どちらも似たような意味で使用されています。
このブログの一番下にも広告のバナーが表示されていますよね?
これで、1imp、1PVです。
違いをいうと、例えばページ内に同じ広告が3数貼ってあったとして
impは画面表示されただけで3カウント、
PVは画面表示されると1カウントになります。

クリック

  • クリックはその名の通り広告のクリック

広告がクリックされたら1クリックになります。
でも、広告にとっては単純な1クリックは結構ハードルが高いです。
自分がWebを見ている時のことを考えて欲しいです。
明らかに広告とわかっているバナー、興味がなかったらあえてクリックしないですよね?
クリックして貰えるということは、興味を持ってもらったという指標にもなります。

.

広告は種類によってはクリックしてもらうために、一般ユーザーの好みの系統などを見て広告を出し分けてます。
その例の一つとして普段使っている携帯のブラウザで、
同一ワードで検索した内容を夫や妻、異性の友人・同僚などと見比べてみてください。
Googleさんは、その人が今まで訪問している内容などから
何十代の女性か、男性なのかを分析して、情報を使い分けています。

こういう事を知ってしまうと、自分の知らないところでどれだけデータ収集されて解析されているんだろうとか怖くなりますね~。

.

怖くなったところで、スタイル・エッジという会社に興味を持ってくださった君!
スタイル・エッジのシステム事業部では、一緒に働く仲間を随時募集しています。
株式会社スタイル・エッジLABO採用サイトも覗いてみてくださいね!

プログラミング未経験な新入社員に告げる!Web屋になるならhtmlだけは先にやっておけ!!

ハジメマシテ、スタイル・エッジ システム事業部の Basco Boccinoデス。

 

 


....れっきとした日本人です。BBって呼んでください。

さて、この時期といえば卒業、そして新しい環境への変化の時期です。

今年も新入社員になる方々がたくさんいらっしゃるんじゃないでしょうか ♪(´ε` )。

そんな中で、
「やったことないけどなんか面白そうだからエンジニアになるんだ!! \\└(‘ω’)┘ウオオオオ ////」と、

意気揚々と就活をして

「#春からエンジニア」

なんてタグをつけてTwitterでツイートしている学生諸君に告げる。

 

「Web屋になるならHTMLだけはやっておけやァ!!# ゚Д゚)·;’. ゴルァ!!!」

 

と。

なぜか、それはこの後のお楽しみに。

 

ちょっとした自己紹介

私ことBBは、今の会社にエンジニアの新卒として入社しました。
もちろん未経験です。


ちなみに、この記事を書いているときは社会人1年目が終わりかけている頃です。

入社当時は
PHP、DB、キャッシュ、シェル、環境構築、docker、 GIT、...etc」
と、様々な業界の用語が飛び交っている中、全てが自分の頭の右から左へと抜けて行きました。

それでも、中学校の授業でやっていた「HTML」だけはなぜか覚えていました。

 

入社してからも難儀なもので、

入社1ヶ月目は、外部研修に行き、「やべ、なんも分かんねぇ....」 ... (´ε`;

入社2ヶ月目は、とりあえず簡単なWebアプリを最初から作ってみよう「やべ、なんも分かんねぇ....」 ... (´ε` ;;

そして入社3ヶ月目にして中核のプロジェクトに参加しました。

急展開ですね!やばいですね! Σ(゚д゚;)

そんな私にも一つだけできることがありました。

そう、「HTML」です。( ´_ゝ`)ドヤァ..


「モック」と呼ばれる、いわゆるデモンストレーションページのようなものをHTMLとCSS(画面のデザインを司る言語)で設計した方の意図に沿って忠実に組み上げていく....

そういうことを3~5ヶ月目はずっとやっていました。

 

ここからが本題


さて、ここからが本題の「Web屋になるならHTMLだけはやっておけやァ!!# ゚Д゚)·;’. ゴルァ!!!」です。

なぜか。
簡単だからです。

正確には、勉強するために必要な環境を準備するのが簡単だからです。
PHPなど、サーバーサイド言語と呼ばれるプログラミング言語は、それを動かす環境が必要です。準備もかなりめんどくさい。

MAMPとかあるじゃーん」と言われると何も言えませんが、それを知っている人はもうHTMLやっとけ!!の次元の人ではないと思いますww

 

で、HTMLはというと、最悪「メモ帳アプリ」と「ブラウザ」があれば勉強できます。
ブラウザは、今あなたがこのブログを見ているのに使っているそれです。
Web業界に入るのであれば、ブラウザは調べてwww


どのように勉強するか、という具体的なことは今回は書きませんが、googleで調べればたくさん出てきます。
調べましょう。調べることはとてもこれからの仕事をしていく上で大切です。


HTMLは、Webアプリを作る上で欠かせない存在です。
HTMLの持つ仕組みや動きなどは、Webアプリのプログラミングをする上で非常に大事な要素になります。
私自身、この3~5ヶ月目までひたすらにHTMLを書き、仕組みや持っている特徴などを必死に勉強したおかげで、この後にやることになったJavaScriptPHPの勉強に非常に役に立ちました。


逆に、HTMLをろくに触らずに先にプログラミングを勉強した場合、きっと余計な遠回りをしてしまうでしょう。
どんなに最新のWeb技術を使ったって、最後にWebを利用するユーザーが見るものはHTMLなのだから。


最後になりますが、Webアプリケーションプログラマを目指している未経験新卒諸君!!
この時期は、卒業旅行とか引越しとか卒業式とかでかなり忙しいかもしれない。
だけど、さわりだけでもHTMLを触っておけばきっと何かが変わるはず!!

 

スタイル・エッジ システム事業部では、一緒に働く仲間を募集しています。
もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください!

[株式会社スタイル・エッジLABO採用サイト](https://recruit.styleedge-labo.co.jp/)

言ったら負けよ!伝わらないエンジニア用語5選!

こんにちは。 スタイル・エッジのシステム事業部のDです。

立場上、最近はもっぱらマネジメント業務に勤しむばかりで、コードはだいぶ書いていません。

なので、技術ブログといってもエモい内容になりがちなことを最初にお断りしておきます。

さて、今回は、「言ったら負けよ!伝わらないエンジニア用語5選!」です。

f:id:styleedge_tech:20190512083450j:plain
コミュニケーションは大事だよ

スタイル・エッジのような事業会社では、全社員の割合からすると、エンジニア職種は圧倒的に少ないため、エンジニアがITサポートやシステム要件定義などで、 一般社員と会話をしていると決まって「え?」というシーンが日常的に繰り返されています。

今回はそういったよくある「え?」な用語をまとめておきたいと思います。

デフォルト(でふぉると)

初期設定ないし既存設定のままであることを指しますが、なかなか馴染み薄いようです。 ひどいときは「債務不履行」のほうに解釈されて、「なんで急にそんな話に?」ということすらあります。

リリース(りりーす)

システムやサービスのカットオーバーないし更新のことですが、こちらはおそらく「ん?」ってなるものの、後から理解が追いつくケースがあるようです。 子どもの頃、好きなアーティストのCD発売日とかを思い出せる貴方ならときっと・・分かってくれると信じています。

リロード(りろーど)

主にWeb画面の再読込ですが、リロードで通じない場合は「F5連打で」というフォローで事なきを得ているエンジニア諸氏は多いのではないでしょうか。

バッファ(ばっふぁ)

主にタスク期限を少し余裕をもって設定しておきたい時の説明などに使いますが....そうですね、「余裕」と言えばいいですね。初めから。

Git(ぎっと)

何かの説明時につい言ってしまいますね。そうなると、「ソース管理」「履歴管理」とかの言葉でフォローするものの、 「ソース?履歴?なんの?」という形で、さらにどツボにハマる典型例ですね。言ったら負けです。

以上、事業会社に勤めるエンジニアあるあるな用語を紹介させていただきました。 ちょっとしたことですが、こうした言い回しを少し改善するだけでも、結構日々のコミュニケーションロスは防げるかもしれません。

こうした苦労を乗り越え、ユーザーときちんとしたコミュニケーションをとり、 ビジネスにコミットできるエンジニアをスタイル・エッジでは絶賛募集中です。

よかったら採用サイトを覗いてみてください。 株式会社スタイル・エッジLABO採用サイト

ありがとうございました!