最新記事

マイクロソフト、最薄レベルのデスクトップPC「Surface Studio」を発表

マイクロソフトは、現地時間10月26日、ニューヨークで開催中のイベントで新たな製品「Surface Studio」を発表しました。28インチと大型でありながら12.5mmという薄さ。ぜひ動画と一緒にご覧ください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

マイクロソフトは、現地時間10月26日、ニューヨークで開催中のイベントで新たな製品「Surface Studio」を発表しました。アップルのiMacをイメージさせるような製品となっていますが、マイクロソフト初のデスクトップPCとなっています。

液晶ディスプレイの中でも最薄レベルの「Surface Studio」、ぜひ動画と一緒にご覧ください。

Surface Studioの特徴

surface-studio-2-web

タッチスクリーン対応のSurface Studioのディスプレイは、28インチと大型でありながら12.5mmという薄さ。大きなディスプレイですが、片手で手軽に傾きを変えることができます。

20度まで倒して作業ができるというのが大きな特徴でしょう。

en-intl-pdp0-surface-cardinal-42l-00001-f1-desktop

ディスプレイ部分のスペック

28インチ、4500×3000画素のPixelSense Display、10点マルチタッチに対応しています。

PC部分のスペック

利用する上で重要なPC部分のスペックはというと、4コア第六世代Core i7またはi5プロセッサ、最大32GBのDDR4メモリと最大2TBのSSDを搭載。

外部端子

外部端子も充実しており、USB 3.0が4箇所、Mini DisplayPort、SDカードリーダー、ヘッドホン端子となっています。

また今回、新しい入力デバイスとして「Suface Dial」が発表されました。

ディスプレイ内のズームやパレットツールの表示、ページ送りなど様々な用途で利用できそうです。

surface-dial-2

何よりSurface Dialを使っているシーン自体が新鮮でしょう。

価格は2,999ドル~4,199ドルとなっており、現地時間10月26日より予約受付開始となっています。

Surface Dialは99ドルの別売りですが、米マイクロソフトストアでは、Suface Studio本体の購入で特典としてプレゼントされるようです。

Surface Studioのプロモーションビデオ

以下の動画はYouTubeにアップされているSurface Studioのプロモーション動画です。

デスクトップPCとは思えないほど薄く、創造性を掻き立てるような出来栄えとなっています。

Surfaceシリーズは、これまでも「Surface Pro 4」など注目され人気となった製品はありましたが、今回は初のデスクトップ型PC。国内での発売は待たれますが、ユーザーからの期待は大きそうです。

[お知らせ]TechAcademyでは初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。

【最新版OS】SiriがMacに登場！macOS Sierraの正式版がリリース

Appleは、日本時間9月21日未明にMac向け最新OSである「macOS Sierra」をリリースしました。これによってMacでもSiriが利用できるなど多く...

最新記事

【動画あり！】初代からiPhone7 Plusまで歴代のiPhoneを比較

初代iPhoneから最近発売されたばかりのiPhone7までの歴代iPhoneを比較した動画が公開されています。動画を公開した主は、海外で人気のYouT...

最新記事

任天堂の新型ゲーム機「Nintendo Switch」の映像が公開！

任天堂は20日、新型ゲーム機「Nintendo Switch」の映像を、任天堂ホームページ、YouTubeにて公開しています。このNintendo Switch...

最新記事

2016年のベストアプリ！アップルが「今年のベストApp」を発表

2016年のアップルが発表した「今年のベストApp」を紹介していきます。2016年からはランキングではなく、ベストアプリ10選からベストアプリが1本、次点が1本...

最新記事

Facebookの社内SNS「Workplace」が正式リリース

Facebookは、10月10日(アメリカ時間)に企業向けコラボレーションサービス「Workplace」を正式リリースしました。「Workplace」は...

最新記事

【40%OFF】130の技術書が割引セール中！半期に1度のエンジニア応援祭

翔泳社が主催する「Security Oniline Day 2016」「Developers Summit 2016 FUKUOKA」の開催を記念して、電子書籍...

最新記事

あわせてよく読まれている記事

Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説

