【開発しながら学ぶ!】Swiftで作るサンプルiOSアプリをまとめてみた!iOSアプリ開発特にSwiftを学びたい人は実際にアプリを作りたいという人が多いでしょう。今回はサンプルアプリを紹介しています。自分で作りたいものがないという人は、まずサンプルアプリを自分で開発してみると良いでしょう。[テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。Swiftを学んでいる人もこれからiOSアプリを作ってみたいという人にも参考になるサンプルアプリをまとめています。作りたいアプリが特に無いという人は、今回紹介するアプリを実際に作ってみると良いでしょう。Swiftのスキルも上がるはずです!なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。GIPHY世界的に有名なパズルゲームアプリ2048のサンプルです。ChessチェスのiOSアプリを作りながらSpriteKitの使い方を学習することができます。オセロや将棋などボードゲームを作る上で参考にしてみてください。Doppio現在地から近くのスターバックスを探すサンプルアプリを作ることができます。実際にスターバックスのAPIを利用するので少しハードルは高いかもしれませんが、完成すれば普段でも使えるアプリになるはずです。PinterestPinterestのUIを再現したサンプルアプリとなっています。GIFでどのような動きが実装できるのかイメージしておくと良いでしょう。PlayeriOSで360度動画アプリを作りたいという人は参考になるサンプルです。SwiftFlickerAppFlickrのAPIを使って人気写真が見れるアプリです。サンプルアプリ自体GridやListで写真を閲覧できるので、完成したら自慢できるくらいのクオリティになっています。HackerNews海外のニュースアプリHackerNewsのサンプルです。リストにニュースや出来事を表示させて読んでもらうようなアプリを作りたいという人におすすめです。個人ブログをアプリにしてみたいという人は参考になるはずです。SwiftWeatherSwiftで作る天気アプリです。このサンプルアプリでは背景画像をひとつに決めてしまっていますが、アプリがどうやって作られているのか知るには十分な材料です。Swift初心者の方でも取り組みやすい内容なので、ぜひアプリ学習の参考にしてみてください。Touchを利用したスケッチアプリとなっています。書いている感覚をそのまま色やスタンプなどで表現できるお絵描きアプリを作りたいという人には参考になるでしょう。以上、Swiftで作られているサンプルアプリを紹介してきました。自分で開発してみると、アプリが動いたときの感動は大きいでしょう。アプリ開発の楽しさを実感してみてください。初心者の方は、Xcodeのインストール方法も合わせてご覧ください。[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。アプリを作って公開してみたいという方はぜひご参加ください。はてブに追加この記事を気に入って頂けたらいいね!・フォローをお願いしますFollow関連するキーワードまとめ関連する記事XcodeでUISliderを追加する方法【初心者向け】iPhoneアプリ開発で便利な、UIパーツの使い方を初心者向けに紹介する記事です。今回はUISlider(スライダー)の追加方法を解説します。&...iPhoneアプリ開発XcodeでUINavigationBarを追加する方法【初心者向け】iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。switch文を使って条件分岐処理を行う方法【初心者向け】Swiftで書くif文/switch文の使い方を詳しく解説しています。プログラムを書く上で必須の知識になるので、初心者の方はぜひ書きながら理解していきま...iPhoneアプリ開発Realmを扱う!Swiftでデータベースを使う方法【初心者向け】Swiftでデータベースを扱う方法について解説しています。データベースを導入、操作する流れをこの記事でまとめているので、やり方が分からない方は参考にして...iPhoneアプリ開発XcodeでUIActionSheetを追加する方法【初心者向け】XcodeでUIパーツを追加することで、より使いやすいiPhoneアプリを開発することができます。そんなUIパーツのうち、「UIActionSheet(アクショ...iPhoneアプリ開発XcodeでUIAlertView追加する方法【初心者向け】XcodeでiPhoneアプリを開発するときに、便利なUIパーツを追加する方法を紹介する記事です。初心者の方を対象としています。そこで今回は、Androidアプリ開発の入門として参考になるサイト・記事を集めてみました。記事を参考にしてぜひチャレンジしてみてください。Androidアプリの開発に必要なソフトは英語のサイトで配布されていることも多く、開発環境の構築に必要なダウンロードやインストールの手順で戸惑ってしまうこともあるかもしれません。このサイトではすべての作業を初心者向けに図解入りで一から説明されています。このページを見て第一歩を踏み出してみましょう。Androidアプリの開発に欠かせないのがプログラミング言語のJavaです。このサイトでは、Javaの基本的な構文について練習問題も使ってしっかりと解説されています。Javaのプログラミングを始める前に、入門としてまずは読んでおきましょう。開発環境を構築する入門編から製作、エミュレータでのテスト、そして実際にアプリとして仕上げてマーケットへ公開するまでの一連の手順が全12回の記事を通して紹介されている連載記事です。これからアプリを開発しようとする時、どの段階でも参考になる記事がそろっています。Eclipseやエミュレータの細かい操作がしっかりと解説されていますので、作業中分からないことがあったらすぐにチェックしてみましょう。Androidアプリの開発を楽しく学べる記事です。難しい内容も、分かりやすい例えを使って説明されています。コピー&ペーストですぐ使えるソースコードも充実していて、まだ初心者だけどとりあえず色々動かしてみたいという方にもおすすめです。Androidのアプリ開発はMacでも可能です。OSでの開発環境構築の手順を説明しています。開発環境はEclipseを使います。Bundleを使っているので、複雑な操作が必要なくなりました。エミュレータでの起動まで一通りのわかる記事です。IDEとして正式にリリースされた新しい開発環境の「AndroidStudio」を使った開発環境の構築についてまとめた記事です。Bundleを使うのではなく、AndroidStudioを使うことをおすすめします。操作や機能は従来とあまり変わっていないため、以前にAndroidアプリを開発したことがある方でも、違和感なく使えるはずです。Androidアプリを誰もが使えるようにするには、GooglePlayで公開する必要があります。公開するために必要なAPKファイルの作り方から、実際の登録方法まで初心者向けに解説している記事です。[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。Androidアプリ開発iOS開発で役立つ!Swiftで使えるライブラリまとめiOS(iPhoneアプリ)開発において使える便利なライブラリというものが存在します。SNSアプリを作ろうとすればログイン機能やプッシュ通知機能をつけたり、動画アプリを作ろうとすれば編集機能をつけるなど必要最低限の機能が考えられます。いった機能はゼロから開発するのは大変なので、ライブラリを使って手軽に導入することができます。今回はSwiftで利用できるライブラリをいくつかまとめているので紹介しようと思います。iOS開発をしたいと考えている人もすでに開発経験のある人も参考にしてみてください。本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。AutoLayoutを簡単に実装できるコードを用意してくれているライブラリになります。少ないコードで実装できるので使う方も読む方もすぐに理解できるでしょう。ポップラベルを実装するライブラリになります。iPhoneアプリを立ち上げたときによく見るチュートリアルのようなものですね。「まずはここをタップしてみよう」といった案内を簡単に表示することができます。UIデザインで参考になるものをお探しの場合は海外のアプリデザインまとめをご覧ください。アプリ内で簡単にデータベースを実装することができます。ドキュメントも充実しているので初めて使うという人でもすぐに導入できるはずです。iOSのローカルDBとしてよく使われているSQLiteをそのまま使えるライブラリになります。SQLiteを利用している開発者の方は一度目を通しておくと良いでしょう。シンセサイザーアプリなどを作る上で便利なライブラリです。X」もAudioKitを利用して作られているようです。機能が豊富で慣れるまで少し大変かもしれませんが、本格的なアプリとして形にできるのでおすすめです。音楽の作成編集をSwiftで行えるフレームワークです。MusicKitの中にサンプルがいくつか用意されているので使い方もすぐ理解できると思います。LinkedInなどのSNSに対応したライブラリになります。カレンダーを使ったiOSアプリなどに役立つでしょう。具体的にどんな動きが実装できるのかGithubに掲載されているGIFを紹介していますので、ぜひご覧ください。囲碁将棋などボードゲームを作ろうとしている人には便利なライブラリです。Swift2系にもObjective-Cにも対応しているゲームアプリに関しては非常に万能なライブラリです。XやtvOSにも対応しているので幅広いデバイスで活用できるでしょう。以上、iOS開発で便利なライブラリを紹介しました。本格的なアプリを作ろうと思えば必ず必要になってくるので、知っておくといざというときに活用できるはずです。初心者の方は、Xcodeのインストール方法も合わせてご覧ください。[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。本稿は、Designmodeのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。Birch氏によって投稿されました。優れた旅行サイトには、優れたインターフェースがあります。地元のホテルのサイトから、大手の旅行会社の運営する機能が充実したポータルサイトに至るまで、優れたインターフェースにはユーザーを魅了する力があります。したサイトは、息をのむほど美しい画像や動画だけでなく、ハンバーガーボタン(3本の平行線で作られた「三」のような形をしたGUIのボタン要素)、パノラマビュー、パララックス効果(視差効果)、レスポンシブデザインのレイアウト、シネマグラフなどのテクニックを効果的に使っています。マルチメディア、テキスト、多様なテクニックをバランス良く組み合わせることで、質の高いユーザーエクスペリエンスを提供できるのです。ソーシャルメディアや予約システムなど観光客にとって欠かせないサービスも、サイトに上手く組み込むことを忘れてはなりません。今回は優れたインターフェースの旅行・ホテルのサイトを集めました。Elephantのサイトは、視覚的なデザインに優れています。マルチメディアが豊富に使われていて、まさにユーザーが旅行したくなるようなサイトです。動作性のある背景、動画、美しいグラフィック、細部までインタラクティブに設計されたデザインをすべて備えた旅行サイトは、なかなかありません。最先端のテクニックがいくつも使われています。トップページは、インタラクティブに設計された地図のデザインです。旅行の目的地のアイコンをクリックすると、予算を示すポップアップウィンドウが現れ、ユーザーは旅行プランを選べるようになっています。下のセクションに進むと、カード型の要素で作られたツアープランが並んでいます。使いやすく、またフレンドリーな印象のデザインです。目を見張るような美しい画像が使われています。画像の多くはページ全体に個々に配置されていますが、一部はフルスクリーンの画像スライダーで見ることができます。レイアウトそのものは伝統的なスタイルでありながら、コンテンツが良くデザインされています。ユーザーが楽しい余暇を想像できるようなデザインを実現したサイトです。近年人気のあるテクニックが使われています。ハンバーガーボタン、コンテンツの中央配置(レイアウトのセンタリング)、ゴーストボタン、パララックス効果(視差効果)などです。ゴーストボタンとパララックス効果によって、セクションからセクションへの移行が効果的に引き立てられています。コンテンツを鮮やかに引き立て、重要な細部に注目を集めるような工夫が見られます。コンテンツに高い比重を置いたインターフェースで、マルチメディアとテキストがバランス良く配置されています。TRIPS」というメニュー)には、画像、動画、ウィジェットが数多く配置されていて、ユーザーが情報を得やすい設計といえます。彩度の高いカラースキームによって、企業イメージを上手く伝えています。ボックス要素(四角形の領域から成る要素)の使い方が創造的です!5つの動画が、5つのボックス要素としてページ全体に配置されています。動画はナビゲーション要素としても機能しています。ユーザーを温かく歓迎するような雰囲気で、冒険に満ちた旅をイメージさせるデザインです。豪華でクラシカルな雰囲気のサイトです。美しい画像と、動きを持たせたイラストのパーツがいい組み合わせです。このホテルのヴィクトリア王朝時代から続く洗練された伝統が、よく伝わるような作りです。水平線のレイアウトとグリッドシステムを組み合わせたデザインです。ウォーターカラーエフェクト(水彩画のような色の表現)、アシンメトリーなボックス要素、ピクセルアート、ラインスタイルのアイコン(線で描かれたアイコン)などが使われています。予約システムはトップページの上中央に配置され、ユーザーが重要な機能にアクセスしやすいよう工夫されたレイアウトです。人目を引く効果の高い画像が使われています。各セクションには、リアルで質の高い画像が配置されていて、人々の好奇心を刺激するようなデザインです。2カラムのレイアウトにまとめることで、モダンな印象になっています。このポータルサイトには、パノラマビューの動画が使われていて、ホテル全体を周回して見渡せます。トップページには、縦方向にスクロールできるスライダーがあり、ユーザーの注目を集めやすいといえます。洗練されたイメージが伝わってくるサイトです。背景に使われているシックな画像は、ユーザーに旅行したいと思わせる効果がありそうです。ユーザーにとって重要な機能はサイトの右側にあるナビゲーションバーにすべてまとめられています。必要な情報がすべてサイト上に上手く収まっていて、なおかつトップページは整理されています。2カラムのアシンメトリーなレイアウトで、画像を引き立ててコンテンツを読みやすく配置しています。GermainWebデザイン【Webデザインの参考に!】海外のおしゃれサイトをまとめてみた!日本でデザインをしていても流行りのデザインなどは、海外から影響を受けることがよくあります。サイトのデザイン面は見る人にとって第一印象になります。そこで今回は、海外の洗練されたかっこいいサイトを紹介していきたいと思います。「このサイトおしゃれ!」と思ってもらうためにもデザインの参考にしてみてください。本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。流行りの動画背景をとりいれたサイトです。動画サイトは注意をしないと情報が読み取りにくくなりますが、そういったことのないようにこのサイトでは配慮されています。流行りのフラットデザインを取り入れた、こちらのサイト。訪れてみると、アニメーションに凝っており、初めは動いて立体的なのに、止まると途端に平面になるなんともびっくりするサイトです。流行りだしているタポグラフィの概念を取り入れたサイトです。スクロールしていっても、背景に文字という構図が繰り返されており、サイトに一貫性をもたせていることがわかります。海外で最近流行っているアニメーションに凝ったサイトです。音楽にもこだわっており10種類以上の音楽が使われています。自分の作品の情報をわかりやすくするためにできるだけシンプルにしてあるサイトです。凝った作りはないものの、フォントが雰囲気にマッチしておりとても見やすいサイトになています。画面の横いっぱいに広がるデザインが主流の中、昔のホームページのような配置のサイトです。フォント、色使いによってスタイリッシュな印象をもたせており、幅が狭いにもかかわらず、わかりやすいサイトとなっています。真っ白な背景にシンプルなデザイン。デザインの原点に返ったようなサイトです。このサイトに行くと、一瞬音が止まったような印象を受けます。凝ったサイトもおしゃれですが、こういったサイトもおしゃれですね。画像では分かりにくいですが、背景は3Dで出来ています。背景を3Dなど凝ったものにしてしまうと、情報が伝わりにくくなってしまうことが多いのですが、色合いによってそれをうまくカバーしています。今回は海外のおしゃれなサイトを紹介していきました。日本にも素晴らしいサイトはたくさんありますが、海外のサイトにもまた違った素晴らしさを感じます。デザインの引き出しを増やすためにも是非一度ご覧になってみてはいかがでしょうか。他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。おしゃれなサイトを作る力を身につけましょう!Webデザインシンプルでおしゃれ!無料で使えるBootstrapのテンプレートまとめ今回はBootstrapの無料テンプレートサイトを紹介します。bootstrapはTwitter製のライブラリで簡単にサイトのコーディングを可能にしてくれます。今の時代では必須要件である、レスポンシブウェブへの対応もBootstrapで実現することができます。手軽にスマホ対応もできるので、サイトを作ろうと思っている人はぜひ参考にしてみてください。本記事は、オンライン完結のBootstrap講座のカリキュラムをもとに執筆しています。このサイトは、Webページとしておしゃれなデザインを提供してくれます。地図などの実装も実現してくれます。見るとわかるのですが、グラフや数値の扱いが非常に美しいサイトになります。「地図だけでなく、数値を扱うサイトでスタイリッシュに攻めたい!」なんて時にお勧めです。このサイトでは様々な種類のテンプレートがあります。こんなページがコーディングしてみたいというものが無い方はここから入ると自分の好きなHPのイメージが付きやすいかもしれません。様々なテンプレートからお気に入りのものを探してみてください。スマートフォン用のページのサンプルも一緒に載っています。PCページだけでなくスマホぺージもお考えの方は参考にするといいでしょう。最後に紹介するのは「日本語を美しく表示するテーマ」「Honoka」です。いろいろなテーマがありますが、「Honoka」はその中でも珍しい「日本語を特徴的に強化すること」に注目したサイトです。日本語を美しくというのは日本のページならではであり、海外に向けた日本語の美しさをアピールすることもできるでしょう。この機会にぜひともbootstrapを導入して、Webサイトの更なるコーディングに繋げていきましょう。bootstrapは知識がなくともコーディングが可能になるライブラリですが、知識があればもっと自由度が増します。これを機会にHTMLやCSS、JavaScriptを勉強してみるのもいいのかもしれません。[お知らせ]TechAcademyではオンライン完結のBootstrap講座を開催しています。わからないことをチャットで質問すると、現役のWebデザイナーが毎日すぐに回答します。Bootstrap【厳選!】アプリ開発の参考に!おしゃれなアイコンやロゴまとめ10選アプリを開発し、リリースさせるとなると必ず必要になってくるものが「アイコン」です。人に使ってもらうアプリであれば、見た目の心地よさは重要な要因になってきます。アイコンは、スマホのトップ画面に表示されるものです。最近では、海外のデザイナーが作成したフリーで使えるアイコンの素材も多いので、ぜひチェックしておきましょう。具体的にXcodeを使ってアイコンを編集する場合は、XcodeでiPhoneアプリのアイコン画像を変える方法をご覧ください。本記事は、TechAcademyのUI/UXデザインオンラインブートキャンプの内容をもとに紹介しています。iPhone/iPadアプリのおしゃれなアイコンをまとめているサイトです。普段から使っているアプリでもアイコンのデザインを細かく見る人は少ないでしょう。自分でアイコンを作成する上でも役に立つサイトなので、ぜひ参考にしてみてください。有名企業のロゴを検索、ダウンロードできる便利サイトです。ロゴは、アプリの中でどのページにも出てくるほど重要なものです。個人で開発するアプリであれば、ロゴを発注するほどお金はかけられません。いえ、初めてロゴを作る人からしたら難しいものです。海外のサイトなので、海外のロゴが多いですがロゴ作成で勉強になりますね。ここからはDribbbleなどに個人で挙げているものを紹介していきます。天気や家具など日常的に使っているものを素材にしたアイコンが多くあります。ビジネス向けのアプリに活用できるアイコンが多いです。シンプルなものが多いですが、ニュアンスは的を射てる感じがしますね。自分で一から作ろうとすると大変なので、参考にしてみてください。女性のファッションに関するアイコンをまとめています。丸みを帯びたアイコンが多く柔らかい印象を与えるでしょう。いった細かい部分に関しては女性の方が敏感です。アプリを使っていて心地よいと思ってもらうためには、機能や画面遷移だけでなくアイコンなどにも気を配ることが大事でしょう。こちらは旅行に関するアイコンをまとめています。訪日外国人も増えてきていて、外国人へのサービス提供も活発化しています。言葉で示すよりもこういったアイコンで表現した方がユーザーも分かりやすいでしょう。数も多いので、旅行系のアプリを作ろうと思っている人はぜひ参考にしてみてください。記号を表すようなシンプルなアイコンをまとめています。位置情報や電波のマークなどあまり目にはつかないものかもしれませんが、細部にまでこだわりたい人にはおすすめでしょう。あるアプリのアイコンをポリゴン風にしているサイトです。自分では作れないほどクオリティの高いものが揃っています。いったのを参考に自分オリジナルのアイコンを作ってみても面白いと思います。クレジットカードに関するアイコンが並べられています。おしゃれというものは無いかもしれませんが、アプリ内で決済システムを利用する場合はかならず必要になってくるでしょう。Webサイトでも利用できるので、とても実用的ですね。CORPORATION.。