TechAcademy（テックアカデミー） iPhoneアプリコース スマートフォンアプリ開発iPhoneアプリ開発iOS開発で役立つ！Swiftで使えるライブラリまとめ
iPhoneアプリ開発

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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

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

 

ゲーム

GameBoard

囲碁将棋などボードゲームを作ろうとしている人には便利なライブラリです。

 

VirtualGameController

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

 

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

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

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

記事を検索

関連するキーワード

関連する記事

ASOの施策にも役立つ！App StoreとGoogle Playを徹底比較

本稿は、Eminesoftのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Eminesoftの編集長でありマーケターのEllina...
スマートフォンアプリ開発

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

自分で持っているWebサイトをアプリにできるサービス「Joren」が登場しています。 WebサイトのURLを入力することで、スマホアプリを簡単に作成できる...
スマートフォンアプリ開発

XcodeでiPhoneアプリにUIパーツを追加する方法【初心者向け】

XcodeではUIKitを使って、iPhoneアプリにUIパーツを追加することができます。UIパーツを使えば、ボタンやラベルなどを表示でき、アプリのUIデザイン...
iPhoneアプリ開発

【100 Days of Swift】Swiftチュートリアルの学習！100日間の軌跡

Astadiaという企業でエンジニアをしているSam Lu氏が「100 Days of Swift」という100日間でSwift開発についてまとめています。 ...
iPhoneアプリ開発

iPhoneアプリが開発できる！Swiftとは【初心者向け】

iPhoneアプリ開発で使われる「Swift」とは一体どんな言葉なのでしょうか。 何となく耳にしたことはあるけど、Swift自体触ったことはないという方、...
iPhoneアプリ開発

XcodeでiPhoneアプリのアイコン画像を変える方法【初心者向け】

iPhoneアプリのアイコン画像はXcodeから変更することができます。アイコン画像によってアプリのダウンロード数が変わることもあるので、重要なポイントです。 ...
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アプリ開発

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

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

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

シンプルでおしゃれ！無料で使える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

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

すでにSwiftを学んでいる人もこれからiOSアプリを作ってみたいという人にも参考になるサンプルアプリをまとめています。作りたいアプリが特に無いという人は、今回紹介するアプリを実際に作ってみると良いでしょう。 Swiftのスキルも上がるはずです！   なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。   Swiftで作るサンプルアプリ 2048 via GIPHY 世界的に有名なパズルゲームアプリ2048のサンプルです。   Chess チェスのiOSアプリを作りながらSpriteKitの使い方を学習することができます。オセロや将棋などボードゲームを作る上で参考にしてみてください。   Doppio 現在地から近くのスターバックスを探すサンプルアプリを作ることができます。実際にスターバックスのAPIを利用するので少しハードルは高いかもしれませんが、完成すれば普段でも使えるアプリになるはずです。   Pinterest PinterestのUIを再現したサンプルアプリとなっています。GIFでどのような動きが実装できるのかイメージしておくと良いでしょう。   360VR Player iOSで360度動画アプリを作りたいという人は参考になるサンプルです。   SwiftFlickerApp FlickrのAPIを使って人気写真が見れるアプリです。サンプルアプリ自体GridやListで写真を閲覧できるので、完成したら自慢できるくらいのクオリティになっています。   HackerNews 海外のニュースアプリHackerNewsのサンプルです。リストにニュースや出来事を表示させて読んでもらうようなアプリを作りたいという人におすすめです。 個人ブログをアプリにしてみたいという人は参考になるはずです。   SwiftWeather Swiftで作る天気アプリです。このサンプルアプリでは背景画像をひとつに決めてしまっていますが、アプリがどうやって作られているのか知るには十分な材料です。 Swift初心者の方でも取り組みやすい内容なので、ぜひアプリ学習の参考にしてみてください。   ForceSketch 3D Touchを利用したスケッチアプリとなっています。書いている感覚をそのまま色やスタンプなどで表現できるお絵描きアプリを作りたいという人には参考になるでしょう。   以上、Swiftで作られているサンプルアプリを紹介してきました。 自分で開発してみると、アプリが動いたときの感動は大きいでしょう。ぜひアプリ開発の楽しさを実感してみてください。 [お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。アプリを作って公開してみたいという方はぜひご参加ください。
iPhoneアプリ開発

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

今回は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アニメーションを簡単に利用できるライブラリのまとめ   以上、CSSでできるアニメーションまとめサイト・記事を紹介しました。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
CSS

WEEKLY RANKING

TechAcademy（テックアカデミー） iPhoneアプリコース スマートフォンアプリ開発iPhoneアプリ開発iOS開発で役立つ！Swiftで使えるライブラリまとめ