Visual Studio Code（VSCode）について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。Visual Studio Codeとはエディタのひとつです。機能性や拡張性や開発者コミュニティなどが優れており、使いこなせるようになると実装したい機能を手早くプログラムできるようになりましょう。今回の記事では概要から実際のダウンロード方法まで解説していきます。なお本記事は、TechAcademyのオンラインブートキャンプの内容をもとにしています。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。田島悠介今回は、プログラミングに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Visual Studio Codeについて詳しく説明していくね！大石ゆかりお願いします！目次 Visual Studio Codeとは Visual Studio Codeの特徴 Visual Studio Codeを使うメリット/デメリット Visual Studio Codeの使い方 Visual Studio Codeの料金 Visual Studio Codeの評判 Visual Studio Codeを使うべき人まとめ Visual Studio Codeとは Visual Studio Codeとは、プログラミングを行う時は「エディタ」と呼ばれるソフトウェアのひとつです。エディタとは言わば高機能なメモ帳のようなものです。エディタには多くの種類がありますが、その中でも現在エンジニアの間で最も多く利用されていると言われているのが「Visual Studio Code（ビジュアル・スタジオ・コード）」です。エンジニアの間では略して「VSCode（ブイエスコード）」と呼ばれています。 Visual Studio Codeは単にエディタというだけではなく、プログラミングやシステム開発に関する様々な作業を効率的に行える機能が数多く用意されています。プログラミングを開発するソフトウェア群を「開発環境」と呼びます。 Visual Studio Codeは数多くのプログラミング言語で使用されている主要な開発環境の1つと言えます。 [PR] プログラミングで挫折しない学習方法を動画で公開中Visual Studio Codeの特徴 Visual Studio Codeはマイクロソフト社が開発しているエディタであり以下のような特徴があります。オープンソース誰でも無償で利用できます。 Visual Studio Codeのソースコード自体もGitHubというWebサイトで誰でも閲覧可能な状態で管理されています。多くのオペレーティングシステム（OS）に対応 WindowsやMac、Linuxなど、多くのオペレーティングシステムに対応しています。多くの言語に対応メニューなどの表記を様々な言語に切り替えることが可能です。英語や日本語だけでなく、中国語やフランス語、ドイツ語など多くの言語に対応しています。拡張機能「拡張機能」と呼ばれる仕組みで機能を追加することが出来ます。拡張機能は数多く提供されており、プログラミングの目的に合った拡張機能を組み合わせることで最適な開発環境を構築することができます。その他ソースコードの入力補助（コード補完）や見た目を変えるテーマ、キーボード入力の変更など、多くの機能が提供されています。なお、Visual Studio Codeと名前は似ていますが全く別の製品としてVisual Studioがあります。 Visual StudioはWebやWindowsアプリーケーションなどを構築する統合開発環境です。エディタ機能に加えてシステム開発プロジェクトの管理やアプリの試験、解析などを行う機能が組み込まれています。用途が異なりますので間違えないように注意しましょう。 Visual Studio Codeを使うメリット/デメリット Visual Studio Codeを使うメリット/デメリットについて解説していきます。メリットは開発効率の向上上記のようにVisual Studio Codeは非常に自由度と拡張性が高いエディタであるため、慣れてくるととても作業効率が上がることを実感できます。現在最も多く利用されているエディタだけあり、システム開発で使用されるバージョン管理やUI設計などのソフトウェアとの連携、クラウド環境との接続などをVisual Studio Code上で行うことが出来ます。利用者が多いため、使用方法などについて多くの情報を得られることもメリットの1つです。デメリットは機能を使いこなせない逆にデメリットとして、あまりにも機能が豊富すぎるため、最初はメニュー構成や設定、拡張機能の導入などに戸惑うことも多いと思われます。これらについてはインターネット上で多くの導入事例が提供されているため、自分の目的に合った開発環境を構築する情報を収集すると良いでしょう。また、インターネットから切り離された環境の場合、拡張機能のインストールなどを手動で行う必要があり、やや運用が面倒に感じられるかもしれません。ただ一度開発環境を構築してしまえば常時インターネット接続は必須ではないため、そのような環境でも十分に運用に耐えられることでしょう。 Visual Studio Codeの使い方それでは具体的にVisual Studio Codeの使い方をご説明しましょう。ダウンロード手順 Visual Studio

プログラミング

初心者向け！Visual Studio(Express)の使い方を現役エンジニアが解説

