Python

Pythonでデスクトップアプリを開発する方法を現役エンジニアが解説【初心者向け】

初心者向けにPythonでデスクトップアプリを開発する方法について現役エンジニアが解説しています。デスクトップアプリとはパソコンのデスクトップで動作するソフトウェアです。Python標準のtkinterや他にPyGObject、PyQt、wxPythonなどがあります。

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

Pythonでデスクトップアプリを開発する方法について解説します。

そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。

今回は、Pythonに関する内容だね！

どういう内容でしょうか？

Pythonでデスクトップアプリを開発する方法について詳しく説明していくね！

お願いします！

デスクトップアプリとは

デスクトップアプリとは、パソコンのデスクトップ上で動作するソフトウェアです。

GUI(Graphical User Interface)アプリとほぼ同義で、ユーザはウィンドウやアイコンをマウスで操作して、コンピュータを操作します。コンピュータも画像(ウィンドウやアイコン)を通じて、操作結果や状態をユーザに通知します。

対義語はコンソールアプリ、CLI(Command Line Interface)アプリで、ユーザはキーボードでの文字入力を通じ、コンピュータを操作します。コンピュータもコンソールでの文字表示を通じて、操作結果や状態をユーザに通知します。

デスクトップアプリは操作が直感的で、(ウィンドウやアイコンの設計が適切であれば)初めて操作する人でも使いこなすことができます。

一方、コンソールアプリを使うには、コマンドやオプションを把握しなければなりませんが、習熟すれば効率的に操作でき、自動化や遠隔地からの操作にも適しています。

Pythonでデスクトップアプリを作れるライブラリ4選

一般にコンソールアプリと比較し、デスクトップアプリのプログラミングは複雑になりがちです。これはウィンドウやボタンの配置、ユーザがボタンを押した際の画面遷移など、考慮する要素が多くなるためです。

デスクトップアプリ作成用のライブラリを活用すると、コーディングが容易になり、開発効率の向上、バグの削減に寄与します。ライブラリによってはテーマの切り替え機能を持つものもあり、デスクトップアプリの見た目や操作感を簡単に変更できます。

tkinter

Pythonの標準ライブラリなので、追加インストール不要で使えます。機能面では他のライブラリに及ばない部分がありますが、Pythonのインストール済環境であれば、ほぼ確実に動作するのが利点です。

以下3つのライブラリはPython標準ライブラリでないので、pipによる追加インストールが必要です。

PyGObject

PyGObjectは、GTK, GStreamer, WebKitGTK, GLib, GIOといったGUIライブラリのインターフェースとなるものです。GNOMEデスクトップ環境をターゲットにしている場合に適した選択肢です。

PyQt

PyQtは、QtというGUIライブラリのPython版です。

Qtはクロスプラットフォームのライブラリなので、Windows, Linux, Macなど環境を選ばずに動作するデスクトップアプリに向きます。

wxPython

wxPythonはwxWidgetsというGUIライブラリのPython版です。wxPythonもクロスプラットフォームのライブラリで、Qtと同様に複数の環境で動作します。

その他GUIライブラリ

他にも多数のGUIライブラリがあり、Python GUIプログラミングのページで紹介されています。

[PR] 未経験からWebエンジニアを目指す方法とは

監修してくれたメンター

橋本紘希

システムインテグレータ企業勤務のシステムエンジニア。

開発実績: Javaプログラムを用いた業務用Webアプリケーションや、基幹システム用バッチアプリケーションなどの設計構築試験。

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

Pythonでif文を一行で記述する方法を現役エンジニアが解説【初心者向け】

Pythonでif文を一行で記述する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説します。 &...

Python

Pythonのjoin関数の使い方を現役エンジニアが解説【初心者向け】

Pythonのjoin関数の使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそ...

Python

NumPyの関数reshapeの使い方を現役エンジニアが解説【初心者向け】

NumPyの関数reshapeの使い方について解説します。そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読...

Python

PythonのABCモジュールで抽象クラスを作る方法【初心者向け】

PythonのABCモジュールで抽象クラスを作る方法について解説します。そもそもPythonについてよく分からないという方は、Pythonとは何なのか解...

Python

Pythonで変数を使用する方法と使い方を現役エンジニアが解説【初心者向け】

Pythonで変数を使用する方法と使い方について解説します。そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を...

Python

PythonでBase64によるエンコード・デコードの方法を現役エンジニアが解説【初心者向け】

PythonでBase64によるエンコード・デコードの方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説...

Python

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

【未来のUIデザイナーへ！】初心者のためのプロトタイピングガイド

