iOS開発で役立つ！Swiftで使えるライブラリまとめ

iOS(iPhoneアプリ)開発において使える便利なライブラリというものが存在します。今回はSwiftで使えるライブラリをまとめて紹介しています。iOS開発をしたいと考えている人もすでに開発経験のある人も参考にしてみてください。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

iOS(iPhoneアプリ)開発において使える便利なライブラリというものが存在します。例えばSNSアプリを作ろうとすればログイン機能やプッシュ通知機能をつけたり、動画アプリを作ろうとすれば編集機能をつけるなど必要最低限の機能が考えられます。

そういった機能はゼロから開発するのは大変なので、ライブラリを使って手軽に導入することができます。

今回はSwiftで利用できるライブラリをいくつかまとめているので紹介しようと思います。iOS開発をしたいと考えている人もすでに開発経験のある人も参考にしてみてください。

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

UI/UX

Snapkit

AutoLayoutを簡単に実装できるコードを用意してくれているライブラリになります。少ないコードで実装できるので使う方も読む方もすぐに理解できるでしょう。iOSとOS Xに対応可能です。

MMPopLabel

ポップラベルを実装するライブラリになります。初めてiPhoneアプリを立ち上げたときによく見るチュートリアルのようなものですね。「まずはここをタップしてみよう」といった案内を簡単に表示することができます。

UIデザインで参考になるものをお探しの場合は海外のアプリデザインまとめをご覧ください。

Database

realm-cocoa

アプリ内で簡単にデータベースを実装することができます。ドキュメントも充実しているので初めて使うという人でもすぐに導入できるはずです。

SQLite.swift

iOSのローカルDBとしてよく使われているSQLiteをそのまま使えるライブラリになります。SQLiteを利用している開発者の方は一度目を通しておくと良いでしょう。

[PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中

Audio

AudioKit

シンセサイザーアプリなどを作る上で便利なライブラリです。実際に公開されているシンセサイザーアプリの「Analog Synth X」もAudioKitを利用して作られているようです。機能が豊富で慣れるまで少し大変かもしれませんが、本格的なアプリとして形にできるのでおすすめです。

MusicKit

音楽の作成編集をSwiftで行えるフレームワークです。MusicKitの中にサンプルがいくつか用意されているので使い方もすぐ理解できると思います。

SNSログイン

SimpleAuth

Twitter, Facebook, Instagram, Tumblr, LinkedInなどのSNSに対応したライブラリになります。

フォーム

XLForm

カレンダーを使ったiOSアプリなどに役立つでしょう。

具体的にどんな動きが実装できるのかGithubに掲載されているGIFを紹介していますので、ぜひご覧ください。

form1

ゲーム

VirtualGameController

Swift2系にもObjective-Cにも対応しているゲームアプリに関しては非常に万能なライブラリです。また、iOSだけでなくOS XやtvOSにも対応しているので幅広いデバイスで活用できるでしょう。今後iOSでゲームアプリを作ろうと考えている人は、今必要なくても便利なライブラリだと思いますので、要チェックです！

以上、iOS開発で便利なライブラリを紹介しました。

本格的なアプリを作ろうと思えば必ず必要になってくるので、知っておくといざというときに活用できるはずです。

初心者の方は、Xcodeのインストール方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。

この記事を気に入って頂けたら
いいね！・フォローをお願いします

XcodeでUIProgressViewを追加する方法【初心者向け】

iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。今回は、XcodeでUIProgressView（プログレスビュー...

iPhoneアプリ開発

いざという時に役立つ！Swiftのリファレンスサイト8選

Swiftのリファレンスサイト10選を紹介しています。細かい文法を調べたり、ピンポイントでこういう実装をしたい時など役立つサイトが多いので、ブックマーク...

iPhoneアプリ開発

【開発しながら学ぶ！】Swiftで作るサンプルiOSアプリをまとめてみた！

すでにSwiftを学んでいる人もこれからiOSアプリを作ってみたいという人にも参考になるサンプルアプリをまとめています。作りたいアプリが特に無いという人は、今回...

iPhoneアプリ開発

Swiftでプロトコル（protocol）を利用する方法【初心者向け】

Swiftでのプロトコルの使い方を解説しています。複数人で同じプロジェクトを開発する場合に他の人も読みやすいコードを書く必要があります。より効率的に進め...

iPhoneアプリ開発

XcodeでUISliderを追加する方法【初心者向け】

iPhoneアプリ開発で便利な、UIパーツの使い方を初心者向けに紹介する記事です。今回はUISlider（スライダー）の追加方法を解説します。 &...

iPhoneアプリ開発

インストール方法を解説！SwiftをLinuxで使用する方法【初心者向け】

SwiftをLinuxで使う方法についてまとめています。 macOSではなく、別のOSでSwiftを動かしたい人は参考にしてみてください。 &nb...

iPhoneアプリ開発

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

【今すぐ使える！】Android開発で役立つ25のライブラリ

本稿は、freeCodeCampのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Android開発者のMichal Bialas氏によって投稿されました。 2017年の1月と2月にリリースされた25のベストなAndroidライブラリのリストをご紹介します。これらはすべて試してみる価値があります。なお、順序はランク付けとは関係ありません。それでは始めましょう！ 1. Lottie これは、Bodymovin（アニメーションをSVG / Canvas / HTML + JavaScriptにエクスポートするためのAfter Effectsのプラグイン）によってJSONとしてエクスポートされたAdobe After Effectsのアニメーションを解析し、それらをネイティブにモバイル上にレンダリングするためのライブラリです。Google Playストアで利用できるサンプルアプリもあります。このライブラリを一躍スターにした7,500人を超えるGithubユーザーたちは、間違っていませんでした！ 2. Toasty カスタマイズされたToastを生成するためのライブラリです。このライブラリについて開発者は次のように説明していますが、まさにその通りです。「普通のToastですが、ステロイドのような効果があります。」以下はToastyのスクリーンショットです。 [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中3. StyleableToast これもToastのカスタマイズ用ライブラリです。次のように説明されています。「多様なスタイリングオプションによって、あなたのアプリとユーザーエクスペリエンスにユニークな使用感を加えることができます！あなたのToastを、コードまたはstyles.xmlのどちらかでスタイリングしてください！」 4. Store Storeは、非同期データの読み込みとキャッシュのためのライブラリです。ドキュメントによると次のように説明されています。「Storeは、アプリケーション内のデータの取り出し、解析、格納を簡単に行うためのクラスです。Storeは、リポジトリパターンに似ていますが、単一方向のデータフローに従うRxJavaで構築されたReactive APIを公開しています。」ドキュメントは本当に網羅的であり、このライブラリは試してみる価値があります。データ要求、キャッシング、解析など、多くのフローをチェックできます。 5. PreviewSeekBar あなたがGoogle Playムービーを使用している場合、この素晴らしいアニメーションの伴うSeekBarに、ムービーのプレビューが表示されているのに見覚えがあると思います。 RúbenSousa氏はこれをオープンソースライブラリとして実装しました。以下のGIF動画は、その優れた機能を示しています。あなたのアプリがムービープレイヤーの場合には、絶対に試してみる価値があります！ 6. Chuck OkHttpを使用する場合、アプリケーション内のすべてのHTTPの要求と応答を受信して保持するのに役立つライブラリです。また、コンテンツを検証するためのUIも提供しています。 7. CoordinatorTabLayout CoordinatorTabLayoutは、TabLayoutとCoordinatorLayoutの組み合わせを、すばやく実装するためのカスタムのコンポジットコントロールです。以下のGIF動画でどのように動作するかを示しています。 8. boxing boxingは、マルチメディアのセレクタであり、次のようなことが可能になります。画像を選択する（単一または複数の画像）画像をプレビューおよびクロップするまた、以下のスクリーンショットに示すように、GIF、動画の選択、画像圧縮、カスタムのUIもサポートしています。 9. excelPanel これは2次元のRecyclerViewです。履歴のデータを読み込むだけでなく、将来的なデータを読み込むこともできます。 10. Horizontal Calendar RecyclerViewの実装のためのライブラリとしては他にも、このHorizontal Calendarがあります。マテリアルデザインの水平方向のCalendarViewを作成できます。 11. CameraFragment CameraFragmentはFragmentの実装であり、カメラ機能をアプリケーションに簡単に統合できるようになります。そのREADMEファイルによると「CameraFragmentはカメラのビューを直接プレビューし、デバイスを撮影または管理するための簡単なAPIを提供します。あなたはCameraFragmentを使用して独自のレイアウトを設定して、カメラを制御することができます。」 12. AwesomeBar これはFlorent Champigny氏による優れた実装です。 DrawerLayoutと組み合わせて、トップバーのための新しいデザインが実現されています（ActionBar / Toolbarから明らかです。）。WeekzによるGmail Mobileからインスピレーションを得ています。以下のGIF動画でどのように動作するかを示しています。 13. ArcNavigationView これは、Android Design Support LibraryにあるNavigationViewの実装であり、カーブしたエッジを導入しています。 14. ShimmerRecyclerView これは、ビューが読み込まれていることを示すための、よりシームレスなビューを備えたカスタムのRecyclerViewの実装です。 RecyclerViewには、シームレスな外観を制御するためのアダプタも組み込まれています。 15. Android-SwitchIcon 「Googleランチャースタイルのスイッチ（有効/無効）アイコンの実装」です。このライブラリではAppCompatImageViewが拡張されていて、app：srcCompat属性を使用して、任意のアイコンをSwitchIconViewに設定できます。 16. CounterFab このライブラリは、右上にカウンタバッジ（数を示すバッジ）を表示するFloatingActionButtonのサブクラスです。Google Playからデモアプリをダウンロードできます。 17. FadingTextView このライブラリを使用すると、数秒ごとに自動的にTextViewのコンテンツを変更できます。 18. Bridge 「Bridgeは、Androidのためのシンプルで強力なHTTPネットワーキングライブラリです。最大限の互換性と速度を実現するため、Java / AndroidのURLConnectionクラスによって強化された、連鎖可能なFluent APIを備えています。」このライブラリはドキュメンテーションが本当に網羅的であり、チェックする価値があります。 19. Ason Aidan Follestad氏による2番目のライブラリです。主なアイデアは、JSONとのインタラクションを単純化することです。ライブラリについて次のようにも説明されています。「シリアル化も効率化できます。」ドキュメントもとても優れています。 20. ObjectBox 今、パフォーマンスに重点を置いた、オブジェクトのための新しいデータベースが必要とされています。 greenrobotの説明によると、「パフォーマンスは、私たちがObjectBoxを作成した1つの理由です。私たちはすでに、AndroidとSQLiteのための最速のオブジェクト関係マッピング（ORM）として、greenDAOを作成しました。 2011年の最初のリリース以来、私たちはオブジェクトの永続性について多くの洞察を得ました。また、SQLiteによって課せられたパフォーマンスの制限についても。私たちは、モバイルのパフォーマンスを大幅に向上させるためには、問題の核心に取り組み、オブジェクト用に設計されたデータベースを構築する必要があることに気付きました。」 21. FlowLayout このライブラリは次のように説明されています。「十分なスペースがない場合、子ビューは次の行に配置されます。FlowLayoutは、子ビュー間の間隔を、全体のビューが均等に配置されるように計算できます。」このライブラリはまだ開発の初期段階にあることに注意してください。 22. Unofficial

Androidアプリ開発

Pythonで使える！便利な機械学習ライブラリまとめ

今回は、便利なPythonで使える機械学習ライブラリをまとめて解説します。 Pythonで様々なライブラリを使用する際、Anacondaというソフトウェアを利用してPythonの環境構築を行うことで、予め最低限必要なライブリを実行可能な状態にすることができます。なお本記事は、TechAcademyのAIオンライン講座の内容をもとに作成しています。 NumPy 特徴 Pythonで数値計算を行う場合にもっとも有名なライブラリといえます。このNumPyというライブラリは、SciPyというさらに高度な数値計算処理を行うことが出来るライブラリの元にもなっています。便利な点数値計算で特に配列に関する処理は、世界中でサンプルや解説が存在するため、学習する上でも非常に良いです。 NumPyの内部はC言語やFortranで実装されています。これは、処理速度が高速であることを意味します。 Anacondaに標準搭載されています。レベル感 Pythonの基礎文法を学習後で、Anaconda環境を用意していれば直ぐに利用することができます。利用シーンベクトルや行列等の多次元配列をPythonで実装したり、多次元配列を簡単に操作する必要がある大規模プログラムで利用できます。 NumPyよりも機能が豊富なSciPyがあるにもかかわらずNumPyを利用する理由としては、SciPyがNumPyを元に実装されていることや、配列操作に関しては、NumPyを利用したサンプルや解説が基本となっているため、配列に関してはNumPyを利用することで開発効率が上がります。 NumPy pandas 特徴重要なコードはCythonまたはC言語で実装されており、高速に動作します。 R言語のような処理をPythonで可能にします。R言語は統計を行う際に利用するプログラミング言語で、ベクトル処理、統計解析、グラフ表示を行うことができます。 pandasもR言語の様な処理が可能です。また、CythonやC言語で実装されているため、非常に高速に動作します。便利な点 pandasは、単体だけでなく、NumPyで作成されたデータを、WebエンジニアになじみのあるMySQLやPosgreSQLのようなSQL文を利用してそうだ可能です。つまり、Webアプリケーションの実装と同様に、WHEREやGROUPを使用して慣れた方法でデータを扱うことが可能です。 Anacondaに標準搭載されています。レベル感 Pythonでデータ分析を行う際に最初に利用するレベルのライブラリです。利用シーン NumPyとSciPyで作成したデータをより分析したり簡易的なグラフにする際に利用します。また、SQL文を操作するような慣れた処理でテーブル操作が可能となるため、統計分析する際もWebエンジニアであれば簡単に学習が可能です。また、ビニングという金融システムにも利用される処理も行います。ピニングとは、ある程度連続したいくつかの値をより少ない数の「ビン」にグループ化することです。 pandas [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中SciPy 特徴サイパイと呼びます。 NumPyには配列データ型とインデックス作成、並べ替え、再形成等が利用できました。さらに高度な数値計算処理を行う場合は、SciPyを利用します。そうはいっても、SciPyはNumPyを元に実装されています。便利な点 SciPy は統計、最適化、積分、線形代数、フーリエ変換、信号処理、イメージ処理、遺伝的アルゴリズム、ODEソルバ、特殊関数等をPythonを使って簡単に利用することができます。 Anacondaに標準搭載されています。レベル感 Pythonの基礎文法を学習後で、Anaconda環境を用意していれば直ぐに利用することができます。利用シーン「利用メソッド名：利用シーン」という並びで、具体的に利用シーンを代表的な一部メソッドだけ紹介します。 clusterメソッド：クラスタリング処理 integrateメソッド：積分処理 linalgメソッド：線形代数処理 maxentropyメソッド：エントロピー分布処理 ndimagemiscメソッド：画像処理 sparsemiscメソッド：疎行列処理 sparse.linalg：疎行列の線形代数 statsメソッド：統計処理 stsciメソッド：画像配列操作 scipy.weave：PythonにC言語やC++言語を組み込む処理 SciPy matplotlib 特徴データをグラフや画像データとして表示することが出来ます。 pandasの簡易表示よりも更に複雑な表示が可能です。便利な点公式ページでは出力グラフとその為のコード例がセットで説明されているので学習し易いです。 Anacondaに標準搭載されています。レベル感 NumPyとSciPyでデータを作成後に使用します。利用シーン NumPyとSciPyを利用して用意したデータを分かりやすいグラフなどで表示したい場合に使用します。データを図表で表示させる場合はmatplotlibを利用することが一般的です。 matplotlib scikit-learn 特徴 scikit-learnは、Google製の機械学習用のライブラリです。分類回帰クラスタ分析(ニューラルネットワーク、サポートベクターマシン、ランダムフォレスト、k近傍法など)を手軽に実装できます。便利な点これまで紹介した、NumPy、SciPy、Pandas、Matplotlibと簡単に連携することが出来ます。 Anacondaに標準搭載されています。レベル感 NumPy、SciPy、Pandas、Matplotlibを使ってみた後に、NumPy、SciPy、Pandas、Matplotlibを連携させたいエンジニア向け利用シーン分類・回帰・クラスタリング・次元削減等の用途で利用します。分類 (Classification) とは、ラベルとデータを学習し、学習モデルを利用して、データにラベルを付けることができます。回帰 (Regression) とは、数値をデータで学習し、学習モデルを利用して、数値を予測することができます。クラスタリング (Clustering)とは、似ているデータをまとめることを学習し、学習モデルを利用して、同じようなデータ構造を見つける時に利用します。次元削減 (Dimensionality reduction)とは、データの次元を削減しデータの可視化、圧縮化を行うことができます。 scikit-learn TensorFlow 特徴 TensorFlowは、Googleが開発した深層学習（ディープラーニング）を行うオープンソース・ソフトウェアです。便利な点公式ページのチュートリアルを利用するだけで次の実装が可能です。 MNIST：手書きの数字を判別する CNN：画像認識を行う Word2Vec：各単語の関係を学習する RNN：文章から次の単語予測する Seq2Seq Model：フランス語を英語に翻訳するレベル感これまでに紹介した、機械学習に関するライブラリを一通り学習したエンジニアが、深層学習アルゴリズムを活用する際に利用するレベルです。利用シーン例えば顔認識システムによる監視カメラからのデジタル画像を元に顔を識別し、顔の画像が登録されたデータベースと比較することによる識別を行う技術で利用可能です。これにより、特定の人物を世界中の監視カメラから探し出すことができます。応用技術として、音声認識技術、被写体の認識、画像検索、リアルタイム翻訳、Web検索最適化などの分野での使用が想定されています。 TensorFlow 今回は、便利なPythonで使えるライブラリを紹介しました。画像認識やテキスト認識など様々な目的に合ったライブラリが存在するので、ケースに応じて機械学習ライブラリを使ってみてください。また、オンラインのプログラミングスクールTechAcademyでは、AIオンライン講座を開催しています。 AI（人工知能）の構築に必要な機械学習・ディープラーニングについて実践的に学習することができます。現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、習得することが可能です。この記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。

機械学習

【Webサイトをアプリに変換！】誰でも簡単に「Joren」でアプリが作れる！

自分で持っているWebサイトをアプリにできるサービス「Joren」が登場しています。 WebサイトのURLを入力することで、スマホアプリを簡単に作成できるというサービスです。自分で運営しているブログや、Webサービスをアプリに変換できるので今までチャレンジしてこなかった方はぜひ試してみてください。以下、Jorenについて紹介しています。プログラミング不要でできるようなので、誰でも手軽に導入できそうです。Webサイト自体は、WordPressなど手軽に公開できるツールが増えていますがアプリはまだまだ少ないのが現状です。アプリ開発はハードルが高くてこれまで挑戦してこなかったという人でも、JorenではiOS, Androidに対応しているので手間をかけずにリリースさせることができるでしょう。記事配信をするようなニュースメディアには相性が良いでしょう。新着記事のプッシュ通知を行うこともできるので、普段使っているアプリのような印象を与えることができます。また、用意されているデザインでミュージシャン向けのものもあります。ライブの情報など定期的にファンとのコミュニケーションが取れます。最近ではライブやフェスといった毎年恒例のイベントも増えてきているので、アプリ上で各年のコンテンツを蓄積しておくのも良いでしょう。他にもいくつかテーマが利用できるようです。これからリリースということもあり最初は気に入ったテーマが見つかるか分かりませんが、今後テーマの数も増えていくでしょう。また、単にアプリにするだけでなくコンテンツの管理やデータ分析も管理画面上で行うことができます。Webサイトを運営するのと同じようにアプリも提供することができそうです。現在はまだ事前登録の段階ですが、自分のサイトをアプリにできるのは楽しみですね。今回はWebサイトをアプリに！というサービスでしたが、シンプルにアプリが作れるツールも合わせてご覧ください。アプリに興味がある人は、ぜひ利用してみましょう。 [お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。アプリを開発するスキルを身につけましょう！

スマートフォンアプリ開発

シンプルでおしゃれ！無料で使えるBootstrapのテンプレートまとめ

今回はBootstrapの無料テンプレートサイトを紹介します。bootstrapはTwitter製のライブラリで簡単にサイトのコーディングを可能にしてくれます。また、今の時代では必須要件である、レスポンシブウェブへの対応もBootstrapで実現することができます。手軽にスマホ対応もできるので、サイトを作ろうと思っている人はぜひ参考にしてみてください。本記事は、オンライン完結のBootstrap講座のカリキュラムをもとに執筆しています。 Keen IO このサイトは、Webページとしておしゃれなデザインを提供してくれます。地図などの実装も実現してくれます。見るとわかるのですが、グラフや数値の扱いが非常に美しいサイトになります。「地図だけでなく、数値を扱うサイトでスタイリッシュに攻めたい！」なんて時にお勧めです。 Keen IO w3layouts このサイトでは様々な種類のテンプレートがあります。こんなページがコーディングしてみたいというものが無い方はここから入ると自分の好きなHPのイメージが付きやすいかもしれません。様々なテンプレートからお気に入りのものを探してみてください。また、スマートフォン用のページのサンプルも一緒に載っています。PCページだけでなくスマホぺージもお考えの方は参考にするといいでしょう。 w3layouts [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中Honoka 最後に紹介するのは「日本語を美しく表示するテーマ」「Honoka」です。いろいろなテーマがありますが、「Honoka」はその中でも珍しい「日本語を特徴的に強化すること」に注目したサイトです。日本語を美しくというのは日本のページならではであり、海外に向けた日本語の美しさをアピールすることもできるでしょう。 Honoka この機会にぜひともbootstrapを導入して、Webサイトの更なるコーディングに繋げていきましょう。 bootstrapは知識がなくともコーディングが可能になるライブラリですが、知識があればもっと自由度が増します。これを機会にHTMLやCSS、JavaScriptを勉強してみるのもいいのかもしれません。 [お知らせ]TechAcademyではオンライン完結のBootstrap講座を開催しています。わからないことをチャットで質問すると、現役のWebデザイナーが毎日すぐに回答します。

Bootstrap

2017年に見ておきたい12のJavaScriptライブラリ

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、デザイナー、ライターであるJake Rocheleau氏によって投稿されました。 JavaScriptのライブラリは数多く存在しているため、その中のどれにエネルギーを注ぐべきかを決めるのは難しく思えるかもしれません。成長を続けて広く採用されるようになるライブラリもあれば、中には使用されなくなったり、別の新規プロジェクトに吸収されて消滅するライブラリもあります。ほとんどのエンジニアは、jQueryやReactなどの有名なライブラリはすでにご存知かと思います。しかし、今回の記事ではあまり知られていないものの急速に台頭している12のJavaScriptライブラリを紹介したいと思います。 1) D3.js ビッグデータは成長産業であり、それと共にデータビジュアライゼーションも急速に重要性が高まっています。チャートとマッピングの機能を備えたライブラリは数多く存在しますが、D3.jsはその中でも目立つ存在です。このJavaScriptライブラリは、XMLのsvg要素やHTMLのcanvas要素を利用することでWeb上でグラフ、チャート、動的なビジュアライゼーションのレンダリングを行うことが可能です。完全に無料で利用できる、可視化ツールとしてのJavaScriptライブラリの中では最も強力なものの1つです。ブラウザ上でデータをレンダリングするためのツールを探している方には特におすすめしたいライブラリです。 D3.js 2) Node.js 多くのエンジニアはNode.jsの話はいつもうんざりするほど聞いているかもしれません。しかし、Node.jsは急速に成長しているJSライブラリであり、開発環境以上のものを提供してくれます。デフォルトのパッケージ管理ツールであるnpmによって、ローカル環境にあるプロジェクトのパッケージをすべてコマンドラインから管理することができます。そのため、Node.jsはnpmによってGulpなどの他のツールをインストールして使うことができる、完全な開発ツールキットであるといえるのです。それに加えて、数多くの関連するオープンソースプロジェクトがNode.jsをベースとして構築されているため、テストフレームワークであるMocha.jsでユニットテストを実行したり、Sails.jsでフロントエンドのインターフェースを作成することができます。もしまだNode.jsを試したことがなければ、「何て貴重なツールを見逃していたんだ」と驚くことになるでしょう。 Node.js [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中3) Riot.js JavaScriptのライブラリであるReact.jsは、仮想DOM、カスタム要素などの操作が複雑です。しかし急速に、フロントエンド開発におけるデジタルインターフェース用の強力なライブラリを必要とするプロに選ばれるツールになっています。 React.jsの代替ライブラリとして有力なのがRiot.jsです。Riotのフレームワークを使用すれば同様に仮想DOMにアクセスすることが可能で、しかもより簡単な構文要件で制御できます。残念な点は、Reactほど大きくはなく、Facebookによって開発されていないために、利用者コミュニティが小規模であることです。しかし、代替JavaScriptライブラリとしては良い選択肢であり、特にフロントエンド開発においては有力候補です。 Riot.js 4) Create.js Webアニメーションからデジタルメディアに至るまで、Create.js1つあればすべてをカバーすることができます。 Create.jsは単独のライブラリではなく、さまざまな目的のために構築された一連のライブラリ群から構成されるスイートパッケージです。たとえば、ライブラリの1つであるEasel.jsはHTML5のcanvas要素を使って動きを表現するためのものであり、Tweet.jsはWeb用のトゥイーニング（2つのイメージ間の動作変化であるトゥイーンを自動生成して滑らかなアニメーションを表現するプロセス）とアニメーションを作成するのに役立ちます。 Create.js 5) Keystone.js 先に私はいかに多くのライブラリがNode.jsをベースとして構築されているかについて述べました。Keystone.jsは本格的なCMSエンジンを備えたフレームワークであり、Node.jsを超える優れたツールの1例です。 Keystone.jsを利用することでMEAN（MongoDB、Express、AngularJS、Node.js）スタック方式によるWebアプリ開発が可能であり、バックエンドをNode.js、Express、MongoDBで構築できます。完全に無料で利用できますが、公開されたばかりの新しいライブラリです。記事執筆時点の現在の最新バージョンはv0.3であり、プロフェッショナルな利用に適したライブラリとなるには、今後まだ長い時間がかかりそうです。しかしJavaScriptのCMSフレームワークが気になる方は、チェックしてみることをおすすめします。 Keystone.js 6) Vue.js フロントエンドのフレームワークとしては、AngularとEmberが2大選択肢であるようです。しかし、Vue.jsも人気の高い選択肢であり、バージョンv2.0の公開以降はさらに急速に注目を集めています。 Vue.jsは、MVVMフレームワークであるため、典型的なMVCとはアーキテクチャが異なります。学習は難しいかもしれませんが、構文は一度理解してしまえば簡単です。フロントエンドのフレームワーク戦争が起きている現在においても、Vue.jsは確実な選択肢です。今後数年にわたって注目し続ける価値があります。 Vue.js 7) Meteor Meteorはオープンソースのプラットフォームです。どんなプラットフォームでも統合することが可能であり、良い結果を生み出すことができます。このMeteorのオープンソースのプロジェクトは、リアルタイムのチャットアプリ、ソーシャルコミュニティのためのアプリ、ダッシュボードなどJavaScriptで動くアプリケーションをエンジニアが開発するときに役立ちます。また、Telescopeというソーシャルアプリケーションの開発に特化した新しいフレームワークは、フロントエンドをReactによって、バックエンドをMeteorによって構築されています。MeteorとReactの技術が組み合わされたTelescopeを利用すれば、ソーシャルニュースのWebサイト、ソーシャル投票のWebサイトなどをゼロから構築することができます。 Meteorは数多くの機能を備えたモンスターのようなライブラリで、学習は簡単ではありません。しかしMeteorは楽しく、熟練したJSエンジニアであればほとんど何でもこのプラットフォームで構築することができるでしょう。 Meteor 8) Chart.js Chart.jsは、JavaScriptとCanvas APIを使用することで、棒グラフ、折れ線グラフ、バブルチャートなどのグラフを作成できます。データのグラフ化のための最もシンプルなJsライブラリの1つであり、アニメーションのためのビルトインタイプのオプションも組み込まれています。セットアップとカスタマイズが容易で、オープンソースプロジェクトの中で最も優れたドキュメントがいくつか付属しているため、Chart.jsは私がおすすめできるデータのグラフ化のためのライブラリとしては、数少ない中の1つです。 Chart.js 9) WebVR 新興スタートアップや熱狂的なエンジニアたちがVR（バーチャルリアリティ）のプロジェクトに不断の努力で取り組んだこともあり、バーチャルリアリティは世界中を魅了したようです。そのため、ブラウザ上でVRを実現するために開発されたJavaScriptのAPIであるWebVRが登場したことは、驚くにあたらないかもしれません。 WebVRは、Oculus Rift、Viveといった最も人気の高いVRのデバイスへのアクセスを可能としますが、現在はまだ開発段階にあります。 APIはオープンソースであり、モダンブラウザ上でVRのデバイスがどのように機能するかを測定するテストが、常に実行されています。このプロジェクトに興味を持った方や参加したい方は、オフィシャルサイトまたはMozVR（MozillaのVRチームのサイト）で詳しい情報をチェックしてください。 WebVR 10) Three.js 1980年代から現代に至るまでの3Dアニメーションの進化は驚異的です。私たちは3Dアニメーション映画には慣れ親しんでいますが、Webアニメーションはまだ新しいフロンティアです。幸運にもThree.jsのようなライブラリがあることで、Web上における3Dアニメーションへの道が開拓されています。 Three.jsのメインサイトには数多くの実例があります。モーションセンシティブな背景、3DWebグラフィックス、3Dアニメーション効果を使った動的なインターフェース要素などを構築することができます。忍耐力と野心があれば、このライブラリを使ってどのような3D効果も構築することができるでしょう。Web上の3Dモーションを表現するには最も良いリソースであり、サンプルも豊富に備わっています。 Three.js 11) Omniscient.js JavaScriptを使った関数型プログラミング自体は新しいものではありませんが、Web上においては新しいものでした。しかしOmniscient.jsなどのライブラリが登場したことで一般的になりました。 Omniscient.jsは無料でオープンソースのライブラリであり、すべてのフロントエンドの要素をトップダウン方式でレンダリングすることによって、viewを処理します。関数型プログラミングのコードをJavaScriptでゼロから書いて、Reactのような既存のUIライブラリと連携させることができます。 Omniscient.jsはよりスムーズな開発プロセスを求める経験豊富なエンジニアに特におすすめです。初心者にとっては複雑なテーマかもしれませんが、Omniscient.jsはReactの機能と連携して利用することで、開発プロセスを抜本的に改善できます。 Omniscient.js 12) Ractive.js 他のものとは異なるユニークなUIライブラリを探している方には、Ractive.jsがおすすめです。Ractive.jsにはテンプレートと入力したデータを結び付ける、Two-way bindingというバインディング機能がデフォルトで備わっています。そのため、RactiveのJavaScript関数にバインドされた要素を操作するだけで、テンプレートを構築することができるのです。重厚感のあるライブラリですが、初心者にとって学習曲線が最も緩やかなライブラリの1つでもあります。Reactほど詳細型のライブラリではありませんが、JsとHTMLにおいては独特な構文を使います。さらに学習するにはRactive.jsのメインサイトを訪れて、「Examples」のページよりRactive.jsで何が可能なのかをチェックしてみてください。 Ractive.js まとめ今回の記事でご紹介したライブラリはすべて、JSのコミュニティにそれぞれユニークな価値を提供することで貢献しています。もしあなたがJavaScriptの操作が好きであれば、それぞれのライブラリをもう一度見返して、あなたのWeb開発プロジェクトにどのような付加価値を与えてくれるかを考えてみてください。 TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。JavaScriptを使ってリッチなWebサービスを作りたい方はぜひご覧ください。