ソフトウェアを開発する際に使用すると大変便利な統合開発環境ですが、今回はその一つであるMicrosoft Visual Studio（ビジュアルスタジオ）の使い方を紹介します。 Visual Studioは通常10万円以上する比較的高価なソフトですが、無料版のCommunityも存在していますので、まずはそちらを体験してみるのがいいでしょう。インストール方法も説明するので、初心者でこれから入門したい方はこれを参考に使ってみてください。なお、今回の説明にはVisual Studio Community 2019 (Windows版)を使用していますが、基本的に今回の内容であればどのVisual Studioでも大した違いはありません。また、日本語にも対応しています。なお本記事は、TechAcademyのオンラインブートキャンプの内容をもとにしています。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。田島悠介今回は、プログラミングに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Visual Studio(Express)の使い方について詳しく説明していくね！大石ゆかりお願いします！目次 Visual Studioとは Visual Studioを使うメリット Visual Studioのインストール Visual Studioでプロジェクトを作成する Visual Studioと一緒に使うと便利なツール Visual Studioとは Visual Studioは様々なプラットフォームのアプリケーションを開発できる総合開発環境です。 Visual Studioを使うと以下のようなアプリケーションを開発できます。 Webアプリケーション Webサーバー側で動作するバックエンドアプリケーションとフロントエンドの開発を両方行うことが可能です。ASP.NETと呼ばれるフレームワークを使用します。クラウドサービス Microsoftのクラウド環境であるAzure上で動作するサービスを開発できます。 Python、Node.jsのサポート Pythonは現在広く利用されているプログラミング言語です。またNode.jsはJavaScriptでサーバーサイドアプリケーションを構築するフレームワークです。これらもVisual Studioではサポートしています。 Windowsアプリケーション WindowsOSで動作するデスクトップアプリケーションを開発できます。スマートフォンのアプリ AndroidとiOS両方のアプリを開発できます。ゲームの開発：Unityという、広く利用されているゲーム開発プラットフォームをサポートしています。マルチプラットフォームサポート Xamarinという技術を使用して、WindowsやAndroid、iOSなど、複数のプラットフォームで動作するアプリケーションを開発できます。このように、とても幅広い開発を行えるのがVisual Studioの特徴です。またVisual Studioは以下のプログラミング言語をサポートしています。 C# バックエンドやWindowsアプリケーションの開発で使用されます。Unityを使用した開発でも用いられます。 C++ Windowsアプリケーションの開発で用いられます。Windows自体もC++で開発されており、Windowsの機能をフルに利用した高速なアプリケーションが開発できます。 HTML、CSS、JavaScript フロントエンドの開発で用いられているプログラミング言語です。その他 VB、F#、SQLなどをサポートしています。 [PR] プログラミングで挫折しない学習方法を動画で公開中Visual Studioを使うメリット Visual Studioは上記のように幅広いプラットフォームに対応しています。むしろ膨大すぎて最初は戸惑ってしまうことでしょう。 Visual Studioを使用すると以下のようなメリットがあります。強力な開発支援機能 Visual Studioは統合開発環境（IDE）と呼ばれる開発に必要なものが一式揃っているプログラミングツールです。アプリケーションのひな形作成、ソースコードを書く時にヒントなどを提示する支援機能、ソースコードのバージョン管理機能など、様々な開発支援機能が備わっています。充実したデバッグツールアプリケーションの開発で大変なのがデバッグです。 Visual Studioでは一般的なステップ実行やブレークポイントなどのデバッグ手法に加え、メモリ使用状況の解析や、遠隔の環境で動作しているアプリケーションのデバッグなど、現代の複雑な実行環境に対応したデバッグを行うツールが多く用意されています。 Windowsネイティブアプリケーションの開発が可能 Windows環境に特化したネイティブアプリケーションを開発するならVisual Studio一択です。 C++やC#を使用した高速なアプリケーションを開発できます。パソコンOSにおけるWindowsのシェアは依然として非常に高く、これからも各種ツールやドライバーなど、Windowsアプリケーションの開発にVisual Studioは用いられることでしょう。 Visual Studioのインストールまずはインストールを行います。 Visual Studio Communityのページにアクセスしましょう。「Visual Studio のダウンロード」と書かれているところをクリックします。するとダイアログ等が出現すると思いますので、そのままダウンロードを行います。ダウンロードしたセットアップファイルを起動すると以下のような画面になります。この中から必要なものにチェックを付けてInstallボタンをクリックするとインストールが行われます。 Webアプリケーションを開発するのであれば「ASP.NET and web development」、Windowsアプリケーションを開発するのであれば「.NET desktop development」にチェックをつけるといいでしょう。 ※Visual Studio Community 2019は、対応するOSがWindows10バージョン1703以上以上となっているので、ご注意ください。 Visual Studio 2019のシステム要件 Visual Studioでプロジェクトを作成する実際にVisual Studioを使ってプロジェクトを作成していきましょう。 Visual Studioを起動すると、サインインが求められます。サインインがなくても無料で使えますが、そのままでは30日で使用できなくなってしまいます。 Microsoftアカウントでサインインしておけばずっと無料で使えますので、素直にサインインしておきましょう。「サインイン」をクリックします。アカウント選択画面が表示されます。アカウントを選択します。「別のアカウントを使用する」をクリックすることで、別のアカウントでサインインすることも可能です。なお、Microsoftアカウントを持っていない場合は、別途作成しておきましょう。次に環境を設定する画面が表示されます。開発設定は「全般」、配色テーマは好きなものを選択すると良いでしょう。エンジニアの間ではダークモードが流行しているため、今回は濃色を選択しました。「Visual Studioの開始」をクリックします。以下のようにスタートページが表示されます。では、早速プロジェクトを作成してみましょう。「新しいプロジェクト」をクリックします。今回はWebアプリケーションを作成します。プロジェクトテンプレートから「ASP.NET Web アプリケーション(.NET Framework)」を選択し、「次へ」をクリックします。プロジェクト名などを設定する画面が表示されます。名前などは任意のものに変更できますが、今回は既定値まま「作成」ボタンをクリックします。どのようなWebアプリケーションを作成するか選択する画面が表示されます。実際の開発現場で多く使われているのはMVCやWebAPI、シングルページアプリケーションです。今回は「MVC」を選択して「作成」ボタンをクリックします。これで無事プロジェクトが作成されました。この状態で基本となるWebアプリケーションのテンプレートが作成されています。早速実行してみましょう。画面上部の「IIS Express(Google Chrome)」と書いてある部分をクリックします。このような画面が表示されれば成功です。みなさんも無償のVisual Studio Communityを使ってアプリケーションを開発してみてくださいね。 Visual Studioと一緒に使うと便利なツール最後にVisual