本稿は、本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。プロトタイピングの概念そのものは、インターネットの成立以前から存在していました。典型的な例として、新しい製品を開発をする人々は最初に製品を組み立て、次に製品が期待した通りに作動するか試します。最初のバージョンで特許を取得して、潜在的な投資家に製品を見せることもあるかもしれません。もし投資家が独自の生産ラインの設備を利用できるとしたら(例えば既存の会社で働いているなどの理由から)、製造可能なレベルのモデルが完成するまで、製品の開発が進められて、バグの修正も行われます。昔のデモディスクを覚えていますか？機能の制限されたプログラムが入っていたり、ゲームの初歩レベルあるいはゲームが2つだけ入っているようなディスクのことです。プロトタイプはデモディスクと似ている点が多くありますが、よりシンプルでさえあります。 Webサイトやアプリのプロトタイプを作成するのは、期待した通りに作動するか確かめるためです。プロトタイプの目的は、将来の顧客の獲得というよりも、より良い製品を作るのに役立てることです。 Webサイトやアプリのプロトタイプは、製品が期待通りに作動するか確かめるために作成します。またクライアントや潜在的な投資家に製品の作動を示すこともできます。最近では、Webとモバイルアプリ用のプロトタイプ作成アプリが多数登場しています。最近リリースされたデザインツールのAdobe Experience Designerは、Webとモバイルに対応したデザインアプリとしての機能と、プロトタイプ作成用のアプリとしての機能が融合されています。 Adobe社の知名度とプロ向け製品における市場シェアを考えれば、多くの人々が今まで以上にプロトタイプを実践し始めているのも当然かもしれません。今回の記事は初心者向けのガイドです。デザイン業界でどのような経験を積んできたかにかかわらず(あるいは未経験でも)、プロトタイプを日常的に使い始めた方向けに書いています。このガイドでは何よりもまず基本的な原則を説明します。もちろんその後に発展的な情報として、役立つツールやアプリをリンクとともにご案内します。ワイヤーフレーム＆モックアップ VS. プロトタイプデザイナーとしての経験が豊富な方は、すでにワイヤーフレームやモックアップを編集で利用しているかもしれません。ただ、これらは必ずしもプロトタイプとはいえません。ワイヤーフレームやモックアップで問題なのは静的なことです。製品の機能についての多くの情報を伝えることができないのです。このため、製品の動作性についてクライアントやデベロッパーに誤解を与えるおそれもあります。こうした理由から、プロトタイプとは一般的に、何かインタラクティブな要素を持つものと定義できます。ただし、例外的に静的なものにもプロトタイプと見なせるものもあります。例えば、概念的なプロトタイプや、詳細に作成された設計書などです。重要なのは単にインタラクティブであることよりも、製品に期待される機能について情報を伝えられることだからです。それでもやはり、ワイヤーフレームやモックアップは単にプロトタイプの作成によく使われているという理由だけで、誰も捨てようとはしません。いつプロトタイプが必要になるのか？何かがどのように作動するかを示す必要があるときにはいつでも、プロトタイプが必要です。わかりやすい例は、Webアプリやモバイルアプリです。アプリは、モックアップでは簡単に見たり予測したりできない機能を数多く持っている傾向があります。コンテンツ中心型の静的なWebサイトでさえプロトタイプを必要とするかもしれません。 1つの理由として例を挙げると、私は以前クライアントにシンプルなビジネスサイトのモックアップを見せたときに、クライアントから「トップページにある「概要」や「サービス」などをクリックしたら別のページに移行するのか？」、「コンタクトフォームでユーザーが「送信」をクリックしたら、私はメールを受信することになるのか？」と聞かれたことがあります。シンプルなタスクでさえ不確実性を伴うことがあり、プロトタイプは当て推量を解消するのに役立ちます。また、簡単なブラウジングの操作さえ、ユーザーやクライアントによってはわかりづらくて大変な作業となりえます。プロトタイプがあればネットワークからサインオフするときにも、当て推量する手間を省くことができます。加えて、プロトタイプはユーザーテストに役立ちます。ユーザーテストを行うときには、初期段階からプロジェクトのシミュレーションを始めるのがベストです。作業がほとんど完了した後に大きな変更をしなければならない事態は避けたいところです。 [PR] 未経験からWebエンジニアを目指す方法とは4種類のプロトタイププロトタイピングを始める前に、どの種類を使うか決めます。ほとんどのデザイナーたちが実践しているように、どのようなプロジェクトでも複数の種類を組み合わせて使うことができます。 1. 概念的プロトタイプこのプロトタイプは、形の上では完成した製品と全く似ていません。ここでインターフェースのディテールとレイアウトは重要ではありません。インタラクションとプロセスだけに集中します。全てのプロトタイプの目的は製品の動作性を示すことです。その意味で、このプロトタイピングは原始的な形だといえます。機能性だけがテーマであり、形は問題となりません。この段階では、フローチャート、ポストイットのメモ、PowerPointのプレゼンテーション、アイコンでプロセスを説明するビデオを使ったり、身振り手振りを加えてカメラに向かって録音してもいいでしょう。要点を伝えることができれば何でもいいのです。概念的プロトタイプはプロジェクトの初期段階で使われます。プロジェクトにはまだ名前がないかもしれません。アプリやWebサイトもアイデアの段階なので、「こんな感じで作動すると思う。」と話しているかもしれません。 2. ローファイプロトタイプローファイプロトタイプでは、レイアウトやスクリーンのサイズなど具体的な対象を扱うようになります。このプロトタイプは、作られるのも破棄されるのもサイクルが速いです。ローファイプロトタイプの目的は、あなたとクライアントが基本的な部分に満足できるまで、試行錯誤を最速で繰り返すためのものです。だからプロトタイプに愛着を持つべきではありません。ほとんどのプロトタイプは使い捨てであり、それこそが長所です。「ローファイプロトタイプ」は「ワイヤーフレーム」とよく置き換えることができます。この段階では紙に書いて行うこともよくあります。アプリでローファイプロトタイプを作成するときには、他のスクリーンへのリンクやコメントの機能など、基本的なプロトタイピングの機能を備えているものを使うことがおすすめです。ワイヤーフレームのアプリはインターネットとの連携が容易であるというメリットがありますが、やや動きが遅いことも多いです。概念的プロトタイプと同じくプロジェクトの初期段階で使われますが、ビジネスモデルやプロジェクト名はすでに存在している段階でしょう。上手くいくと確信できるものが持てるまで、頭の中で思いつく無数のアイデアをえり分ける時です。 3. ミディアムファイプロトタイプ段階によっては、ローファイプロトタイプでは要点を把握しにくい一方、ハイファイプロトタイプでは十分過ぎることがあります。スタイルガイドを完全には作成していなかったり、まだグラフィカルアセットを全て作り終えていない段階です。ミディアムファイプロトタイプは、このようなデザインの初期～中間の段階で使うことができます。インタラクションのシミュレーション機能を持つプロトタイピング作成アプリによって作られることも多いです。CSSのフレームワークを利用して、HTMLとCSSによって構築することもできます。 BootstrapとFoundationが、現在存在しているプロトタイピングのツールの中ではおそらく主流です。有名ブランドのイメージがあればそれを使うべきですが、ストックイメージでも足りるでしょう。ストックタイプのUIエレメントは、模作のインターフェイスをより速く構築するために使われます。プロトタイピング作成アプリの多くは、これらのUIエレメントのライブラリを持つことが多く、作業の高速化に役立ちます。ミディアムファイプロトタイプは、リテラル思考型(Literal thinker:全体的なイメージよりも、具体的なステップや言葉の定義から考えるような人)で外観や動作の近似を見たいと思うような人に向いています。彼らにとっては、「未完成」のヘッダーの方が、Webサイトのヘッダーに全く見えないようなスケッチ風の代物よりも、まだ耐えられます。リテラル思考のクライアントには、ワイヤーフレームで素早く考えた初期のアイデアを見せる必要はないでしょう。ミディアムファイプロトタイプの段階で見せる方が、彼らに方向性を分かってもらいやすいです。 4. ハイファイプロトタイプこの段階までプロジェクトが進むと、全てのスクリーンのモックアップが完成していて、全てが立派なものになっているでしょう。製品をバックエンドのコードと統合して、人々に製品の動作性を見てもらう時です。ハイファイプロトタイプは通常、デザインに関する最終的な合意をクライアントと結ぶために使われます。ただのPSDファイルを送るだけれはなく、インタラクティブなものを提示しなければなりません。 2つの方法のうちいずれかによって行われます。1つの方法では、静的なHTMLとCSSを利用して、一部をインタラクティブな外観に仕上げます。もう1つの方法では、画像やPSDのファイル形式をインポートできるアプリを利用して、擬似インタラクティブな特性を加えることで完成品のアプリ（製品）の機能を模倣します。アプリによっては、プロトタイプのデモをWeb上(またはモバイルデバイス上)で行うことも可能です。プロトタイピングのメソッドプロトタイプの主な種類を見たところで、次にプロトタイプを実際に作るためのツールをご紹介します。基本的な使い方も含めてすでにほとんどご紹介していますが、さらに詳細を見てみましょう。あなた自身とクライアント双方にとって適合するメソッドを選びましょう。ビデオまたはプレゼンテーションのプロトタイプこれらは具体的な作業がなされる前に、アイデアを売るためによく使われます。そのため通常は、潜在的な投資家を意識したものです。クライアント向けにも使えますが、他の代替手段の方が効率的なコミュニケーションを図るには優れていることも多いです。アドバンテージは人によって異なるでしょう。ビデオとプレゼンテーションのプロトタイプで、利益率を上げるために作られたものは商業型の公式に従います。聴き手が共感できる問題を提示する。あなたの製品によってその問題がどのように解決されるかデモを示す。 (オプションとして)会社のマスコットをデジタル形式で表現して、キャッチフレーズを叫ばせながら楽しそうにダンスさせる。これらのプロトタイプの中にはアイコン、テキスト、イラストレーションを使うだけで完成するものもあります。他にはアニメーションを利用して、要点を説明するのに動きを使うこともあるでしょう。あなたのアイデアを売ることができれば、正しく使いこなせているといえます。ビデオのプロトタイプと紙のプロトタイピングを組み合わせた良い例をご紹介します。Video Prototype for Mobile Cooking App : Youtube動画よりワイヤーフレームワイヤーフレームは紙面上かアプリにおいて作成できます。ワイヤーフレームは通常ローファイプロトタイプと見なされていますが、時間をかければミディアムファイプロトタイプにアップグレードすることも可能です。もっとも労力をかけるだけの価値はほとんどありませんが。ワイヤーフレームは、作成されるのも破棄されるのも速いです。紙面上でワイヤーフレームを作成することが魅力的である理由の1つです。アプリでワイヤーフレームを作ると、より正確なデザインが可能となり、既存のワイヤーフレームから簡単に編集することもできます。しかし、あなた自身以外には誰も見ないであろうスケッチを速く作成できるという点が、やはりワイヤーフレームの長所として一番優れています。しかし、すで述べたようにアプリでワイヤーフレームを作成すると、より簡単にインターフェースの機能を模倣できるというメリットもあります。紙面上に作成したワイヤーフレームをタップしたところでトントン音が鳴るだけですから、面白いかもしれませんが、あなたの意図するところを伝えることはできません。紙のプロトタイプこれはただのスケッチではないという点で、紙面上のワイヤーフレームとは異なります。紙を利用するのは、物理的でフラットな素材でインターフェースのモデルを作るためです。先にご紹介したビデオのプロトタイプにもその例を見ることができます。インターフェースの要素は、紙にスケッチして、カットして作ります。コピーして予備を作ることもあります。そして作ったピースを他の紙の上に集めます。ある要素のサイズが間違っていれば、他の要素の並びを変えたり、新しいサイズの要素を紙をカットして作るなどの方法があります。またワイヤーフレームより「本物」らしいといえます。特に面白さはないとしても、クライアントは紙のモデルを触ることができます。この触覚に訴える方法はクライアントに多くを説明できるので、他のどんな方法より優れていることもあります。誰でも対象をより深く理解するためには、物理的なコンタクトが必要です。UXデザインの半分は、物理的なインタラクションの使い心地を、デジタルのインターフェースで作り直す作業であるといえます。アプリで作成するミディアムファイおよびハイファイプロトタイプこれらは紙のプロトタイプとの共通点が多いです。以下でご紹介するInvisionなどのアプリで作成するプロトタイプは、あらかじめデザインしたインターフェースの要素をもとに作り始め、これらのピースを集めて完成品を模倣します。異なる点は、全ての作業がスクリーン上でなされることです。完成製品のグラフィック作成やブランド化も可能であり、プロトタイプであっても完成製品のように作成することができます。その次はすでに述べたことですが、アプリによって製品のデモをブラウザやモバイルデバイス上で行うこともできます。また手で触れて感じることも可能になります。クライアントの触覚に訴えることで、もし気に入ってもらえれば、最終的な承認を得たも同然です。コードもちろんインタラクションを必要とする場合には、インターフェースのプロトタイプをコードで作るのがいい方法です。その理由もご紹介します。あなたのワークフローによく合う(とにかくブラウザ上でデザインするような場合)。作成するサイトやアプリに、ボタンなどのインタラクティブな要素が多数存在している。製品作成の最終段階でプロトタイプのコードを利用すると、時間の節約になる。インターフェースの機能性のデモを、アプリを使わずにブラウザ上で実行したい。あなたがキーを押すのが好きで、クリックするのは嫌いである。ブラウザ上でプロトタイピングを行うと、特に修正版を作成中はやや時間がかかります。製品の初期段階ではおすすめしません。ミディアム～ハイファイプロトタイプで使うのがベストです。すでにHTMLやCSSで作業を進める方法を好んでいるとしたら、完成間近のプロジェクトを提示するには最良の方法の1つです。フレームワークによるプロトタイピングフレームワークを利用すると、コードを使ったプロトタイピングのスピードを相当上げてくれます。さらに、完成製品用のフレームワークを利用するとしたら、コーディングの量も少なくて済みます。補足として、BootstrapやFoundationのような人気の高いフレームワークを利用して構築された、ドラッグ＆ドロップ形式のWebページ用エディタもあります。これらを使うことで、ローファイプロトタイプからコードを加えた完成製品まで全て作ることができます。または、これらをプロトタイプを速く作る目的だけに使い、プロジェクトの最終段階ではカスタマイズしたコードを使う方法もあります。どちらの方法でも上手くいくでしょう。プロトタイピングのツールとアプリ理論を理解したところで、プロトタイプの作成に進みましょう。紙のプロトタイプやコードだけに限定せず、アプリをどこかで使うと仮定します。良くも悪くも、多数の優良なアプリから選ぶことになります。繰り返しになりますが、結局はあなたに合うものを選ぶことが大切です。モバイルアプリのデモを実行する機能が必要か？Google DriveやDropboxなどのサービスとファイルの同期が必要か？Githubと統合させるか？ローファイ、ミディアムファイ、ハイファイのどのタイプか？アドバンストスクリプト言語(Advanced scripting)か？などから考えましょう。以下にリストアップするアプリは、これらのニーズに対応しています。何に着目すべきか分かりやすいように、アプリごとに最も関連性の高い機能をご紹介します。これらアプリの多くは主にワイヤーフレームのためのツールとして知られています。ワイヤーフレームのソフトウェアは、インタラクティブなプロトタイプに必要な機能を備えていることが一般的です。人によってこれらのアプリを使うことで得られるアドバンテージも異なります。 AdobeのExperience Design CC 現時点では最新のアプリです。このアプリの登場により、今まで飽和状態だった市場に競争を巻き起こすことになりそうです。単にワイヤーフレームのアプリまたはプロトタイピングのアプリというよりも、デザインアプリです。Sketchや開発終了したFireworksと似ていますが、デザインした全てのものからプロトタイプを作り出すことが可能な点が斬新です。今のところMacのプレビューにのみ対応していますが、2016年末までにはWindows版もリリースされる予定です。プレリリース版は無料ですが、完成版のリリース後にはAdobe Creative Cloudのプランに組み込まれます。プレゼンテーションのソフトウェア MicrosoftのPowerPoint、AppleのKeynote、LibreOfficeのImpress、GoogleのSlidesは全てプロトタイプの作成に使えます。プロトタイプについてのコンセプトはそれぞれ異なっています。スライドにリンク機能を加えるだけで、インタラクティビティを模倣できます。コンテンツ中心型のWebサイト用のプロトタイプにも向いています。またこの中のソフトの少なくとも1つは使った経験のある人も多いでしょう。もし使ったことがなければ、ImpressとSlidesは無料で使えます。 InVision InVisionも有名なアプリの1つで、ハイファイプロトタイピング向きです。バージョン管理を特色としていて、リアルタイムの連携機能やフィードバック機能を売りとしています。Marvelのアプリのように、アニメーション、プロトタイプの組込み、デバイス上でのデモ、などの機能もあります。無料プランではプロトタイプ1つまで作成できますが、それ以降は有料プランで月額15USドルかかります。 InVision Justinmind Justinmindはアプリケーションのハイファイプロトタイプを作成するのに向いているように思えます。JustinmindのサイトではレスポンシブデザインのWebサイトのプロトタイプについても言及されています。アプリ上でのデモ機能もあります。今のところ1年間の有料契約(月額換算で19USドル)からスタートできます。 Justinmind Marvel Marvel Appは有名なプロトタイプのアプリです。基本的に無料プランで、アップデートの価格も全てリーズナブルです。注目の機能は、PhotoShipとSketchのサポート、DriveとDropboxとの同期、Webページ上での組込み型プロトタイプです。これらの機能によって、プロトタイプをアニメーション付きのプレゼンテーションに仕上げることもできます。ハイファイプロトタイプの作成に向いています。 Marvel Proto.io Proto.ioはハイファイプロトタイプ向きのアプリです。複合的なインタラクション、アニメーション、ファイル形式のエクスポート、印刷、組込み、デバイスのデモンストレーションなどの機能が全てビルトインされています。15日の無料お試し期間と、月額24USドルのプランから始められます。 Proto.io POP POPが他のアプリと異なっているのは、ワイヤーフレームのスケッチとデジタル形式のプロトタイプのハイブリッドを作成できる点です。 iPhone、Androidフォン、Windowsフォンなどのカメラでスケッチの画像を取り込み、これらをインタラクティブなプロトタイプに変換します。主に紙で作業を進めるタイプの人には、データを共有するのにいいアプリです。プロジェクト2つまでは無料で利用可能で、以降は月額10USドルの有料プランになります。 POP Flairbuilder Flairbuilderはデスクトップアプリですが、プロジェクトにオンラインのビューア(閲覧用ソフトウェア)機能を利用できます。ミディアムファイのワイヤーフレームとプロトタイプに向いています。インタラクションを追加したり、デバイス上でのデモを行うことが可能で、グリッドベースのデザインにも特色があります。ワンタイム料金で99USドルと高額ですが、Axureよりも安いです。 Flairbuilder Flinto Flintoには、Macアプリ版とWeb用ライト版の2つのバージョンがあります。違いはというと、Macのバージョンの方がより複雑なアニメーション、インタラクションなどの機能をテーブル(表)に加えることができます。またSketchからファイル形式をインポートできるのも、Web用ライト版にはない機能です。ワンタイムの購入価格で99USドルかかります。ライト版(月額20USドル)だとデスクトップバージョンのライセンスも含まれるので、両方の良い部分を利用できます。 Flinto [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

アプリデザイン

Pythonのおすすめライブラリを現役エンジニアが解説【初心者向け】

Pythonのおすすめライブラリについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Pythonについてそもそもよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Pythonのおすすめライブラリについて詳しく説明していくね！大石ゆかりお願いします！ライブラリとはライブラリ(library)は、一般的には図書や蔵書という意味です。 IT、ソフトウェア業界では、凡庸性の高いプログラムの共通部品を指します。計算、ファイルの入出力、ネットワーク送受信などはプログラムでは頻出の処理です。これら共通機能を都度コーディングするのは非効率なので、使い回しができるようにライブラリにまとめます。 Python標準ライブラリとは Python標準ライブラリは、Pythonに標準で付属しているライブラリです。 Pythonをインストールするとこれらのライブラリも自動的にインストールされるので、追加インストールなく利用可能です。テキスト処理、ファイル処理、ネットワーク処理など、多様なライブラリがあります。 [PR] 未経験からWebエンジニアを目指す方法とはPythonライブラリの主な種類標準ライブラリでは機能が不足する場合、Python Package Index（PyPL）からライブラリを入手することが可能です。ここではPyPIに登録されているライブラリをいくつか紹介していきましょう。数理処理用ライブラリ NumPy. Pythonで行列計算などの数値計算を行うライブラリです。その他の数値計算ライブラリからも頻繁に利用され、デファクトスタンダードとなっています。こちらの記事でNumpy.の使用法を解説しています。 SciPy 理数系研究や計算のためのトータルパッケージで、NumPyを含む、複数の数値計算ライブラリをまとめて提供しています。スクレイピング用ライブラリ Scrapy Pythonのスクレイピング用フレームワークです。 Scrapyの使用法はこちらの記事をご覧ください。 Beautiful Soup XML, HTML等の文書パーサーで、スクレイピング処理と組み合せて多用されます。 Beautiful Soupの使用法はこちらの記事をご覧ください。マルチメディア用ライブラリ MoviePy Pythonの映像、画像編集用ライブラリです。カットや映像の結合、エフェクトの設定まで可能です。 pyglet Pythonで動作するクロスプラットフォームや複数ウィンドウを制御するために使います。 Pythonのおすすめライブラリ scikit-learnとTensorFlow 機械学習のライブラリです。標準でも多くの分類器やモデルを扱え、機械学習分野の入門者から専門家まで幅広く使用されています。 scikit-learnとTensorFlowの使用法はこちらの記事で解説しています。 Requests HTTP処理ライブラリです。標準ライブラリには、http.requestライブラリがあるものの、GET, POST処理やCookieの扱いをより便利に行えるようになっています。 Requestsの使用法はこちらの記事で解説しています。 Bottle, Flask いずれもWebアプリケーション作成の軽量ライブラリです。PythonにはDjangoというWebアプリケーションフレームワークがあるものの、ちょっとしたWebアプリを作成するには大がかりに感じるでしょう。 BottleやFlaskは中小規模のアプリ作成に向き、少ないコーディング量でWebアプリを作成可能です。 Bottle, Flaskの使用法はこちらの記事で解説しています。執筆してくれたメンター橋本紘希システムインテグレータ企業勤務のシステムエンジニア。開発実績: Javaプログラムを用いた業務用Webアプリケーションや、基幹システム用バッチアプリケーションなどの設計構築試験。大石ゆかり Pythonのおすすめライブラリがわかりやすくて良かったです！田島悠介これからも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているのでぜひ参加してみてください。

Python

「Sketch vs. Figma」デザインツールとして優れているのはどちらか

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、WebデザイナーであるChristian Krammer氏によって投稿されました。 UIデザインツールはこれまでにおいてかなりの人気を集めてきました。Affinity Designerや、Gravit、Sketch等の素晴らしいアプリケーションが大きく進化した一方でAdobe XD （Adobe Experience Designの略）やFigma のようなプレイヤーもこのフィールドに参入してきました。個人的には後者に最も魅力を感じます。Sketchとの類似性から、Figmaも最初の段階から簡単に正しく理解できました。更にFigmaは簡単なファイルの共有やvector networks、「constraints」(レスポンシブデザイン向け）、リアルタイムコラボレーションのような他の使い易い競合相手とは明確に違う独自の個性があります。この記事ではSketchとFigma 両方のアプリケーションを細部に渡り比較し、それぞれの長所がどのような点かに焦点を当てていきます。 Sketchの最大の弱点は常にAppleのエコシステムにロックインされている事です。設計するだけではなく、ファイルを開きチェックするのにもMacが必要です。WindowsやLinux上では全く機能しません。その為しばらく経つとSketchファイルのスペックを持つ有料のサービスが現れた訳ですが、それにしても厄介で余分な手順です。上：Sketch 下：Figma これが恐らくFigmaが最初の段階から一線を画す理由の1つです。すなわち、世界中基本的にどのデバイスでもFigmaはWebブラウザで使うことができます。どのインストールも一切不要です。ただChrome（又はFirefox）を開いてアカウントを作成して設計を開始するだけでいいのです。私は以前からずっとブラウザベースのツールを躊躇していましたが、Figmaは一瞬で私の懸念を仏拭しました。Figmaは多数の要素を含みながらもSketchと同様高性能です（もし同様でなければFigmaの方がより高性能です）。 WindowsやMac用のFigmaのスタンドアローンデスクトップアプリも入手可能ですが、基本的にそれらはただのブラウザバージョンのラッパーにすぎません。それらはキーボードショートカットにより優れた一方で、常にオンライン上にいなければなりません。勝者：Figma 理由：プラットフォームに依存しないためユーザビリティ（特徴的機能とユーザーインターフェース）基本的に、FigmaはSketchのインブラウザ版と呼ぶのが最も相応しいでしょう。機能はほぼ同じ、インターフェースも似ている、キーボードショートカットでさえもほぼSketchから受け継いでいる。もし既にSketchを知っていれば、Figmaが2016年の始めにリリースされた時にすぐに簡単に使いこなせるようになったでしょう。 Figmaはリリース当初から様々な点において改善され、いくつかの部分ではSketchを上回ってきました。しかし、プラグインやサードパーティ・ツールとの統合、リアルデータを利用できる機能（Craft Pluginも使用して）など、欠けている機能が未だにいくつかあります。それにも関わらず、この調子で改善が進むとFigmaがSketchに肩を並べるのはもはや時間の問題でしょう。勝者：引き分け理由：現時点では大差はありません。しかしSketchの方があなたの仕事を効率化させる要素を持ち合わせています。価格 Sketchは元々新しいバージョーンごとに約99USドルの初回手数料のみで発売されました。しかしやがてこのビジネスモデルは維持不可能だと判明されます。Bohemian Coding社は最近価格を定期購入が必要なモデルに変更しました。99USドルで1年間の無料アップデートが入手できます。その後はそのまま使い続けることができるか、更に同額を支払うことでまた別の1年アップデートが行えます。この値上がりは当初不適切なように見受けられましたが、デザイナーとしてあなたのメインツールへの99ドルの価値とは何でしょうか？そうです、大した額ではありません。 Adobe’s Creative Cloud の定期購入よりはまだ安いのです。（又、Sketchは何の問題もなく使い続けることができる一方、Creative Cloud の定期購入を辞めたらどのAdobe CC アプリも使い続けることができなくなります。）当分の間は、Figmaは全ての人が無料で使えるようになっていますが、今年後半には変わってくるでしょう。きっと定期購入制になり、月額10~15USドルになるでしょう（あくまで私個人の見解ですが）。確かな事は1つあります。それは、Figmaは学生に対して常に無料でしょう。（Sketchが教師と学生に対しリーズナブルなディスカウントを提供しているのと似ています。）勝者：引き分け理由：Figmaの価格に関する発表はまだない為 [PR] 未経験からWebエンジニアを目指す方法とはコラボレーション機能 Figmaの主な差別化要因は恐らく「マルチプレイヤー」と呼ばれるリアルタイムコラボレーション機能でしょう。その機能を使って他のユーザーと同時に1つのファイルを編集することができるだけでなく、他のユーザーがデザインをいじっているのを見たり、内蔵型のコメント機能を使って変更を知らせることができます。 1つの例として、この同時編集はプレゼンテーションやリモートチームにとって素晴らしく、また関わっている全てユーザーが同じ状態を確認し、意図していなかった上書きを防ぐことができます。 Sketchには（プラグインを使用してですら）そのようなコラボレーション機能はありませんし、多分そのような機能がない方がSketchにとってはよいのかもしれません。なぜなら「このボタンをもっと大きくしよう。ちょっと待てよ、勝手にやっちゃえ！」というような結末をもたらすかもしれないからです。もちろんこれは少し大げさな例です。この機能は多少価値はありますが、事前に特定のルールを決めておかないとリスクがあります。勝者：Figma 理由：同時に同じファイルを複数の人で共同編集できる為ファイル共有とスペックリアルタイムコラボレーション機能に幾らか関連しているのは設計ファイルの共有です。なぜならFigmaではすべての事がブラウザで行われるため、全てのファイルが必然的にURLを持っていて、それを同僚や上司に送ることができます（閲覧専用モードでも可能です）。このブラウザベースのアプローチの別の大きな利点は、開発者をはじめ全ての人がサードパーティツールの必要性なしにすぐにデザインを開き検証できることです。 Figmaでは簡単に他のユーザーとデザインを共有できます。これはまさに、1つのファイルにおいて必要不可欠な全ての情報（例えばフォントサイズや色、寸法、アセットなど）を他の共同制作者に提供するためにSketchに求められているものです。しかしながら、前にも述べたように、ここであなたを手助けするZeplinやSimpli、InVisionの Inspect、Avocode、Marklyなどの有料のツールが必要です。公平な立場からみて、最初の3つは1つのプロジェクトでは無料ですが、より複雑なものに取り組む際にはそれだけでは十分ではないでしょう。更に何らかのツールを必要としている場合や、そのような（正直なところ基本的な）機能にお金をかけたくないというのであれば、MarketchやSketch Measureという無料のプラグインもあります。多くの有料のアプリではコメントを追加したり自動的にスタイルガイドを作成することができます。あるいは、FigmaはSketchのファイルフォーマットをサポートしているので、SketchのファイルをFigmaにインポートしてチェックすることさえできます。左上から右下順に:Avocode、Zeplin、Simpli、Markly。これら全てにおいて様々な方法でSketchのデザインの閲覧、共有可能。もし共同編集者とデザインをちょっと見たいだけであれば、内蔵されているSketch Cloudが正にその役割を果たしてくれます。iOSデバイスでデザインを見るには、Sketch MirrorやFigma Mirrorを使って、Androidのデバイスであれば、MiraやCrystalを使用することができます。 FigmaはAndroidベースのアプリを提供しないのですが、（デスクトップコンピューター上で）フレームかコンポーネントを選択後、デバイス上で「www.figma.com/mobile-app」を開くと、1種のプレビューが見れるでしょう。勝者：Figma 理由：サードパーティツールの必要性なしにブラウザ上で簡単にファイルの共有が可能な為ファイルの整理 Sketchには、ページを提供するという組織能力があるため1つのファイルでアプリやWebサイト全体を作ることができ、ページ同士のスイッチも即座に可能です。Figmaはこの点において後れをとっています。 Figmaはページを提供しませんが少なくとも複数のファイルを1つのプロジェクトに結合することは可能です。左：Sketchでは1つのファイルを複数のページに整理でき簡単にスイッチ可能右：Figmaのプロジェクトは未発達アートボードというSketchのもう1つ重要なコンセプトも適応され強化されました。Figmaでは塗りつぶしやボーダー、エフェクトを簡単にアートボードに適用でき、またそれらをネストしたりグループから簡単に作成することもできます。1つの例として、これにより組み合わされた範囲より大きな要素のコンテナも許容され、「constraints」機能の手助けになりうるでしょう。更には、各アートボードには独自のネストされたレイアウトグリッドがあり、それによりレスポンシブデザインに役立つのです。 Sketchでもアートボードをネストすることが可能ですがそのインプリメンテーションはFigmaと比べると全く有効的ではありません。勝者：引き分け理由：Sketchにはページがあるが、Figmaのアートボード（フレーム）はより有効的な為レスポンシブデザイン Figmaが導入した（Sketchにも何ヶ月か経ってから導入された）機能はレスポンシブデザイン、すなわち、どのように要素が異なるアートボードやデバイスのサイズに対応するかを設定した機能です。 Sketchでそのような機能を提供するプラグインが以前からありますが、ちょっと使いにくい感じがありました。「group resizing」という特有の機能だけはFigmaの「Constrains」機能に匹敵して簡単に使用できます。左：Sketchの「group resizing」機能は1つのドロップダウンメニューで設定され慣れるまで少し時間がかかります。右：Figmaの「constraints」機能はより目で見てわかるようになっています。両者とも基本的に同じような動作ですがその見栄えは一目瞭然。Sketchでは4つのオプション付きのドロップダウンメニューしかなく、操作中に一体どんなふうになるなるのかがイメージしずらいです。Figmaはよりビジュアル化した方法でこれらのプロパティを明確にします。例えば、ある要素をアートボードの端に固定するか、それと均一にリサイズする事などができます。 Figmaの大きな利点はこれらの制約がレイアウトグリッドと一緒に組み合わせることで機能することです。要素は、例えばある列（又は行）に固定されるか、それらの幅に一致します。更には、各軸にこれらの設定を個別に変更することができ、グループだけではなくアートボードにも機能します。Sketchではあり得ない機能です。勝者：Figma 理由：その制約機能は遥かに進化していてより多くのオプションがある為ベクトル　マニピュレーション Figmaが発売された時の1つの大きな特徴は「vector networks」でした。もはやベクトルはただ一連の繋がった点（ノード）ではありません。今や、新しい線でどのノードからも分岐する事ができます。例えば、矢印を作るのなんて朝飯前です。 Figmaのvector networksはベクトルのどの点にもセグメントを追加することができます。しかしそれよりも遥かに勝っているものがあります。ベクトルのパーツはPaint Bucketツールで簡単に塗りつぶされる（又は削除される）事ができます。ベンドツールを使ってセグメント全体を動かす（又は曲げる）事も可能です。そして1つのベクトルから別のベクトルへ線点も同様に）をコピーするのは一瞬でできます。 Figmaのvector networksでセグメントを簡単に動かしたり曲げたりする事ができます。この特殊な機能1つでFigmaはSketchと一線を画しており、アイコンデザインに適したものになっています。それに比べ、Sketchで利用可能なツールはほぼ時代遅れな感じを受けます。Sketchではベクトルオブジェクトを作成し操作するために必要なすべてのものが揃っているかもしれませんが、より複雑なベクトル操作が必要になってくるとすぐに扱いにくくなるでしょう。はじめの図：Figmaでは、ペイント塗りつぶしツールを使って2つの重複した円の塗りつぶされた部分を削除し1つの輪をつくる。 2番目の図：Sketchではブール演算を用い従来の手法を使っている。(ちなみにこの方法はFigmaでも可能) ほとんどの場合、Sketchではある特定のタイプの形を作るのにブール演算を使用しなければいけませんが、その多くはFigmaのvector networksではより簡単に作成可能です。Sketchでは2つのベクトルオブジェクトを繋げたり、またはブール演算が適用された後に形を平らにすることさえしばしば難しいという事実がさらに物事を悪化させます。このアプリはこの点において問題が山積みなのは確かです。勝者：Figma 理由：vector networksは全く新しい次元をベクトルマニピュレーションにもたらします。Sketchにおいてはまだそれと匹敵するものはありません。サポートされているファイルの種類新しいアプリケーションが出るたびに、もしプロジェクトを移行したければ全てをやり直さなければいけないという問題によく直面するでしょう。Figmaではそうではないのです。見事なほどに正確な方法でSketchのファイルを開くことができ、この時点で既にFigmaが優位です。残念なことに逆パターンでは機能しません。1度Figmaでデザインをスタートしたらもうそれを使い続けるしかないのです。SketchにエクスポートすることもPDFファイルを作成すること（またはインポートすること）もできません。SVGにエクスポートするオプションもありますが、デザインアプリケーション間で複雑なファイルをエクスチェンジするのに理想的なフォーマットではありません。エクスポートオプションは一見似ていますがSketchにはより多くのオプションがあります。左：Sketch 右：Fiigma もう1つの制限要因はJPG画像をFigmaでエクスポートしたときにその品質水準を設定できないことです。なので画像を最適化する他のアプリケーションが必要になるかもしれません。Sketchの最新版ではさらにもっとエクスポートのオプションが改善しています。現在ではファイル名に接頭辞と接尾辞の両方を設定できると同様、Androidへのエクスポートをはるかに簡単にさせるエクスポートプリセット機能があります。各アプリケーションがサポートするエクスポートファイル形式を見てみましょう。 Sketch PNG JPG TIFF WebP PDF EPS SVG Figma PNG JPG SVG 勝者：Sketch 理由：より多くのファイル形式とより良い保存、エクスポートのオプションがある為アクセシビリティ FigmaにはSketchで使用できる多くのショートカットキーがありますが、そのアクセシビリティのレベルは同じではありません。Sketchではほぼ全ての事がキープレスで行うことができます。もし気に入らないショートカットキーの組み合わせがあればあなた独自のやり方をシステム環境設定で登録することが可能です（デフォルトによって割り当てられないショートカットコマンドが主になる傾向があります）。 macOSのシステム環境設定でSketchのあなた独自のショートカットキー設定が可能 Figmaはブラウザ上に存在しているためそのようなことは一切不可能です。デスクトップアプリでその点を補うことができますが、特定のメニューバーコマンドが無いせいである特定の機能を単純にキーボードに割り当てることは不可能です。勝者：Sketch 理由：そのアプリケーションのほぼ全ての機能がショートカットキーでアクセスすることができ、更にはカスタマイズできる為シンボル（コンポーネント） 1つの重要な機能がちょうどFigmaに導入されました。それはシンボル、又はここではコンポーネントと呼びます。コンポーネントを使用すると、「instances」の形式で簡単に再利用できる1つの複合オブジェクトにいくつかの要素をを組み合わせることができます。主要なコンポーネントが変更されるとすぐに、全てのインスタンスがその変更点を受け継ぎます。（しかしながら、その同じコンポーネントのバリエーションを考慮して特定のプロパティは個別に修正されます。）最近では、Figmaではファイル間や複数のユーザーと一緒に共有できるコンポーネントのライブラリを作成することさえ可能です。これは確固たるデザインシステムへの大きなステップです。 Sketchでは、個々のインスタンスの修正がインスペクタパネル上でオーバーライドの形で処理されるので、各インスタンスごとにテキスト値や画像の塗りつぶし、ネストされたシンボルの変更が可能です。 Figmaでは、塗りつぶし、ボーダー、効果（影やぼかし）を含め、キャンバスで直に1つの要素のプロパティをアップデートすることができます。上：Sketchではインスペクタパネル上でオーバーライドを使用してシンボルインスタンスの内容を変更します。下：Figmaではテキストの色を含め直接キャンバスキャンバスでコンポーネントのインスタンスをカスタマイズできます。シンボル（コンポーネント）の真の強みはレスポンシブデザインで発揮されます。どちらのアプリでも、親のサイズが変更された時にどの様に要素がシンボル内で反応するか定義することができ、異なる場所や画面のサイズでシンボルを使うこともできます。 Figmaが未だに後れを取っている領域はレイヤーやテキストスタイルです。形やテキストレイヤーのスタイリングを保存することができなく、他の要素と同期することも不可能です。しかしながら、1つの要素から別の要素にスタイリングをコピーして貼り付けることはできます。勝者：引き分け理由：インプリメンテーションは極めて同じレベルですが、Figmaはその共有可能なコンポーネントでわずかに有利です。プラグイン Sketchは並外れて素晴らしい機能を兼ね備えていますが、それを決定打にしているのはSketchを強化させたり足りない機能を補うサードパーティプラグインの存在でしょう。 1度に複数のレイヤーの名前を変更したり、ダイナミックボタンを作成したり、カラーパレットを保存し読み込んだり、Unsplashから簡単に画像を挿入したり、Git機能を有効化したり、Sketchの中でアニメーションを創り出すことができたりなど、使用目的は様々です。プラグインの全リストは公式ディレクトリやGitHub上で見ることができます。公式WebサイトとGitHubの両方で、Sketchの膨大なプラグインのセレクションを閲覧可能です。では、Figmaですが、現段階では全くそのような機能はありません。公平に言うと、Sketchは恐らく開発の初期段階ではこれらの多くの機能はありませんでした。そして将来的にはFigmaにもプラグインエコシステムが導入されるのは確実でしょう。注意したいこと：プラグインがSketchに大きな利点を与えた一方で、それらが何かしらの落とし穴にもなりえます。それらは新しいリリースの度に正常に機能しない傾向があり、Sketchチームは将来の開発者たちを遠ざけないためにも細心の注意を払う必要があります。勝者：Sketch 理由：単純に、Figmaにはプラグインが全くない為プロトタイピング AdobeXDと違ってSketchもFigmaもプロトタイピング機能が備わっていません。今のところFigmaには導入される予定はありませんが、Sketchには少なくとも基本的なプロトタイピング機能をもたらすCraft Pluginがあります。更にその人気でSketchは他のプロトタイピングツールとの幅広く統合することが可能です。例をいくつか挙げると、InVision、 Marvel、Proto.io、Flinto、Framerなどがあります。これらを一緒に使うことによって簡単にデザインをインポートしてアプリを同期することができます。現時点でFigmaと動作する唯一のアプリケーションはFramerです。似たようなツールのサポートが将来どのようになっているか述べるのは難しいですが、そのようなインターフェースが既に製作段階かもしれません。勝者：Sketch 理由：Craft Pluginには説得力のあるプロトタイピング機能がありませんが、Sketchは多くのプロトタイピングサービスと統合している為実データでの作成 Sketchが提供する数あるプラグインの中でいわゆる「content generators」というものを見つけるでしょう。その一例として、ダミーコンテンツでデザインを埋めることができます。しかし、より興味深いことはこれらのちょっとした機能が様々な情報源から実データを引き出すことを可能にし、またJSONファイルの形で内容を挿入することさえ可能です。これにより設計の初期段階でより情報に基づいた判断ができ、エッジケースも明らかにできます。このカテゴリーで最も優れているのはInVisionのCraft Pluginです。それを使ってある要素に内容を追加するとすぐに、1つのステップで簡単にその内容を複製・変更する事ができます。Craftではデザインのアセットを保存し、チーム内で共有したり又は自動的にスタイルガイドの作成も可能です。他の機能やオプションの中でも、SketchのCraft Pluginでは要素を複製し、同時に他の内容を追加することができます。 Craftよりは優れてはいませんが、似たような機能を持つプラグインがもう数個あります。Sketch Data Populator、Content Generator 、 Day Playerがそうです。 Figmaにはまだそのような機能はありませんが、時間の問題だと思います。Adobe XDが少し前に適応したようにアプリにその機能を統合するのか、もしくはプラグインシステムに依存するのか、どちらの手段をとるか興味深いところです。勝者：Sketch 理由：Sketchでは様々なプラグインで備え付きの機能の不足を補い、簡単に実データを使用できる為バージョニング私がいつも行っていることの1つは、始めの頃のデザインがどのような感じだったか見るためにCommand+Zを使って変更点を1つ1つ元に戻すことです。評価の基準を持つか、新しいイテレーションをベースとして複製するかのどちらかです。Figmaはブラウザ上の限られたリソースのためここで行止まりと思うかもしれませんが、実際はSketchに劣ってはなんかいません。どちらのアプリでも古いバージョンをブラウズして復元する事ができ、自動的に保存されます。しかしながら、Sketchのインプリメンテーションは理想とはかけ離れていて、どこから始めるかもわかりません。何といっても時間がかかるのです。実際に閲覧できる前にバージョンを復元しなければいけなかったり、ハードドライブ上でスペースを無駄にする結果になるかもしれません。さらに言えば、クラウド上で(Dropboxを介してなど)複数の人が同じファイルで作業している時に簡単にダメになってしまう可能性があります。 Figmaでは瞬時に前のバージョンを復元する事ができ、複数の人が同じファイルを編集している時はそれぞれの人の変更を分離できるので役に立ちます。それから前の状態に戻ったり、新しいアイデアの出発点としてバージョンを復元することができます。勝者：Figma 理由：Sketchのバージョニングは不完全過ぎて勝敗は明らかです。テキスト機能他の点と同様に、どちらのアプリケーションでもテキスト操作はかなり似ていますが、いくつかの違いは言及する価値があります。デフォルトによってFigmaではGoogle Fontsからでしか選択できないのですが、単純にインストーラーでシステムォントにもアクセスできます。私が常にSketchに物足りなさを感じる部分はテキストレイヤーのボーダーの位置の変更機能です。ここでは「中心」だけが唯一の選択しです。Figmaにはその他にもシェイプレイヤー用であるかのごとく「内側」と「外側」が選択できます。左：Figmaでは、テキスト枠内の垂直の位置（上）が設定でき、さらにボーダーの位置のオプションがある（下）右：SketchではOpenType機能が適用されるさらにFigmaではテキストを垂直に配列する設定ができる為、枠内で垂直に中央揃えすることが容易です。対照的にSketchではより多くのタイポグラフィのオプションがあり、スモールキャップス、古い形式の図形、スタイルの選択肢や合字（フォントでサポートされていれば）等のOpenType機能が適用できます。勝者：引き分け理由：どちらのアプリケーションもそれぞれ違った利点があります。Sketchの方がその進化したタイポグラフィオプションで少しリードしていますが、完全な勝利にはまだ不十分です。結論簡単に各アプリの長所をおさらいしましょう。 Sketchの良い点キーボードのアクセシビリティがより良くサポートされているプラグインとプラグインエコシステムがあるサードパーティツールとサービスを統合可能ファイルタイプとエクスポートオプションが豊富複雑なプロジェクトを1つのファイル（ページ付き）にまとめることが可能 Sketchでは簡単に実データを使えるより洗練されている Figmaの良い点ブラウザベースなので、世界中どの場所からどのプラットフォームでも使用可能リアルタイムで共同作業できるファイルの共有が簡単ベクトルマニピュレーションが優秀（vector networksを介して）レスポンシブデザインオプションがより優れている（constraint機能により）コンポーネントのライブラリを作成しチームのメンバーと共有可能アートボードがより強力今後の展望 2013年のAdobe Fireworksの廃止はUIデザインツール界に大きな空白を残しましたが、Sketchがすぐにその空白を埋めてくれました。 Sketchが大成功を収め、その人気は主なライバルであるPhotoshopに徐々に迫り、ついには昨年インターフェースデザイナーのユーザー間における調査「the tool of choice」でトップの座に輝きました。 Sketchは恐らくWindows版があればより成功したでしょうが、他のツールにも問題はあります。Affinity

アプリデザイン

Pythonにおけるlibraryについて現役エンジニアが解説【初心者向け】

Pythonにおけるlibraryについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 libraryについて詳しく説明していくね！大石ゆかりお願いします！目次 libraryとは Pythonにおける標準ライブラリライブラリの確認方法おすすめのライブラリ便利なライブラリをインストールしてみようまとめ libraryとはライブラリ(library)とは、もともと図書、書庫の意味です。特にIT分野では、プログラムの部品のことを指します。プログラミングでは、しばしば似たような操作を繰り返し行う必要があり、そのたびに都度コーディングするのは非効率です。そのような場合に、共通する処理をライブラリにまとめ、他のプログラムからそのライブラリを呼び出せるようにします。 [PR] 未経験からWebエンジニアを目指す方法とはPythonにおける標準ライブラリ標準ライブラリの充実していることがPythonの長所の一つです。文字列処理、数学の計算、ファイル操作など、プログラミングで必要になる各種操作のかなりの範囲を標準ライブラリのみでカバーしています。標準ライブラリで機能や性能の不足する場合には、PyPIという仕組みでライブラリを追加インストールできます。ライブラリの確認方法標準ライブラリはPython本体と同時にインストールされるので、追加のインストールは不要です。各ライブラリの使い方は、こちらで確認できます。前述のPyPIからライブラリをインストールするには、pipコマンドを使います。例えば以下コマンドでrequestsというライブラリをインストールします。 pip install requests おすすめのライブラリ Tensorflow：機械学習、特にディープラーニングのライブラリ NumPy：科学計算でほぼ標準といってよいライブラリ Matplotlib：グラフ描画でひんぱんに用いられるライブラリ Jupyter：ライブラリというよりも実行環境に近いですが、ノート形式でPythonのコード、テキスト、画像などを保存できる requests：HTTPのライブラリで、HTTPリクエストの送受信を強力にサポートしてくれる便利なライブラリをインストールしてみよう上記で挙げたNumPyをインストールしてみます。 pip install numpy Pythonインタプリタでnumpyライブラリをインポートしてみます。特にエラーが出なければ、インストールは成功しています。 Python 3.8.6 (tags/v3.8.6:db45529, Sep 23 2020, 15:52:53) [MSC v.1927 64 bit (AMD64)] on win32 Type "help", "copyright", "credits" or "license" for more information. >>> import numpy >>> まとめこの記事ではPythonで標準ライブラリ、PyPIライブラリを利用する方法を紹介しました。ライブラリを効果的に活用すると、コーディングの量やバグを減らすことができ、効率的にソフトウェアを開発できます。監修してくれたメンター橋本紘希（はしもとひろき）システムインテグレータ企業勤務のシステムエンジニア。開発実績: Javaプログラムを用いた業務用Webアプリケーションや、基幹システム用バッチアプリケーションなどの設計構築試験。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

Python

データ分析のライブラリ！Pandasとは【初心者向け】｜現役エンジニアが解説

今回は、Pythonのデータ解析用ライブラリであるPandasについて解説します。 Pandasを使うと、データの統計量を表示したり、グラフ化するなど、データ分析（データサイエンス）や機械学習で必要となる作業を簡単に行うことができるようになります。 Pythonでデータ分析を行うには、必須のライブラリなので、ぜひこの記事を参考に、Pandasの使い方を覚えましょう。なお本記事は、TechAcademyのAIオンライン講座の内容をもとに作成しています。目次 Pandasとは Pandasの特徴 Pandasでできること Pandasを使うメリット Pandasを利用するにはダウンロード手順初期設定 Pandasの使い方 Pandasをより便利に使う方法 Pandasの勉強方法大石ゆかり田島メンター！Pandasというのは何でしょうか？田島悠介 Pythonのデータ解析用のライブラリだよ。Pythonでデータ分析や機械学習を行うには、必須のライブラリなんだ。大石ゆかりどのような機能があるのですか？田島悠介例を見ながら説明していくね！ Pandasとは Pandasは、Pythonでデータ分析を効率的に行うためのライブラリです。Pandasはオープンソース(BSDライセンス)で公開されており、個人／商用問わず、誰でも無料で利用することができます。 Pandasを使うと、データの読み込みや統計量の表示グラフ化データ分析に関する作業を容易に行うことができるようになります。また主要なコードはPythonまたはC言語で書かれており、Pythonだけでデータ分析を行うのと比較して、非常に高速に処理を行うことができます。データ分析（データサイエンス）は、機械学習を行うまでの前処理（データの読み込み、クリーニング、欠損値の補完、正規化など）が、全ての作業の8〜9割を占めると言われています。Pandasを使うとそのような処理が効率的に行えるようになるため、Pythonで機械学習を行うには、Pandasは必須のライブラリとなっています。 [PR] 未経験からWebエンジニアを目指す方法とはPandasの特徴 Pythonによるデータ分析で多く使われているライブラリといえば、PandasやMatplotlib、NumPyなどがあげられます。これらのライブラリはそれぞれ以下のような特徴があります。 Pandas Pandasはデータの読込や並べ替え、欠損値（欠けている項目値）の補完などを行うことができるライブラリです。データ分析の前処理段階でとても多く利用されています。データの読込はCSVやテキストだけでなく、エクセルやインターネット上で提供されている株価情報など、多様な形式のデータを読み込むことが出来ます。また、Pandasの特徴はDataFrameという多機能な「表」にあります。DataFrameにはデータの平均値や行数などの概要的な特徴を把握する機能や、並べ替えや列名の変更などのデータを整形する機能があります。またキーを指定しての集計やMatplotlibと連携してのグラフによる可視化など、データ分析のデータ前処理の段階で便利な多くの機能が提供されています。データ分析の過程では、Pandasである程度データをきれいに整えてから、NumPyで数値計算を行うようといったように、使い分けて利用することが多いでしょう。 Matplotlib MatplotlibはPythonで代表的なグラフを描画するライブラリです。2Dだけでなく3Dも含めた多くの種類のグラフを描画することができます。 Matplotlibは慣れると使いやすいのですが、はじめは使い方がやや難しく感じると思います。そのような場合、PandasやSeabornなどのライブラリと組み合わせることで、見た目の良いグラフを簡単に描画することができます。 Matplotlibはデータ分析の様々な段階で、NumPyやPandasと組み合わせてデータの概要を把握したり、特徴を可視化するような目的で使用します。 NumPy NumPyは数値計算や行列演算を行うライブラリです。複数の数値を配列としてまとめて扱ったり、行列演算を行ったりするのが得意です。特にコンピューターで小数点以下を扱う際の標準的な形式である浮動小数点型の行列演算を高速に行うことが出来ます。また三角関数や平方根などの数値計算の機能も豊富です。 NumPyはある程度データの前処理が終わり、きれいに整ったデータに対して数値計算を行うのに向いているライブラリと言えます。 Pandasでできること Pandasには多くの機能があります。主に利用する機能を確認してみましょう。なお以下でDataFrameと記載しているのはDataFrameオブジェクトを指しています。データの読込 CSV形式のデータの読込：read_csv() Excelファイルの読込：read_excel() JSON文字列の読込：read_json() pickle形式(Pythonオブジェクトを保存する形式)によるデータの読込/書込：read_pickle()、to_pickle() インターネット上で提供されている株価情報の読込：pandas-datareader データの特徴を把握データの特徴を表示：DataFrame.info() 要約統計量を表示：DataFrame.describe() データの一部を表示：DataFrame.head()、DataFrame.tail() データの形状を表示：DataFrame.shape 行数を取得：DataFrame.index.values 列名を取得：DataFrame.columns.values それぞれの列の型を取得：DataFrame.dtypes データの切り出し（スライス）データのスライス：DataFrame[]、DataFrame.iloc[]、DataFrame.loc[] フィルタリング：DataFrame.query() データの並べ替え値による並べ替え：DataFrame.sort_values() インデックスによる並べ替え：DataFrame.sort_index() 列名の変更：DataFrame.rename() 集計列の集計：DataFrame.value_counts() 表の集計：DataFrame.groupby() ※groupby().sum()で合計、groupby().mean()で平均値得ることができる可視化 Matplotlibのimportが必要ヒストグラム：DataFrame.hist() 散布図、線グラフ：DataFrame.plot() 棒グラフ：DataFrame.bar() 箱ひげ図：DataFrame.boxplot() 欠損値の扱い欠損値の確認：DataFrame.isnull().sum() 欠損値に値を埋める：DataFrame.fillna() 欠損値のある行を削除する：DataFrame.dropna() その他カテゴリー変数の展開：get_dummies() 列同士の相関を確認：DataFrame.corr() Pandasを使うメリットデータ分析であればExcelなどの表計算ソフトを使えば十分という方も多いでしょう。Pandasを使うと、大量データに対して何度でも同じ処理をプログラムを実行するだけで行うことができるというメリットがあります。大量データの処理が可能 Pandasではパソコンのメモリ容量が許す限り、大量のデータをDataFrameに読み込んで処理を行うことが出来ます。動作速度も表計算ソフトほど遅くはなりません。同じ処理を何度も再実行できる 1つ1つの作業を人間が操作して行うのではなく「プログラム」として記述することで、何度でも全く同じ処理を繰り返し実行することが可能となります。データ分析では再現性が重要であり、手順書をもとにした人間の操作よりも、プログラムで処理自体を記述したほうが、確実に同じ処理を再実行することができます。また、大量データに対する処理は数時間～数日も時間を要することがあります。このような場合でも、人間はプログラムを実行して結果を待つだけです。表計算ソフトのように、付きっきりで操作し続ける必要はありません。さらにパソコンを複数台数用意して、条件を少し変えたプログラムを同時並行で実行して結果を比較する、といったことも容易に実現可能です。他のライブラリと連携し多彩な機能を実現できる他のライブラリと連携することで、プログラムを実行してグラフを描画したり、加工した結果を表計算ソフトのファイルとして出力するなど、Pandasだけでは行えない多くのことを実現することができます。 Pandasを利用するには Pandasを利用するには、Anacondaなどの「ディストリビューション」と呼ばれる開発環境をまとめたパッケージを使うのが簡単です。Anacondaは、データ分析やグラフ描画など、Pythonでよく利用されるライブラリを含んだ開発環境です。ここではAnacondaを例にダウンロード手順と初期設定について確認しましょう。ダウンロード手順 Anacondaの公式サイトからProducts > Individual Edition > Downloadを表示します。 Anaconda – Individual Edition – Download Windows、Mac共に「Python 3.7 – 64-Bit Graphical Installer」をクリックしてダウンロードします。なお、Python2.7は古いバージョンであり、サポート期間が2020年4月とすでに終了しています。どうしても必要な場合を除き、利用することは無いでしょう。ダウンロードしたファイルを実行することでインストールを行うことが出来ます。選択肢などは既定値のままで良いでしょう。初期設定インストールが終わったら、Anaconda Navigatorを起動します。はじめに初期設定として必要なライブラリをインストールしましょう。ライブラリのインストールはEnvironmentsから行います。Environmentsを開き、「Not installed」を選択して検索ボックスに「pandas」と入力します。一覧にPandasが表示されますので、チェックボックスで選択し、画面右下のApplyボタンを押すことでインストールすることができます。また、今回は説明用にscikit-learnのサンプルデータセット（トイデータセット）を使用します。同様にscikit-learnとnumpy、matplotlibもインストールしておきましょう。インストールが終わったらHomeに戻ります。プログラムはJupyter Notebookで作成します。画面の「jupyter notebook」と書かれた部分の「Launch」ボタンをクリックします。初回は「Install」ボタンになっており、クリックするとJupyter Notebookがインストールされます。以降は、Jupyter Notebookをもとに、Pandasの使い方を説明します。 Pandasの使い方 Pandasを使う際は、初めにPandasライブラリをインポートします。併せてサンプルデータセットも利用できるようにしておきましょう。 # Pandas、及び必要なライブラリのインポート import pandas as pd from pandas import DataFrame import numpy as np # サンプルデータセットを取得する from sklearn import datasets boston = datasets.load_boston() 実行結果は特にありません。エラーがでなければ、正しくインポートされています。次に、サンプルデータセットをPandasのDataFrame型に変換しておきます。なお、今回はサンプルデータセットを使いましたが、CSVデータを読み込むread_csvという命令も用意されています。 # PandasのDataFrame型に変換 df = DataFrame(boston.data, columns = boston.feature_names) # 目的変数をDataFrameへ追加 df['MEDV'] = np.array(boston.target) 準備が整いました。それではPandasの命令を幾つか見ていきましょう。データの概要を確認する先頭5行を表形式で表示する df.head() 実行結果は以下のようになります。行列数を表示する df.shape 実行結果は以下のようになります。 (506, 14) 細かい情報を表示する dataset.info() 実行結果は以下のようになります。 <class 'pandas.core.frame.DataFrame'> RangeIndex: 21613 entries, 0 to 21612 Data

機械学習

JavaScriptのライブラリの作り方を現役エンジニアが解説【初心者向け】

JavaScriptのライブラリの作り方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次デスクトップアプリとはPythonでデスクトップアプリを作れるライブラリ4選監修してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptのライブラリの作り方について詳しく説明していくね！大石ゆかりお願いします！はじめに今回は自作のライブラリに関する記事です。自作のライブラリを作成する際のポイントや注意点など解説します。ライブラリは大規模なWebアプリや複数人での開発などでとても便利なものですので、ぜひ参考にしてください。ライブラリとは平たく言うと機能の集まり、もしくは部品のようなものです。使われることの多い機能や処理は、ライブラリとして提供されていることが多いです。例えば、画像をスライダーとして切り替えて表示してくれるものや、グラフや図形を書いてくれるものなどたくさんのライブラリが存在しています。このようなライブラリを使うことで、自分で処理を作らなくても簡単にやりたいことが実現できます。 HTMLの操作や便利な機能がたくさん入ったjQueryなども有名なライブラリです。ライブラリを探す際は下記のサイトが便利です。ライブラリを探すサイト例えばここで画像のスライダーを探す場合は、sliderと入力して検索することでスライダーのライブラリがたくさん見つかります。 [PR] 未経験からWebエンジニアを目指す方法とはライブラリの作り方配布されているライブラリでは対応ができないような、独自性の強い処理を個人やチーム内で使いまわすような場合はライブラリを作ることがあります。どのような利用方法をする機能かにもよりますが、基本的には通常通りJavaScriptを記述したファイルを用意して、拡張子をjsにしたJavaScriptファイルを作るだけです。ライブラリを使う側はこのJavaScriptファイルを読み込むことで、処理を呼び出したり使ったりできます。 <script type="text/javascript" src="自作ライブラリパス"></script> 自作ライブラリを作る際のポイント・注意点ライブラリを作る際には以下の内容をメンバー間で認識を合わせておきましょう。ライブラリに実装するか個別のJavaScriptに実装するか基準を決める。 HTMLオブジェクトのクリックイベントなどにひもづける場合は、特定のクラス名などの指定を行う。グローバルスコープ変数を宣言する場合は、変数名などが衝突しないように命名規約を定める。画面オブジェクトを参照する場合は画面ロード完了時などタイミングを決めておく。ライブラリに共通の処理をまとめることで、コーディングの量を減らせるだけでなく、修正などがあった際に修正箇所が少なくなるなどのメリットがあります。一方複数の画面から読み込まれるので、個々の画面でのみ使われるような処理を入れていくとファイルサイズが大きくなったり、複数人での開発の際にファイルの競合が発生し非効率となってしまいます。ライブラリには各画面で呼び出されるような汎用的な処理や共通の処理（ファイルアップロード機能・ヘッダー表示機能など）を実装するようにしましょう。また、非同期処理などでHTMLを作成する場合は、画面オブジェクトを参照する処理は関数化して、各画面の実装時に任意のタイミングで呼べるように工夫する必要もあります。他にもプロジェクトの特性や仕様により制約や取り決めをあらかじめ決めてから、ライブラリの実装を行うようにしましょう。実際に作ってみよう少ない記述で小さなライブラリを作成してみます。アンカータグにマウスを乗せた際に、アラートで遷移先のURLを表示する機能をライブラリにまとめます。まずは以下のようなHTMLを準備します。今回はjQueryも利用していますので、head内で参照しています。 <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.slim.js" crossorigin="anonymous"></script> </head> <body> <div> <a href="https://techacademy.jp/" class="xxxxLink">リンク</a>

JavaScript

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

Pythonでデスクトップアプリを開発する方法を現役エンジニアが解説【初心者向け】

デスクトップアプリとは