Next.jsでCMSにMDX形式で登録したコンテンツを利用する ―next-mdx-remoteの使い方― - あなたとあなたの話がしたい
Jamstackな構成では、CMSにどのような形式でコンテンツを登録するかが関心になって来るかと思う。 Markdownを採用する場合は、remark-reactやremark-htmlを使ってMarkdownをHTMLに変換できる。 ただ、実際にはMarkdownだと機能的に足りない部分が出て来そうで、MDXという、MarkdownにJSX（Reactコンポーネント）を埋め込める形式を利用すると捗る。 しかしこのMDX、CMSのような外部コンテンツとして登録する場合はどう使えば良いんだ？と思ったら、Next.jsの場合、next-mdx-remoteという便利なライブラリがあった。 next-mdx-remoteの使い方 例として、Next.jsのImageコンポーネントを利用してみる。 # プロフィール画像 <Image src="/images/profile.jpg" width=
配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA
JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた
TypeScriptは滅びる。確実に
TypeScript（TS）がJavaScriptの代わりになるだと？確かに型を使えるのは良い。意味不明なオブジェクトを操作しまくって意味不明な動的型付けするJSに型が追加されたら、そりゃバグも減るだろうよ。でもそれは意味不明なオブジェクトを操作し、再代入を繰り返すレベルの低いJSerの責任だ。コーダーの責任なんだよ。Pythonも意味不明なオブジェクトを操作しまくるが、JSほどはひどくならない。Pythonも型ヒントなんてものが導入されたが、誰が使うんだこんなの。果てしなく冗長になって糞だ糞。DocStringを充実させるのと型ヒントを充実させるの、どちらがどれだけメリットが有るっていうんだ。DocStringで十分だろ。全員アホだ。話をTSに戻そう。 散々文句を言ってしまったが、型が使えるのにはこしたことはない。TSを始ようじゃないか。TSをインストールしよう。Node.jsをまずイン
Visual Studio CodeでのJavaScriptのデバッグ方法 - ICS MEDIA
マイクロソフトが無償で提供しているコードエディター「Visual Studio Code（略称：VS Code）」はGoogle ChromeやMicrosoft Edgeのデバッグ機能と連携できます。VS Code上でブレークポイントを設定してコールスタックを確認したり、ステップ実行や変数のウォッチなどを行えます。複雑なJavaScript開発を行っている方は、デバッグ機能を使うことで、効率のよい開発体験を得られるでしょう。 本記事ではデバッグ機能を使うためのVS Codeの導入方法について説明します。 導入手順と前提 VS Codeにはデフォルトでデバッグ機能が搭載されています。 ※2021年8月以前のVS Codeでは拡張機能「Debugger for Chrome」の導入が別途必要でしたが、今のVS Codeでは拡張機能をインストールする必要はありません。 本記事では、ウェブページ
Vue.js + FirebaseでToDoアプリを構築 - UEQareer
firebase 勉強会 この記事ではvue.jsとfirebaseを使って認証機能の実装とrealtime databaseを使ったtodoアプリの実装方法を解説します。 firebase firebaseはBaaSと呼ばているサービスでフロントエンドコードのホスティングやDBなど 本来であれば自前で構築が必要なサーバサイドの機能を簡単に利用するためのサービスです。 webアプリケーションに限らずスマートフォンアプリでも利用することができます。 主なサービスは以下のようになっています。 リアルタイムデータベースリアルタイムで同期可能なデータストア Firebaseクラウドメッセージングpush通知 FirebaseAuth ログイン機能。メールアドレスとパスワードを利用する基本的なものからFacebook, GitHub, Twitter, Googleといったサービスのソーシャルログイ
2018年 React Nativeで真剣なアプリを開発するなら、絶対使うライブラリー！ - KOKENSHAの技術ブログ
ここで、私が、React Nativeでアプリを開発する際に、実際に使っているライブラリーと「この機能でしたら、絶対これでしょう」というライブラリーをご紹介していきたいと思います。 React Nativeの開発で、全ての機能を全部自分で書くわけにも行きませんので コミュニティが開発している優秀なものがあれば、どんどん活用すべきですね。 しかし、オープンソースになっている以上 品質も自分で、しっかり見極めて、選別しないと 後になって、大変なことになります。 途中から、別のライブラリーに乗り換えもできますが、プログラムの修正、テストなどで大変な工数を消耗してしまいます。 なので、この文章を通して、みなさんライブラリー選別の際に、ご参考になれば嬉しいです！ 「これもおすすめ！」というライブラリーやコンポーネントがあれば、ぜひ教えてください！ https://facebook.github.io
何故私は Heroku から離れたか、および新しい AWS セットアップのメモ
whyILeftHeroku.rst 何故私は Heroku から離れたか、および新しい AWS セットアップのメモ 原著者:Adrian Holovaty 原文:Why I left Heroku, and notes on my new AWS setup 金曜日、私は Heroku から Amazon Web Services(AWS) を直接使うように Soundslice を移行しました。私はこの変更ができてとても、そうとても嬉しくて、私がどうやったかということと、もし皆さんが同じような立場だったら何故それを検討すべきかということについて広く伝えたいと思います。 私の Heroku 体験 Soundslice はサイトを立ち上げた2012年11月からずっと Heroku 上にありました。いくつか理由があって、私は Heroku を使おうと決めました: システム管理者でいるのは趣味
Question2Answerを使ってさくっとQ&Aサイトを作ってみた - あとーすログ
去年から小説を書く人のためのQ&Aサイトを作りたいなと思っていたのですが、お仕事はバリバリの営業職でエンジニアともWebデザイナーとも程遠いところにいるので、自分で作るのは諦めていました。 そこで、前から別のブログで使っているWordPressでどうにかできないかと探して見たところ、いくつかQ&Aサイトを作るためのプラグインが見つかりました。 しかし、僕が使っているテーマとの兼ね合いかデザインは崩れてしまうし、ブログ執筆用のアカウントとQ&Aページ用のアカウントがごっちゃになったりして、あまりいい状態とは言えませんでした。 これは自分で勉強して構築するしかないのか…？ と思った矢先、検索しているとQuestion2Answer（以下、Q2A）というフリーソフトウェアを見つけてそれを使って見ました。 ただ、日本語で解説されているページがほとんどなく、本当に導入できるのだろうかと挑戦しようと思
SCOUTER開発者ブログ
2024-04-29 CSSってどんな勉強をしたらいいの？おすすめの勉強法3選！ 文字やタブなどWebサイトのデザインを作成するマークアップ言語がCSSです。 CSSを勉強すると、おしゃれなWebサイトやかっこいいWebサイトが作れるようになります。 また、Webサイトを作るときに必要なHTMLを理解するのにも役立ちます。 CSSを勉強するならできるだけ効率よく勉強できるようになりたいですよね。 ではCSSの勉強法はどのようなものがあるのでしょうか。 CSSの勉強法は、スクール […] 2024-04-29 WEBエンジニアから見たXserverの使い勝手と評判 レンタルサーバーのおすすめサイトを見ると、大体どこでも上がってくる有料のレンタルサーバーの一つに「Xserver」があります。 このXserverとは、どのようなサーバーで、サービスにはどのようなものがあるのか。 ホームページ関連
Firebase Cloud Messaging (FCM) で Web Push 通知を実装してみた – rilakkuma3xjapan's blog
Overview 「Web Push 通知を実装してみた」で Web Push 通知の概要と, web-push モジュールを利用した Web Push 通知の実装を記載しました. しかしながら, web-push モジュールを利用した Web Push 通知は鍵のやりとりが少々煩雑で実装も複雑になってしまいます. Firebase Cloud Messaging (FCM) を利用すると, 鍵のやりとりの代わりにトークンを利用することで Web Push 通知を簡単に実装することができます. What is Firebase Cloud Messaging ? クロスプラットフォームのプッシュ通知のためのソリューションです. 詳細は, こちらのドキュメントを参考にしてください. How to use Firebase Cloud Messaging ? Firebase console
WordPress - ページネーションのSEO ( rel=”canonical” / “next” / “prev” ) | ブログ | STUDIO BUS STOP | 香川県高松市
ブログ記事や商品などの一覧を複数のページに分けてページネーション（ページ送り）を設置することがありますが、この場合にrel=”canonical”/”next”/”prev”をマークアップすることで閲覧ユーザーに加えて検索エンジンにも「続きものページ」であることを伝えることができます。今回はWordpressで構築したサイトにSEO関連プラグインを使用せずに実装する一手間について。 まずは設定完了後の内容です。下記のようにタイトルとディスクリプション、前後のページURLをheadタグ内にマークアップされるように設定します。現在表示しているページは「rel=”canonical”」を、前のページがある場合は「rel=”prev”」、後のページは「rel=”next”」をlinkタグに付けます。canonicalのURLを先頭ページに設定する方法がありますが、rel=”next”/”prev”
SCOUTER開発者ブログ
2024-04-29 CSSってどんな勉強をしたらいいの？おすすめの勉強法3選！ 文字やタブなどWebサイトのデザインを作成するマークアップ言語がCSSです。 CSSを勉強すると、おしゃれなWebサイトやかっこいいWebサイトが作れるようになります。 また、Webサイトを作るときに必要なHTMLを理解するのにも役立ちます。 CSSを勉強するならできるだけ効率よく勉強できるようになりたいですよね。 ではCSSの勉強法はどのようなものがあるのでしょうか。 CSSの勉強法は、スクール […] 2024-04-29 WEBエンジニアから見たXserverの使い勝手と評判 レンタルサーバーのおすすめサイトを見ると、大体どこでも上がってくる有料のレンタルサーバーの一つに「Xserver」があります。 このXserverとは、どのようなサーバーで、サービスにはどのようなものがあるのか。 ホームページ関連
SCOUTER開発者ブログ
2024-04-29 CSSってどんな勉強をしたらいいの？おすすめの勉強法3選！ 文字やタブなどWebサイトのデザインを作成するマークアップ言語がCSSです。 CSSを勉強すると、おしゃれなWebサイトやかっこいいWebサイトが作れるようになります。 また、Webサイトを作るときに必要なHTMLを理解するのにも役立ちます。 CSSを勉強するならできるだけ効率よく勉強できるようになりたいですよね。 ではCSSの勉強法はどのようなものがあるのでしょうか。 CSSの勉強法は、スクール […] 2024-04-29 WEBエンジニアから見たXserverの使い勝手と評判 レンタルサーバーのおすすめサイトを見ると、大体どこでも上がってくる有料のレンタルサーバーの一つに「Xserver」があります。 このXserverとは、どのようなサーバーで、サービスにはどのようなものがあるのか。 ホームページ関連
もう見た？GitHub最新人気リポジトリTop25総覧【2017年9月版】｜ハイクラス転職・求人情報サイト AMBI（アンビ）
もう見た？GitHub最新人気リポジトリTop25総覧【2017年9月版】 GitHubで直近1年に作成されたリポジトリの中から、スター数が多いリポジトリ上位25個を収集！読み物からソースコードまで、皆さんの開発に役立つ要素満載です！ 世界中の開発トレンドはGitHubにあり。 今回は直近1年に作成されたリポジトリの中から、スター数が多いリポジトリ上位25個を収集し、ジャンル別に整理しました。また、より内容を把握しやすくするため、各リポジトリの概要も記載しています。 上位にはソースコードだけでなく、開発に役立つ読み物系のリポジトリも多数。ぜひ参考にして、あなたの開発をブラッシュアップしてください。 読み物 Roadmap to becoming a web developer in 2017 Best websites a programmer should visit The Syste
【前編】「怖くないキラキラしてないInstagram」を目指して写真投稿SNS「Culon」を作ってみるまでの流れとユーザー獲得戦略について - 考えすぎてしまう人のブログ
どうもせせりです:) 「どうやって人を集めるの？」「実際に出来上がる流れを教えてほしい」「モチベーションの維持は？」というコメントを沢山貰ったのですが、作るサービスの種類や性質によってケースバイケースなので実際に一つサービスを作りそれを使って説明しようと思い立ちました まず、僕がサービスを作る時にどういった流れで作り上げるのか6項目で説明しながら細かいところを解説し 次の記事で実際にどういうところに気をつけているのか書きます 1.サービスのアイデアを固めて「一言でイメージを説明する」 突然ですがみなさんInstagram好きですか？僕は好きです！ただ…… Instagramの仕組みは面白い でも自撮りとかアップするのには抵抗があってご飯写真をひたすらアップするだけ or 見るだけ キラキラしてないものを投稿しづらい ゲームのスコアとか上手く行った動画とかサブカル系のものもアップしたい ネッ
Debugging Service Workers
Google Developers Codelabs provide a guided, tutorial, hands-on coding experience. Most codelabs will step you through the process of building a small application, or adding a new feature to an existing application. They cover a wide range of topics such as Android Wear, Google Compute Engine, ARCore, and Google APIs on iOS. Codelab tools on GitHubnorth_east ��uE�U p �E�U
CGM運営で重要なことと具体的事例 - 魔法剣乱れ打ち
CGMについて、死ぬほど勉強になることが転がっていたので引用します。 【参考】国内のWEBサービスの成功事例とか要因とか課金方法のまとめ 鳥井 謙吾さん 楽天がクックパッドに勝てなかったワケ 株式会社チームデルタ CGMって何 CGM＝consumer generated media：エンドユーザーがコンテンツ（サイト）を創っていくものを指します。 facebookやtwitterもそうだし、nanapiや知恵袋系、転職会議とかcookpad、youtubeとかもそうです。 どうすれば投稿してもらえるの？ ユーザー心理の細かい分析はビルドでもめっちゃ大事にしています。 ユーザーがなぜ動くのか？なぜこの機能を使うのか？なぜこのボタンを押すのか？みたいな話を、細かく丁寧に考えていくのはすごく成否を分けるポイントです。 簡潔に言うと「ユーザー動機を明確にしてPDCA回しまくる」こと。 ユーザー動
【Grid Animation（グリッド・アニメーション）】動くCSSグリッドのユニークでクリエイティブな制作例10選！
ご承知のとおり、CSSグリッドは複雑なレイアウトを作るための従来のやり方をすっかり一新しつつあります。 この新たなスタイルは、グリッドシステムを構築することで、これまでデザイナーがやりそろえなければならなかったこまごました面倒をすべて不要にしました。 どんなデヴァイスにも自動的に適応し、デザイナーが意図したように機能してくれます。 ブラウザ・サポートがまだ限られていますが、すでに多くのデザイナーがこのCSSグリッドをユニークな仕方で使う実験をしています。 本記事では、「使い勝手が良い」ものから思わず「あっ」と言ってしまうようなものまで、10の素敵な使用例を集めました。 CodePenも付記しますので、ぜひご自分でもいろいろ試してみてください。 なお、CSSグリッドの基本については以下の記事を参考にしてください。 ・CSS入門グリッド作成ガイド【複雑なレイアウトも簡単に作れる！】 グリッドデ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
編集者向け管理画面の開発やメンテナンスに別れを告げよう
TechCrunch