プログラミング

Photoshopでレイヤーを結合する方法を現役エンジニアが解説【初心者向け】

Photoshopでレイヤーを結合する方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。なお本記事は、TechAcademyのオンラインブートキャンプPhotoshop講座のカリキュラムをもとに執筆しています。田島悠介今回は、Photoshopに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介レイヤーを結合する方法について詳しく説明していくね！大石ゆかりお願いします！目次レイヤーの定義と種類レイヤーを結合する方法全てのレイヤーを結合する方法まとめレイヤーの定義と種類レイヤーとはレイヤーとは、透明なシートに絵を描いて、それを何枚か重ねることで全体の絵を完成させていくイメージで使われる、PhotoShopの基本的なツールです。 PhotoShopでは、デジタルの利点を最大限に活かして、レイヤーごとに画像や文字を編集するのが基本的な方式となります。例えば、こちらの画像では、海の画像とヨットの画像が別々のレイヤで用意してあり、いつでもヨットの表示・非表示を切り替えることができます。レイヤー操作パネルレイヤーは次のようなパネルで操作することができます。 1行が1レイヤとして扱われ、選択中のレイヤ以外はカンバス上でクリックしても反応しませんから、誤操作を気にすることなく決まった画像や被写体の編集に集中することができます。また、目のアイコンをクリックすることで、レイヤーの表示・非表示の切り替えができますので、２つの被写体が重なっている部分でも簡単に編集が可能です。レイヤーの種類 PhotoShopのレイヤーには様々な種類があります。代表的なレイヤーをこちらの表でご確認ください。レイヤーの種類説明画像レイヤー（通常レイヤー）画像を編集するための最も基本的なレイヤー背景レイヤー画像に対して1つだけ設定できる背景用のレイヤー調整レイヤーそれ自身は見た目の情報を持たず、他の画像に対する視覚調整効果を保持したレイヤー文字レイヤー文字情報を表示させるためのレイヤー。PhotoShopでは、文字は画像と独立したレイヤーとして扱いますシェイプレイヤー図形などのシェイプ情報を持ったレイヤーレイヤ構成のサンプル冒頭のサンプル画像は、4つのレイヤーで構成されています。こちらの絵で、どんなレイヤ構成になっているか確認してみましょう。海の画像とヨットの画像は別のレイヤで管理されており、ヨットのレイヤーを海のレイヤーの上にオーバーレイさせています。ヨットの絵はわかりやすくするために背景に色がついていますが、実際は背景が透明のため、下の海の画像が見えるようになっています。調整レイヤは、指定領域だけ海の画像の視覚効果を暗めの色で付与しています。実際は、レイヤそのものはすべて透明で、見た目の情報を持ちません。画像の上にオーバーレイさせた時だけ、画像に非破壊的に視覚効果を付与させることができる、特殊なレイヤです。文字レイヤは、見た目の通り、文字を管理するためのレイヤです。わかりやすく色を付けておきましたが、実際は白に近い色です。 [PR] プログラミングで挫折しない学習方法を動画で公開中レイヤーを結合する方法レイヤー結合の方法レイヤーは、以下の方法で結合できます。 PhotoShopにおけるレイヤー結合操作レイヤーを複数選択する　＞　右クリック　＞　レイヤーを結合レイヤーを複数選択するには、レイヤーパネル上で、Ctrlキーを押しながらレイヤーの行を複数クリックします。レイヤー結合は、絵が描かれた複数枚の透明なシートを接着剤で1つにまとめるイメージですので、レイヤーの数が減ってスッキリします。レイヤー結合の注意点レイヤーは、結合すると元に戻せませんので、複数レイヤを一つの画像にまとめて問題ない場合に結合操作を実行しましょう。また、結合時に「非表示状態」の（目のアイコンが表示されていない）レイヤーは、結合後に情報が消失してしまいますので、十分注意してください。レイヤーのリンク 2つ以上のレイヤーを同時に移動させたい、位置関係を維持して編集したい場合には、「レイヤーのリンク」コマンドを使いましょう。操作方法は、「レイヤーを結合」とほとんど変わりません。右クリックメニューで「レイヤーのリンク」を選択すればOKです。こちらは目的の作業が完了した後に、リンク状態を解除して元に戻すことができます。全てのレイヤーを結合する方法画像の統合作業が全て完了して、レイヤーをすべて結合して一つの画像としてまとめたい場合には、「画像の統合」を実行します。 PhotoShopにおける画像の統合操作任意のレイヤーを右クリック　＞　画像を統合この操作により、すべてのレイヤーが一つの背景レイヤーとして統合されます。まとめ PhotoShopを使いこなす上で、レイヤーの操作は必須となります。結合時にレイヤーが消失してしまわないよう、気を付けて操作を実施していきましょう。監修してくれたメンター寺谷文宏 ( Teratani Fumihiro ) WEBアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。万能なエンジニアとしてWEBデザインにも詳しく、WEB素材をIllustratorやPhotoshopにより制作することができます。 TechAcademyではフロントエンド、Javaコースを担当。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインブートキャンプ Photoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。