JavaScript

【すぐに使える！】CSSのアニメーションをまとめたサイト・記事20選

今回はCSSのアニメーションをまとめたサイトや記事を紹介します。サイトを作っていく上でアニメーションの実装は必須と言えるでしょう。より目立たせたり、クールな印象を持ってもらうためにアニメーションの書き方を覚えておくとサイトの表現に幅が出るはずです。そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。 CSSアニメーションの素晴らしいアイデアのまとめこのサイトはデモページもセットであるために1ページでいくつかのデモを見ることができます。上記のゲームボーイカラーの生成HTML、CSSなど真似したくなるアニメーションが多くあります・。他にも動的なコンテンツが多くあるので必見のサイトでしょう。 CSSアニメーションの素晴らしいアイデアのまとめ Hover.css アニメーションの実装でまず参考にしたいサイトの代表例ですね。マウスオーバー時に関するアニメーションについては、このサイトを見れば十分表現ができるでしょう。書き方もすべてまとまっているので、初心者の方でも気軽に使用できるはずです。 Hover.css [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中CSS3アニメーションをらく～に実装！オンラインツール7選このサイトでは実装結果が分かった状態で、使いたいものを選ぶことができます。アニメーションを再現できる便利ツールをまとめているので、表現したいアニメーションが見つかるはずです。 CSS3アニメーションをらく～に実装！オンラインツール7選ここまで動かせる！楽しいcss アニメーションのサンプル集ここには動くサンプルが多く乗っています。文字が奥にスクロールするものは実行してみたくなりますね。ここまで動かせる！楽しいcss アニメーションのサンプル集ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ここに乗っているサンプルは、オリジナルを作る際に参考になると思います。シンプルなアニメーションから3Dを用いた難易度の高いものも紹介されているので、ぜひ試してみましょう。ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ CSS3でアニメーション！transitionとanimationまとめ（サンプル付き）上記にあげたようにオリジナルを作るための基礎になります。サイト内のアニメーションの動きとソースコードの書き方がどちらも載っているので、CSSでアニメーションを書いたことがないという人でも記載されているコードをペーストするところから始められるでしょう。 CSS3でアニメーション！transitionとanimationまとめ初心者にもコピペで使えるCSSジェネレーター8個紹介されているのはCSSジェネレータで、コピーして使えるという点が優れています。それぞれのアニメーションがGIFで紹介されているので、サイト上でどんな動きをするのか一目で確認することができるでしょう。初心者にもコピペで使えるCSSジェネレーター8個 CSSのみでエフェクト・アニメーションを実装する方法ここではいろいろなCSSアニメーションの書き方が書いてあります。アニメーションを実装したことがないという人は、この記事で書き方を見ておくと良いでしょう。 CSSのみでエフェクト・アニメーションを実装する方法 css3アニメーションのレパートリーがきっと増える！動きの参考になる22サイトここではCSSのボタンがメインで紹介されています。ボタンはマウスオーバーした時にアニメーションを施すWebサイトが多いですが、サイト制作をする上で役に立つでしょう。 css3アニメーションのレパートリーがきっと増える！動きの参考になる22サイト【保存版】CSS3アニメーションを簡単に利用できるライブラリのまとめここではCSS3のライブラリのまとめが乗っています。ライブラリとして導入する場合には見ておくとよいでしょう。【保存版】CSS3アニメーションを簡単に利用できるライブラリのまとめ【Webサイトに動きと個性を】CSSでアニメーションを駆使する方法！ CSS3でアニメーションを作る際の細かな調整方法などが紹介されています。動きにこだわったサイトを作る際、活用できそうですね。【Webサイトに動きと個性を】CSSでアニメーションを駆使する方法！ CSSアニメーション入門 CSSを使ったアニメーションについて、分かりやすくまとめられています。デモも確認できるので、リファレンスとしても活用できますね。 CSSアニメーション入門担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみるここではCSSを使ったアニメーションについて、プロの技を見ることができます。全てを理解することは難しいかもしれませんが、いろんなテクニックが紹介されており、参考になりますね。担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみる最近のWebサイトで見かけるHTML/CSSスニペット・JSライブラリ33個まとめ CSS3を使った、特に視覚効果の高いアニメーションが紹介されています。インクが広がるエフェクト等、CSSでここまでできるんだと思うようなものばかりです。最近のWebサイトで見かけるHTML/CSSスニペット・JSライブラリ33個まとめ【CSS】最新マウスオーバーアニメーションスニペットサイト６選。マウスオーバーアニメーションに特化したアニメーションが紹介されています。スニペットを貼り付けるだけで利用できるので、自分のサイトに簡単に取り入れることができますね。【CSS】最新マウスオーバーアニメーションスニペットサイト６選。 CSSでのロールオーバーアニメーションのチュートリアル集まとめここではCSS3を使ったロールオーバーアニメーションが紹介されています。チュートリアルの紹介なので、初学者にも分かりやすく確認することができます。 CSSでのロールオーバーアニメーションのチュートリアル集まとめコピペで使えるアニメーションcss集比較的シンプルなアニメーションがコード付きで紹介されています。コピペで使えるアニメーションcss集コピペで簡単！ローディングアニメーションの参考になるサイトまとめここではCSS3を使ったローディングアニメーションが紹介されています。ローディング画面はユーザが良く目にするものなので、いろいろあって助かりますね。コピペで簡単！ローディングアニメーションの参考になるサイトまとめ CSS3アニメーションを手軽に作成できるオンラインツール9選ここではCSS3アニメーションを手軽に作成できるオンラインツールが紹介されています。ツールを活用して、効率的にアニメーションを作りたいですね。 CSS3アニメーションを手軽に作成できるオンラインツール9選ちゃちゃっとCSSで色々とやりたい時に激しく便利なサイトとまとめ記事ここではCSS3を使ったアニメーションを作成する時に参照できるサイトが紹介されています。覚えておくと便利なサイトばかりですね。ちゃちゃっとCSSで色々とやりたい時に激しく便利なサイトとまとめ記事以上、CSSでできるアニメーションまとめサイト・記事を紹介しました。 CSSを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい CSSを学習していて、このように思ったことはありませんか？テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

CSS

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

UI/UX

Database

Audio

SNSログイン

フォーム

ゲーム

記事を検索

この記事を気に入って頂けたら いいね！・フォローをお願いします

関連するキーワード

関連する記事

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

TechAcademyから 現役エンジニアの方へ お知らせ

WEEKLY RANKING

この記事を気に入って頂けたら
いいね！・フォローをお願いします

TechAcademyから
現役エンジニアの方へ
お知らせ