ウィンナスのプログラミング忘備録

アプリケーション制作をしている最中に発見したテクニックを忘備録としてまとめていきます。

【カノトニュース】IE/Edgeの終焉!?MicrosoftがEdgeをChromiumベースに切り替える意向を示す!!

はいどうも~、カノトです!

 

本日は【良い報告】です!!

タイトルの通り、IE/Edgeが終わりますww

 

1.Edgeの終焉とChromeの発展

アメリカ時間の12月7日、MicrosoftのEdge担当プロジェクトマネジャーのカイル・アルデン氏がRedditのスレッドで「既存のChrome拡張機能をサポートする意向だ」と語ったそうです。

 

f:id:win-friendof:20181212230157j:plain

 

さらに、Microsoftは同日、「Windows 10のデフォルトブラウザ(Edge)をオープンソースのベースに切り替える」と発表しています。

 

Chromiumベースってなんだ・・・?

 

ChromiumベースとはGoogle Chromeのベースとなっているソフトウェアです。

Chromiumを使うことによってChromeのようなアプリケーションを作ることができるのです!

 

つまり、EdgeがChromeのように使えるようになるのです!!!

※Edgeがなくなるわけではありません。

ちなみにGoogle ChromeはこのChromiumにいくつかの機能を追加してパッケージ化したものになります。

f:id:win-friendof:20181212231809p:plain

 

さて、この切り替えによって何が起きるのか?

開発者の視点でメリットを見てみましょう!

 

2.WEB開発者から見たメリット

WEB開発者にとって一番のメリットは、「開発の手間が省ける!」だと思います!

WEB開発の経歴が長い方はご存知かもですが、Microsoft製のブラウザはいつも開発の邪魔をして開発工数を増やしていくんですよねww

Chrome -> OK!

FireFox -> OK!

Safari    -> OK!

IE/Edge -> NG!

 

は???

みたいな感じでバグの温床でした。

これがなくなるので開発工数がググっと減ります!

直近では(俗にいう)CSS4がリリースされる予定なのでそれまでに撲滅してほしいですね♪♪

WindowsでもLinux系のコマンドを打てるWindows PowerShellを使ってみよう!!

みなさんこんにちは!カノトです!!

 

突然ですが、コマンド打ってますか!?

あまり打ちたくないですね~(GUI大好き)

 

とはいえ、最近ではGitやSASS、Node.jsなどなどコマンドを使わないと本領を発揮できない技術も多くあります。

そんな背景もあり、コマンドが豊富なMacは技術者の中では人気が高いですよね!

でも僕みたいに「開発のために禁断の林檎を食べるのはなぁ~」っていう人もきっといるはず。

 

そんな今回はMacLinuxと同じように使うことができる「Windows PowerShell」を紹介していきます!

 

1.コマンドプロンプトPowerShellの違い

さて、Windowsには既に「コマンドプロンプト」というアプリケーションが存在します。これはもちろん、Windowsにデフォルトで入っているものです。

このコマンドプロンプトでもNode.jsやGitを使うことはできます!

しかし、MacLinuxのコマンドとは異なる部分が多いため、すごく使いづらい!!!

そこで、他のOSと同様のコマンドを使えるのが「Windows PowerShell」なのです!!

 

なぜ、コマンドを変えたのだろうか・・・。

 

「コマンドはwindowsしか使わないよww」という方はちょっと待った!!

Linuxコマンドはバックエンド開発やインフラ整備をする際によく使うので覚えておくことをオススメします。

 

2.Windows PowerShellの起動

それでは、PowerShellを起動してみましょう!

スタートメニューを開くと赤枠のようにアプリケーションの一覧が出ると思います。

その一覧の中に「Windows PowerShell」があるのでそこから起動します。

PowerShellが4種類ほどあると思いますが、基本的には「Windows PowerShell」を起動すればOKです!

 

もうひとつ、エクスプローラーを使って起動する方法もあるのでそちらをやってみましょう!

 

まず、エクスプローラーを起動します。

そしたらクイックアクセス以外のフォルダに移動します。

移動したら左上の「ファイル」をクリックします。

 

すると「Windows powerShellを開く」とあるのでここから起動できます!

 

 

あとはコマンド生活を満喫してくださいな~~

【Web開発】OOCSSを考慮したモジュールを作ってみる

こんにちは!

皆さんはウェブサイトを作る際にきちんとOOCSS(オブジェクティブなCSS)を考慮して作っていますか?

「プログラミングでもあるまいし、そんなの関係ねーよ」「形ができればいいんだろ?」と思った人もいるかもしれませんが、CSSでもオブジェクト指向を考慮しないと改修の際にめんどくさいことになるかもしれません!

 

では、オブジェクト指向を考慮したCSSを組み立てるにはどうすればいいのか、考えていきましょう♪

 

オブジェクト指向にすることでのメリット

OOCSSを理解する上で、もっとも学習の手助けになるのはそのメリットを知ることだと思います。(自分がそうでした)

まずは、ボタンのを作ることを考えます。

↓のようなやつですね。

 リンクボタン

これに加えて今度は↓のようなアコーディオンボタンを作るとします。

アコーディオン

 

この2つの見た目の差は「アイコン」と「色」となります。

つまり、そのほかは共通で使えることになります。(paddingとかfont-sizeとかとか) 

その辺をまとめちゃおう!というのがOOCSSの考え方です。

 

●実際にコードを書いてみた

実際にコードを書いてみましたのでこちらで解説していきます。

 

共通部分のコードを見ると「btn_link」のクラスが共通になっています。

そして、「btn_blue」「btn_red」「btn_green」が色を決定するクラスになります。

リンクボタンのコードを見てみると「type1」がアイコンを”>”にするクラスになります。

アコーディオンのコードを見てみると「accordion」がアイコンを”+”にするクラスになります。

 

仮に、”>”アイコンから”+”アイコンに変更したいとした場合、(なかなかなさそうな変更ですが笑)「type1」を「accordion」に変えればOKです!

さらに新たにリンクボタンを作る際には、アイコンだけを作ればいいのでかなり楽になります♪

 

●まとめ

・共通で使える部分は一緒にしちゃおう!

・アイコンや色など異なる部分のみ専用のクラスを使おう!

・OOCSSを使うと無駄なコーディング(作業)が減ります!