Photoshop

プログラミングに使える！フリーのテキストエディタ15選

プログラミングをこれから勉強する場合、「どのエディタを使ったらいいの？」という疑問を持つかもしれません。そこで、初心者にもおすすめのテキストエディタをピックアップしてみました。また、テキストエディタ以外に統合開発環境も一緒に紹介します。 Windows、Macそれぞれに使えるエディタで、できるだけ日本語に対応したものを選んでいます。紹介するテキストエディタを比較して自分に合ったものを探してみてください。そもそもテキストエディタとは何なのかよく分からないという人でも知っておいて損は無いでしょう。なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。目次テキストエディタとは TeraPad(テラパッド) サクラエディタ Atom Notepad++（ノートパッドプラスプラス） CotEditor mi Sublime Text Brackets 秀丸エディタ Liveweave mou Visual Studio Xcode Eclipse vi(vim) / Emacs Visual S Visual Studio Code テキストエディタとはテキストエディタとは、パソコン上でメモやプログラムを書くことのできるソフトです。基本的には無料のソフトが多く、Windowsでは「メモ帳」、Macでは「テキストエディット」という名前のアプリケーションがデフォルトで入っているかと思います。もちろんそのアプリケーションを使ってプログラミングをしたり、執筆作業をすることもできますが、プログラミング用のテキストエディタを使うことで便利な機能が多く効率的に開発作業を行うことができるのです。外部ツールを取り入れることができたり、画面を分割して複数のファイルを同時に確認することができるなど様々な機能が備わっています。フォントや色なども自分好みに合わせることができるので、プログラミングをする人は専用のテキストエディタをインストールすることをおすすめします。今回紹介するテキストエディタは、利用する人も多く人気のソフトが多いので、まだ使ったことがない人はぜひ選ぶ上での検討材料にしてもらえればと思います。 [PR] プログラミングで挫折しない学習方法を動画で公開中1. TeraPad（テラパッド） Windows用のテキストエディタです。国産のエディタですのでインタフェースが日本語です。シンプルさを特徴としており複雑な設定が必要ありません。ソースコードの色分け機能などが付いており初心者でも安心して使えます。英語のエディタでは分かりにくく、すべて日本語であってほしいという人にはおすすめです。機能面はそこまで充実してるとは言えませんが、使い勝手は良いでしょう。 TeraPadの使い方 2. サクラエディタ Windows用のテキストエディタです。オープンソースでだれでもソースコードを編集できるため、多くの開発者によって機能が追加されてきました。こちらも国産エディタなのでインタフェースは全て日本語です。複数のファイルから同時に検索できるGrep機能や、キーボードマクロの登録などが可能で、豊富なカスタマイズ機能を持っています。サクラエディタの使い方 3. Atom 2014年にGitHubが公開したテキストエディタになります。とにかく便利なプラグインが多く、他のエディタを使っていたエンジニアもAtomに乗り換えた事例をよく耳にします。エディタのインターフェースが非常に見やすく、機能追加も無料でできるので初心者の方でもすぐ使い慣れるでしょう。Windows、Mac OS X、Linuxで利用できるので、誰でも手軽に使えます。特にテキストエディタを使ったことがないという人は、Atomを使うところから始めて見ても良いかもしれませんね。 Atomの使い方 4. Notepad++（ノートパッドプラスプラス）「メモ帳」に替わるエディタを目指して開発されたWindows用のエディタです。開発元は海外ですが、様々な言語に対応しており、日本語でも使うことができます。動作が軽快で、他のエディタよりもデフォルトで多くのプログラミング言語の色付けをサポートしています。 Notepad++の使い方 5. CotEditor（コットエディター） Mac用のテキストエディタです。国産のためインタフェースがすべて日本語で使えます。とてもシンプルで初心者でも使いやすく、様々なプログラミング言語の色付けも行ってくれます。Mac のテキストエディタの中でも人気がある定番エディタとなっています。軽量のアプリなので、PC自体の容量も特に気にせず利用できると思います。 CotEditorの使い方 6. mi（ミ） Mac用のテキストエディタです。国産のためインタフェースが日本語です。自動的に関数の一覧表や、ファイルの一覧表などを作成してくれるプログラマに嬉しい機能が付いています。また、エディタの背景画像を設定できるので見た目にこだわりたい方にもおすすめです。UTF-8といった文字コードも画面の上から簡単に変えることができます。 miの使い方 7. Sublime Text（サブライムテキスト） Windows、Mac、Linux対応のテキストエディタです。インタフェースは英語ですが、日本語の入力は可能です。使い勝手やデザインが良く、最近特に注目されています。シンタックスカラーリングや、ソースコード全体のマップ表示など便利な機能も揃っています。有料ソフトなのですが、現在はバージョン3の評価版が無料で無制限に使えます。気に入ったらそのまま購入することも可能です。エディタはタブの表示で使うこともできます。プラグイン機能も充実しており、使えば使うほど自分用にカスタマイズすることができます。 Sublime Textの使い方【初心者向け】 8. Brackets Bracketsは、Adobeが提供しているエディタで、クイックエディット機能など拡張性に優れており素早くコーディングすることができます。クイックエディット機能の例を紹介すると、HTMLファイル上である要素のCSSを編集したいと思ったらCSSファイルに移らずにその場で編集することができます。HTMLファイル上にCSSを書いていくのではなく、CSSファイルをポップオーバーとして表示され、選択した要素のスタイルのみ編集することができるのです。また、HTML/CSSだけでなくJavaScriptのコードヒントも質が高いので、まだプログラミングを始めたばかりでも詰まらずにコーディングすることができるでしょう。 Brackets 9. 秀丸エディタ Windows用の有料エディタになります。より作業を効率化させる機能が多く搭載されており、例えばマクロ機能やコードの折りたたみ機能など複雑なソースコードでもシンプルに見せることができるでしょう。タグの色分けも細かく行えるので、複数人で開発しても読みやすいコードを書くことができるかと思います。学生は無料で利用できるので、Windowsユーザーは試してみても良いかもしれませんね。秀丸エディタ 10. Liveweave Liveweaveは、HTML5、CSS3、JavaScriptをリアルタイムで確認できるテキストエディタです。自分で編集しながらその場で確認でき、かつ軽量なので、スペックの低いPCでも手軽に利用できるのが特徴です。 HTML/CSS、JavaScriptのみの対応ですが、静的ページを作成する際には便利でしょう。初心者の方は自分の勉強にも役立ててみてください。簡単なソースコードの確認などに向いています。 Liveweave 11. mou マークダウンで書くことができるMac専用のエディタです。記述用とプレビュー用の2画面をリアルタイムで確認することができるので、非常に便利でしょう。 Macユーザーしか利用できないアプリですが、マークダウンで書くことに慣れている人にはおすすめのエディタになるはずです。 mou 12. Visual Studio（ビジュアルスタジオ） Microsoft が提供するWindows用の統合開発環境です。テキストエディタも内部に含んでおり、Windows用のアプリケーションを開発するときや、Xbox 360 用のゲーム、Windows Phone 用のアプリケーションを開発するときなどに使います。多言語に対応しており日本語でも使うことができます。 WindowsやXbox360用のプログラムを開発したい方はこのソフトに慣れておくと良いでしょう。いくつかのエディションがあり、Expressエディションが無料になっています。また、Microsoftはオープンソースの無料IDEである、Visual Studio Codeを公開しています。 Visual StudioとVisual Studio Codeの差は、利用者数全体の割合からすると徐々に縮まってきています。そうはいっても、Visual Studioの方が、ソースコードの管理、バグトラッカー、デプロイメントツール等全部入りとも言える機能を保有しています。そういう意味でも、.Net開発者にとっては、単なるIDEというわけではなく、これ以上無い有益なソリューションと言えます。 Visual Studioの使い方 13. Xcode（エックスコード） Appleが提供するMac用の統合開発環境です。iPhone や iPad、Mac用のアプリ開発に必要な機能がそろっているため、 iPhone アプリを開発したい方は、使い方を覚えて損はないでしょう。もちろん、その他のアプリケーションを開発するためにも使えます。ただし、インタフェースは英語です。 iPhoneアプリ上に地図を表示したい、ボタンを表示したいといった際もソースコードを書く必要はなく、それ用のキットが多く揃っているので、簡単に設置することができます。エラー箇所も指示してくれるので、初心者でもスムーズに開発を進められるはずです。 Xcodeのインストール方法 14. Eclipse（エクリプス） IBMによって開発された、様々な用途に使用できるオープンソースの統合開発環境です。Windows、Mac、Linuxなど多くのOSに対応しています。 Androidアプリを開発するときには、Google が提供するADT Bundleという開発セットの中に入っているEclipseを使うこともあります。Androidアプリを開発したい方はEclipseの操作に慣れておくと良いでしょう。インタフェースは英語ですが日本語化も可能です。大規模なアプリケーションの開発にも向いているので、ファイル構造が複雑になっても操作しやすいでしょう。 Eclipseのインストール方法 15. vi(vim) / Emacs つぎに、viとEmacsを紹介します。こちらは主に CUI 環境で使われるエディタです。Linuxユーザやサーバエンジニアによって広く利用されています。 GUI のエディタに慣れたユーザにとってはキー操作が異なり取っ付きづらい部分もありますが、サーバの設定をしたりLinuxの操作をしたい方は慣れておくと良いでしょう。もちろんプログラミングにも使用できます。 GNU Emacs ※ viは多くのLinuxディストリビューションで最初から使用できます 16.

