Next.jsの新常識「App Router」を学ぼう！
Next.jsは、ルーティングとサーバー処理を高度に協調させるためのフレームワークとして、デファクトスタンダードの地位を確かなものにしています。2023年5月5日に公開されたNext.js 13.4において、フレームワークの根幹であるルーティング機構を刷新する新機能が追加されましたので、今後のNext.jsはどんな世界観で扱えばいいのかを解説していきます。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Ventura 13.4 Node.js 20.2.0／npm 9.6.6 React 18.2.0 Next.js 13.4.4 より直感的なルーティング、よりサーバーを活用したレンダリング Next.jsは、ReactでWebサイトやWebアプリケ
小規模な受託開発におけるAWSインフラ環境～工数削減のポイントとセキュリティ (1/3)：CodeZine（コードジン）
本連載では、比較的「小規模」な「受託」開発を実施する際のAWS活用の勘所を、実際の開発現場での経験を元に紹介します。大規模な開発では当てはまらない部分もあると思いますが、可能な限りインフラ関連の工数を少なくし、効率的に開発を実施するために、最低限抑えておく実務上役立つ点について、解説します。本記事では、小規模なフルスクラッチの業務システムをビジネスとし、開発を実施する際に参考となるAWSのアーキテクチャや工数のかかる工程、留意すべきセキュリティに関するポイントを紹介します。 はじめに 比較的小規模なフルスクラッチのシステム開発（1〜20人月程度）を受託するビジネスとする場合、AWS上に「多層アプリケーション（Web層、AP層、DB層）に即したインフラ環境を構築する」ことが多いと思います。 多層アプリケーションの構成例 このような構成をシステム毎、顧客毎に構築することになりますが、AWSで構
Yahoo! JAPANのスマホアプリ開発で取り入れられているUI/UXデザイン技法
UXデザイナーの瀧さんは、社内で「デザイン思考」を推進する活動を行っているそうです。今回の発表では、スマートフォン向けのサービスに適したUXを考える際のアプローチ方法について、実際の体験談を交えながら解説しました。 デザイン評価手法の一つ「アクティングアウト」 「アクティングアウト」はデザイン評価の方法の一つであり、アイデアを実際に利用する環境で体験してみることで、アイデアを検証できたり新たな発見を得られたりします。スマートフォン向けのサービスは利用者の環境がさまざまであるので、特に有効だそうです。 「アクティングアウト」の活用事例 瀧さんのチームでは、おでかけサポートアプリ「way」（現在は提供終了）を作るときにアクティングアウトを活用したそうで、その時のプロセスが説明されました。まず、最近印象に残っている「おでかけ体験」を文章にして、その中から心に残る体験につながっている要素を抽出しま
Node.jsのWebフレームワーク「Sails」を使ってpub/subアプリを作ってみる
Sailsとは Sailsは米国オースティンにあるBalderdash社のMike McNeilさんを中心として作成されているMVCフレームワークです。スタイルとしてはRailsに近い形を取りつつ、最近のWebアプリ開発に向けたいくつかの特徴を持っています。 主な特徴としては Web APIを簡単に作成し、公開できる リアルタイムWebなアプリケーションが簡単に作成できる Single Page SiteやMobileなどの多様なフロントエンドに対応できる といったようなものが挙げられます。 Web APIについてはJSONベースのRESTfulなAPIが簡単に作れるようになっています（Sails API blueprints）。特にAPIを作るという意識をせずとも、generatorによって単純なCRUDならすぐにAPIとして公開することができます。ルーティングについても、この手のフレー
YOLPでiPhoneアプリに挑戦～最寄コンビニ案内アプリ
はじめに YOLPで提供している「Android Map SDK」は、連載第1回目で紹介しましたが、今回は「iOS Map SDK」と、応用範囲の広いYOLP「ローカルサーチAPI」を組み合わせた利用例をご紹介します。 アプリ概要 今回のアプリでは、以下の機能を実装します。 現在地を取得し、現在地周辺の地図を表示する 現在地周辺のコンビニの情報を取得し、地図上にピンをたてる ピンをタップすると、ポップアップでコンビニの情報を表示する ポップアップにボタンを追加し、タップすると現在地からそのコンビニまでの道のりを表示する 開発環境の準備 まずは、「iOS Map SDK」を使うための事前準備を行います。 1. iPhoneアプリ開発環境を用意 お使いのMacにXCodeをインストールし、開発環境を設定してください。 iOS Dev Center XCodeのダウンロードには、AppleIDが
大規模ソーシャルゲーム「ドラゴンコレクション」運営の最前線で得られたノウハウ ～チューニングと運用、18のポイント～
11月25日、「mobidec 2011」においてコナミデジタルエンタテインメントのスタジオITセンター長である正延光弘氏によるセッション「大ヒットSNSゲーム『ドラゴンコレクション』を支えるコナミのクラウド技術の活用」が行われました。 ドラゴンコレクションは、GREEで提供されている携帯電話向けのカードゲームタイプのRPG。プレイヤーは、エリアごとにある複数のクエストをクリアしていき、モンスターカードや「秘宝」を手に入れ、さらに「ドラゴンカード」を集めていきます。また、ほかのプレイヤーとバトルすることでも秘宝を入手できるというSNS要素も取り入れられていました。2010年9月のサービス開始後、順調にプレイヤー数を伸ばし、現在では登録人数が500万人を超えています。 サービス開始当初は社内でサーバを構築し、フロントエンドに6台のサーバ、バックエンドに3台のデータベースサーバ、そしてロードバ
HTML5で進化したフォーム機能 ここが違う！サンプルで見るHTML5（5）
はじめに この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。 過去の連載も読む 第1回：HTML5が注目を浴びる理由とは？ 第2回：HTML4から変化したHTML5のマークアップ 第3回：HTML5で再定義された要素と属性 第4回：HTML5で実現できるマルチメディア系機能 新たに導入されたフォームコントロール これまでウェブにおける入力フォームコントロールは、非常に限られたものしかありませんでした。皆さんがよくご存じのテキスト（パスワード）入力フィールド、ラジオボタン、チェックボックス、セレクトメニュー、テキストエリア、ファイル選択です。お問い合わせフォームであれば、ほとんどのシーンで十分といえるでしょうが、ウェブアプリケーションにおいては、不足してい
グリーCTOが語る、大規模ソーシャルゲーム開発の舞台裏
9月1日、ゲーム開発者向けカンファレンス「CEDEC 2010」において、SNS「GREE」を運営するグリー株式会社（以下 グリー）が『大規模ソーシャルゲームのつくりかた ～60分でわかるサーバサイド技術～』と題するセッションを講演した。 一日あたり億単位のトラフィックを捌くインフラはどうなっているのか。技術者2名が解説したインフラ構築のノウハウや、ソーシャルゲームと一般のオンラインゲームとの違いについて紹介する。 オンラインゲームとソーシャルゲームとの違い 最近テレビCMでも目にする機会が多くなってきたSNS（ソーシャルネットワーキングサービス）の「GREE（グリー）」。2010年6月時点の数字で、会員数2059万人、月間353億ページビューという言わずとしれた大人気サイトだ。中でも携帯電話向けソーシャルゲームが特徴的で、専用機向けのゲームと比べるとコアゲーマー以外のプレイヤーも多く、利
原文をスラスラ読みたい！ 「MSDNライブラリによく出る英単語 100選」（1/2）：CodeZine
はじめに MSDNライブラリには、マイクロソフトの技術情報が大量に掲載されていますが、英語版に比べ、日本語版の内容は中途半端なのが実状です。 たとえば、スレッドの優先順位を設定する「SetThreadPriority」関数の説明を見ると、英語版には「Windows Server 2008およびWindows Vistaでは、スタートアップやレジストリのRUNから自動実行されたプログラムに対するスレッドの優先順位指定が、システム開始から60秒程度効かない」との注意書きがありますが、日本語版にはありません。 また、仮想ディスクの情報を設定する「SetVirtualDiskInformation」関数を検索すると、英語版には説明がありますが、日本語版には項目自体がありません。 そこで本記事では、MSDNライブラリの英語版がスラスラ読めるように、とはいきませんが、英単語で引っかかることが少なくなる
ScalaによるWebアプリケーションフレームワーク「Lift」とは
Java仮想マシン上で動くオブジェクト指向＋関数型言語として、Scala（スカラ）が最近注目を集めています。Scalaで構築されたWebアプリケーションフレームワークはいくつかありますが、 本連載ではその中で比較的歴史のある（といっても2年程度ですが） フレームワークである、Lift（リフト）を紹介したいと思います。 はじめに Java仮想マシン（以下JVM）上で動くオブジェクト指向＋関数型言語として、Scala（スカラ）が最近注目を集めています。 Scalaで構築されたWebアプリケーションフレームワークはいくつかありますが、 本稿ではその中で比較的歴史のある（といっても2年程度ですが） フレームワークである、Lift（リフト）を紹介したいと思います。 対象読者 Javaは知っているが、Scalaも学んでみたいと思っている方 ScalaでのWebアプリケーション開発に興味がある方 必要な
Google App Engine for Javaを使ってみよう！ （1）Google Plugin for Eclipse
2008年4月7日に発表されたGoogle App Engineが、ちょうど１年後の2009年4月7日にJavaに対応したことが発表されました。さらに、Java開発には必須のEclipse用のプラグイン「Google Plugin for Eclipse」が同時に発表され、Java利用者は簡単にGoogle App Engine用のプログラム開発とEclipse上からのデプロイができるようになっています。今回はそんな便利な「Google Plugin for Eclipse」の使い方を説明します。 はじめに 2008年4月7日、Googleのインフラでウェブサービスを展開できるという「Google App Engine」が発表され世界中が驚かされました。この時点では利用できる言語としてPythonのみがサポートされており、Pythonの開発者がGoogleの社員であることを考えると当然なの
Webサイトの制作／運用の効率化を図る 「ガイドライン策定」のすすめ（前編）（1/4）：CodeZine
Web標準に従うことは、SEO効果、ユーザービリティ、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従ってWebサイトを制作しようとすると、制作者の頭を悩ませる多くの問題が待っています。本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。 はじめに Web標準に従うことは、SEO効果、アクセシビリティ、ユーザービリティ、相互運用性、互換性、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従って「正しい（X）HTML+CSS」でWebサイトを制作しようとすると、制作者の頭を悩ませる多くの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
データベース設計の煩雑な作業を自動化する「ERMaster」
YOLP Hacks： ローカルサーチAPIの使い方 ～パラメーターを極める！
グリーに学ぶ、スマートフォン開発向けWebアプリ要素の最新技術 ～HTML5、CSS3を採用したポイントとは
HTML5とCSS3を使ってスマートフォン向けサイトを構築 － iPhone版Yahoo!JAPANトップの開発事例紹介
GPS携帯を使った口コミサイト構築 - PHPによるメールの受信処理 -
初めてのCatalyst入門（1） PerlによるWebフレームワークCatalystとは？
言語別フレームワークの比較 ～Perl/Ruby/PHPユーザーのためのMVCフレームワーク入門～ (1/6)：CodeZine（コードジン）
find／grep／xargsコマンドを使いこなす 業務で楽するためのUNIXテクニック集「検索」編