プログラミング

今年のトレンド！2016年最も売れたフォント、トップ50を集めてみた

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。また、本記事は、Doru Ciobanu氏によって投稿されました。タイポグラフィは、独自の世界観、テクニック、統一感を組み合わせたアートです。素晴らしいデザインには、素晴らしいタイポグラフィがあります。 Webデザインまたは出版物のデザインでも、パンフレットやユーザーインターフェースのデザインでも、ロゴのデザインでも、プロジェクトを成功させるために重要な鍵となるものの1つはフォントです。フォント、色、その他デザインをどのように組み合わせるかという選択が、成功と失敗の分岐点となります。こうした細部に十分な注意を払わないがために、優れた製品を生み出すために費やした全ての努力が無駄になることもあります。しかし幸いなことに、優れたタイポグラフィのためのガイドとなるリソースは、豊富に存在しています。そして、これから紹介するのは、2016年に最も売れた50のフォントです。 1. FF DIN デザイナー：Albert-Jan Pool デザインされた年：1995 発行者：FontFont FF Dinは、1995年から2009年にかけて、オランダのデザイナーAlbert-Jan Poolｚ氏によって制作されたフォントです。FF Dinには、20のウェイト（フォントの太さ）があります。編集、出版物、広告、パッケージ、ブランディング、クリエイティブ産業（creative industries：知的財産権に関わるデザイン）、ポスター、看板、Webや画面の設計に適しています。なお、キリル文字とギリシャ語の書記体系については、サポートが限られています。 2. Brandon Grotesque デザイナー：Hannes vonDöhren デザインされた年：2010 発行者：HVD Fonts Brandon Grotesqueは、6つのウェイトとそれに対応する6つのイタリック体から成る、有名なサンセリフのフォントです。このフォントは、可読性を高めるために光学的な修正を加えた幾何学的形状から、インスピレーションを受けています。 Brandon Grotesqueは機能的かつエレガントなフォントです。ウェイトの太さをthinで色をブラックにすると、展示デザインに適しています。 Brandon Grotesqueは、洗練されたプロフェッショナルな印象を与えるデザインを生み出すには良い選択です。また、西ヨーロッパ言語だけでなく、中欧および東ヨーロッパ言語をサポートする拡張文字のセットもあります。 [PR] プログラミングで挫折しない学習方法を動画で公開中3. Century Gothic デザイナー：Monotype Design Studio　Sol Hess　Morris Fuller Benton デザインされた年：1990-1995-2007 発行者：Monotype Century Gothicは、Futuraフォントの競合他社の2つの書体から派生したフォントですが、Futuraフォントの影響も強く受けています。軽くて広々とした印象の書体であり、クリーンな縁取りを備えた、細部まで完璧なフォントです。見出しや大きな看板のデザインには理想的です。 4. Proxima Nova デザイナー：Mark Simonson デザインされた年：2005 発行者：Mark Simonson Proxima Novaのフォントファミリーは、有名なProxima Sansフォントの完全な復古版です。OpenTypeフォント機能は48個に拡張されました。 3つの幅には、それぞれ16のフォントが対応しています。人間的な比率と幾何学的なデザインを組み合わせた、スタイリッシュなフォントです。ほとんどのラテン語系言語の文字をサポートしています。 5. Avenir デザイナー：Adrian Frutiger デザインされた年：1988 発行者：Linotype Avenirも、Futuraフォントの影響を受けたフォントですが、幾何学的なデザインを取り入れたフォントではありません。垂直方向の文字が、水平方向の文字とアセンダ（アルファベット文字において、標準的な高さのx文字よりも背の高いb、fなどの文字の、上に突き出た部分）よりも太い幅になっているデザインです。可読性が重視されるテキストに最適です。 6. Helvetica Neue デザイナー：Edouard Hoffmann デザインの日付：1983 発行者：Linotype Helveticaは世界で最も人気のある書体の1つであり、マーケティングが成功した例です。このフォントファミリーは51種類のウェイトから構成されています。古典的なサンセリフのフォントであり、時代を超えたニュートラルなデザインです。あらゆるコミュニケーションや情報媒体に適したデザインです。 7. Avenir Next Pro デザイナー：Adrian Frutiger　Akira Kobayashi デザインされた年：2004～2007 発行者：Linotype Avenirファミリーは、これまでに作成されたフォントファミリーの中で最も優れたものの1つですが、画面上での表示の問題があったため、これを解決するために代替フォントのAvenir Nextが開発されました。 32種類のフォントから構成されています。：それぞれに8種類のウェイトがあり、ローマ字とイタリックに対応しています。また2種類の幅を選択できます。グリフは、小文字と同じ高さの大文字、下付き文字、上付き文字、合字を含むように拡張されました。 8. Isidora デザイナー：Enrique Hernandez デザインされた年：2016 発行者：Latinotype Isidoraは、機能性に重点を置いて開発された、現代的な幾何学的フォントです。表現力豊かでフレンドリーな印象ですが、合理性を兼ね備えたフォントでもあります。 Isidoraは28種類のフォントから構成されていて、サブファミリーフォントとして、7ウェイトの2つのフォントがあります。ロゴ、ブランディング、見出し、パッケージ、Web上での利用、出版物に最適です。複数の言語をサポートしているユニバーサルデザインフォントです。 9. Sagona デザイナー：Rene Bieder デザインされた年：2016 発行者：Rene Bieder 力強いセリフ体を特徴とするフォントです。小さな文字サイズのテキストと見出しの両方に使用できる汎用の書体です。このフォントファミリーはイタリック体に対応していて、9つのウェイトがあります。 OpenTypeフォントの機能として、代替グリフ、合字、オールドスタイル数字などが幅広くサポートされています。 10. Trade Gothic デザイナー：Jackson Burke デザインされた年：1948 発行者：Linotype Trade Gothicは曲線的デザインのサンセリフ体のフォントです。サンセリフ体のフォント特有の厳密さを破っています。 Trade

Webデザイン

HTMLの書き出しコーディングが不要なデザインツールSTUDIOの使い方を現役エンジニアが解説【初心者向け】

HTMLの書き出しコーディングが不要なデザインツールSTUDIOの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 STUDIOの使い方について詳しく説明していくね！大石ゆかりお願いします！目次デザインツール「STUDIO」とは STUDIOの活用場面 STUDIOを使ってみようデザインツール「STUDIO」とは STUDIOとは、ホームページ作成サービスの一つです。ホームページの作成には、webの概念やサーバーの準備、プログラミングの知識が必要となるものの、初心者でも見た目にこだわったwebサイトを作ることができることがSTUDIOの特徴です。このSTUDIOは、東京都渋谷区のSTUDIO株式会社という日本の会社がサービス提供をしています。会社の設立自体は２０１６年と比較的新しい会社です。 slack,Facebook,Twitter,youtubeなどでも情報発信をしており、サービス・機能の使い方を詳しく説明しているため、評判は高いといえます。ホームページ作成サービスにはjimdoやwix、ペライチなどがあり、これらはどれもプログラミングの初心者でもwebサイトが簡単に作れるようになっています。そして、その中でもSTUDIOはデザイン的な編集の自由度が高く、他のホームページ作成サービスとは一線を画しているといえるほどデザイン性に優れているといえるでしょう。 [PR] プログラミングで挫折しない学習方法を動画で公開中STUDIOの活用場面デザイン性にこだわったwebサイトを作りたい場合に適しています。おしゃれな企業イメージのあるアパレル関係や綺麗な画像により商品を目立たせたいwebサイトなどでは使いやすいサービスです。また、CSSを勉強したい場合にもUIが使いやすくなっているため、感覚的に覚えていくことが可能です。 position、padding、margin、width、hight、borderなどが、マウス操作で感覚的に任意のサイズや表示にすることができるため、「デザインを細かく調整したい」「他のホームページ作成サービスの配置や構成が気に入らない」場合には活用したいツールです。ペラサイトを作りたい場合に活用する、adobeXDなどのようにデザインカンプの作成用といった方法で利用可能です。また、そのままweb上にアップすることもできるため、作業時間の効率化が図れます。ブラウザ上で編集することから、ダウンロードの必要もなくwindowsとMacを選ぶことなく利用できる点もメリットだといえます。 STUDIOを使ってみよう料金プランはに無料プランがあるため、アドレスを登録するだけで個人的な利用が可能です。デザイン的な自由度はあるため、自身で使いたい画像を前もって用意しておくとすぐに加工をすることが出来ます。また、画像を持っていなくてもテンプレートがあるため、その画像を利用することもできるでしょうテンプレートはボタンやテキスト文字などの配置がされており、これらを自由に変更することが可能です。テキストなどが入ったボックスはマージン、パディング、横幅、縦幅、角丸、透明度などの編集もできます。また、画像は明るさやコントラスト、鮮やかさ、モノクロ、セピア、ぼかしなどを編集ができ、これらもマウス操作だけで好みのものを選択できるようになります。さらに、お問い合わせフォームも特別に作る必要はなく、送信先を編集するだけで利用可能です。レスポンシブにも自動で対応しているため、すぐに公開することが可能です。無料プランの場合はサブドメインでの公開設定となり、末尾に.studio.designが付与されます。しかし、BASICプランの場合でも月1000円程度で独自ドメインを設定することができるため、とても利用しやすいサービスだといえるでしょう。執筆してくれたメンター木村勇土 TechAcademyの現役メンター。現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。 WordPressを中心とした自社のWebサイトの修正などを行なっている。大石ゆかりデザインツールSTUDIOの使い方がどういったものかよく分かったので、良かったです！田島悠介ゆかりちゃん、これからも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

HTML

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

マイクロソフト、最薄レベルのデスクトップPC「Surface Studio」を発表