CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
![Webフレームワーク「Astro」を便利に使う~環境のカスタマイズとAstro 4.3までの新機能まとめ~](https://cdn-ak-scissors.b.st-hatena.com/image/square/6418d132b254fc7149708da73da4b14c8202b72d/height=288;version=1;width=512/https%3A%2F%2Fcodezine.jp%2Fstatic%2Fimages%2Farticle%2F19066%2F1200.png)
この記事は、技術書典 11 で頒布中の「Vivliostyle で本を作ろう vol. 5」から抜粋した記事です。ご興味ありましたら、Vivliostyle を使って組版された本誌もぜひお買い求めください! また、この記事以外の内容もすべて Vivliostyle 公式サイトで無料公開中です。 技術書やドキュメントを執筆する際、あなたはどのような形式で文章を書きますか? 最近ではもっぱら Markdown で書かれることが多いですが、この Markdown を拡張するポテンシャルを持つお気に入りの OSS プロジェクト「MDX」を紹介します。 MDX = Markdown + JSX MDX の名前の由来は Markdown + JSX なので、MDX を理解するためにはまず JSX について知る必要があります。 JSX とは JavaScript の拡張構文の一つで、元々 React の
はじめに ぼくはきょうみくんと申します。IT機器の総合サポートサービスを行っている日本PCサービス株式会社でマスコットキャラクターをしています。 ぼくは管理者として便利ツール集サイトを運営していて、便利ツールの1つとして和暦西暦変換ツールを提供しています。このツールはHuTime Web API- Calendar CalculationとJavaScriptで制作しています。 今回はHuTime Web APIを利用して和暦と西暦を変換するコードを紹介します。 HuTimeとは? HuTimeとは、時間に基づいて情報の可視や解析を行う時間情報解析ソフトウェアです。HuTime Web API - Calendar Calculationは、暦法の変換や暦法に基づく期間の計算を行えるAPIです。 ライセンス 執筆時点ではCreative Commons Attribution 4.0 In
本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行うものです。今回はMisskeyオフィシャルサイトであるMisskey Hubでも使用している、静的サイトジェネレーターVuePressについて紹介します。 図1 VuePressで構築されている「Misskey Hub」 静的サイトとは 静的なサイトを理解するにはまず動的なサイトを理解するのが早いと思います。 動的(dynamic)なサイトとは、簡単に言うと閲覧者のアクセスごとに内容をサーバーで生成するWebサイトのことです。例えばTwitterのようなサービスを考えると、表示されるタイムラインは閲覧者がフォローしているユーザーによって異なるため、同じtwitter.comへのアクセスでも異なる内容になります。 静的(static)なサイトとは、動的なサイトの逆で、そのWebサ
Webサイトを作るとき、表示速度を早くするために、静的ページを中心にしたいです。 静的ページ=早い:Webサーバーに置いたHTMLファイルをそのまま表示 動的ページ=遅い:アクセスのたびにプログラムでHTMLを生成して表示 Webサイトのコンテンツ制作を管理するCMS(コンテンツ管理システム)の中で、静的ページを作れるソフトは、「静的サイトジェネレーター」(Static Site Generator)と呼ばれています。 WordPressにも静的ページ作成のプラグインを入れたら、静的サイトジェネレーターとして使えますね。 jsstudy.hatenablog.com StaticGen 今どきの静的サイトジェネレーターにはいろいろあって、どれがいいのか?いまいちよく分かりませんでした。 とりあえずの検討材料として、「StaticGen」という静的サイトジェネレーターの人気ランキングがあった
小ネタです、JavaScriptで本日の日付をYYYY-MM-DD形式で得るコードは案外面倒です。 本日2023年4月17日なら 2023-04-17 という文字列を得るコードはRubyならTime.now.strftime("%Y-%m-%d")、Pythonならdatetime.today().strftime("%Y-%m-%d")(importは省略しました)と簡単に書けますが、JavaScriptでは案外面倒なのです。 追記: いくつかの間違いのご指摘がありましたので修正しました(2023-04-19)。 DeepAIが生成した画像です いっけん正しいようで間違ったコード new Date().toISOString().slice(0,10) new Date()で本日の日時を取得します toISOString()メソッドは日時データをISO形式の文字列に変換します、例えば 2
Windowsの場合は2つ目の「Publii.exe」ですが、64bit版しかないのでご注意ください。 使用OSの確認方法 ダウンロードしたファイル(Publii-x.xx.x.exe)をダブルクリックすると、インストールが始まります。 ファイル名に含まれる「x.xx.x」はバージョンを意味します。当記事作成時のバージョンは「0.35.1」です。 画面表示に従ってインストールを済ませます。 Publiiの起動 インストールの時に作成したショートカットアイコン、もしくはスタートメニューのPのところから起動します。 起動するとサイトを作る画面が表示されます。 といっても、サイトの名前と管理者名を入力して「Create website」をクリックするだけです。 Publiiではサイト作成に必要な画面を左側のメニューで切り替えるようになっています。 尚、作成したサイトのデータは、以下の場所に保存さ
こんにちは!ChatWork CTOの山本です。 ChatWork Advent Calendar3日目を担当します。 今回は、ChatWork社内でサイト制作に使っている、デザイナ向け静的サイトジェネレーター「Phest(フェスト)」というツールを公開します! >>PhestのGitHubリポジトリはこちら 静的サイトジェネレーターって?静的サイトジェネレーターとは、テンプレートなどプログラム的な処理を実行し、 HTML/JavaScript/CSS/画像などだけで構成された静的なWebサイトとして書き出すツールのことです。 Webサイトをつくる上で共通のヘッダやフッタなどは、PHPやSSIなどのinclude構文を使ったり、 そもそもWordpressなどのBlogやCMSなどを使って構築するケースが多いと思います。 静的サイトジェネレーターは、そういったシステムが必要な部分をあらかじ
週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス
IntroductionFor a long time, centering an element within its parent was a surprisingly tricky thing to do. As CSS has evolved, we've been granted more and more tools we can use to solve this problem. These days, we're spoiled for choice! I decided to create this tutorial to help you understand the trade-offs between different approaches, and to give you an arsenal of strategies you can use, to han
続いてそれぞれのユースケースについて、具体的な使い方を解説します。 Figmaの使い方・操作方法 デザインをもとにコーディングする場合 ‐ Dev mode Dev modeの利用がおすすめです。現在ベータ版で公開されており、2024年中に有料プランのみ使用可能となります。 主な機能として、作成したデザインをもとにコードを自動で生成させることができます。CSS、iOSのSwiftUI、AndroidのXMLなどに対応しています。 具体的な使い方は次のとおりです。今回はログイン画面を例にしています。 画面をセクションで囲む セクション名の右横のコードアイコンをクリック Open in Dev modeでDev modeに切り替える コード化したいコンポーネントを選択すると、右側のInspectでコードを参照できる ワイヤーフレームを作成する場合 ‐ コンポーネント機能 コンポーネント機能を利
【速報&朗報】GPT Storeが遂に公開 待ちに待ったGPT Storeが遂に公開されました!🔥 公式発表によると、GPT公開からのたった2ヶ月で300万以上のGPTsが作成されているとのこと。 注目ポイント👀 ・毎週Open AIからの注目GPTsが特集される… pic.twitter.com/94WCTnwDiJ — 木内翔大@SHIFT AI代表「日本をAI先進国に」𝕏 (@shota7180) January 10, 2024 ChatGPTには「GPTs」という機能があり、ユーザーがChatGPTを自由にカスタムできます。さらにGPT StoreではGPTsが公開され、将来的には収益化も可能になる予定です。 AIを使って稼げる時代が、目の前まで来ていますね。今回は、そんなGPT Storeの中で最も人気のあるGPTsトップ10をご紹介します。 ビジネスや情報整理など、様々
データセンター・エンジニアリング関連サービスの企画と開発を担当。もともとアプリ開発でスクラムマスターを経験しアジャイルに造詣が深く、世界のDX推進をインフラ設備から支えたいと考えている。 私の所属するチーム(基盤エンジニアリング本部基盤サービス部サービス開発課)では、DX edgeというエッジデータセンターソリューションを開発・運用しています。お客様の社内に設置したエッジデータセンターをIIJが遠隔で運用保守するマネージドサービスも提供しています。リモートから監視・運用するために、IIJ IoTサービスを活用した運用保守用のリモートアクセスする仕組みとゲートウェイ機器(リモートアクセスボックス)を開発しました。 先日、あるお客様から手軽に社内サーバへアクセスするためにこの仕組みが便利そうなので譲ってくださいとお願いされました。そこで、このリモートアクセスボックスを提供したところとても高評価
2023年も終わりに近づき、この1年間に収集したツールを振り返りながら、Web制作に役立つお気に入りを見つけてみましょう。 素晴らしい新ツールや素材がたくさんリリースされ、選定にはたっぷり時間がかかりましたが、カテゴリ別に幅広くセレクションできました。 本当に役立つかどうかだけを考え、「これ、神ツール。」と思えるものをピックアップ。 話題の的だったAIをうまく活用すれば、ワークフローを格段にスピードアップさせ、面倒な作業もストレスなくこなすことができます。 この記事では、そんなあなたの役に立つ2023年公開のWebデザイン制作ツールや素材をまとめてご紹介します。 整理したカテゴリは以下の通り。
おそらく 2023 年に Zenn で出す最後の記事になるかと思います。 タイトルの通り、2023 年に読んだ本の中で、特に素晴らしかったものをご紹介します。 とはいえあまり今年は技術書を読んだ印象がなく… というのも、特定の xx(例えば Next.js、Ktor)といった部類に関しては公式のドキュメントを読むことがほとんどになり、書籍に求めるのは公式ドキュメントに書かれていない何かや誰かの経験・ノウハウになったからだと思います。 この記事を書くにあたって今年読んだ本を振り返ってみても、やはり十数冊程度(それでも月に 1 冊は読んでた)のでインプット:アウトプットの割合的には良いバランスではないかと思っています。 ただ、先に述べた通り公式ドキュメントに書かれていないなにかを売っている本というのはどれも本当の意味で価値があるものであり、皆さんにも本当に意味のある情報にお金を使っていただける
はじめに 今回はエンジニア初心者から中級者が読むべき書籍を10冊厳選して紹介します。 1年目の自分に読んでもらいたい書籍としてまとめました。 リーダブルコード エンジニアの必読書 他の人が理解しやすいコードの書き方が学べる 我流からの脱却 豊富なコードが掲載されているので実践しやすい 「美しいコードを見ると感動する。優れたコードは見た瞬間に何をしているかが伝わってくる。そういうコードは使うのが楽しいし、 自分のコードもそうあるべきだと思わせてくれる。本書の目的は、君のコードを良くすることだ」(本書「はじめに」より)。 コードは理解しやすくなければならない。本書はこの原則を日々のコーディングの様々な場面に当てはめる方法を紹介します。 名前の付け方、コメントの書き方など表面上の改善について。コードを動かすための制御フロー、論理式、変数などループとロジックについて。 またコードを再構成するための
はじめに この記事では私が普段使っている、グリッドシステムを使ったレスポンシブなデザインカンプのフレームワークを紹介します。主にデザイナー初心者や1~2年程の経験者向けの内容です。 フレームワークを作成した経緯 私は仕事で主に所謂Web制作と言われるWebサイトのデザインと実装を両方やっており、業界的に納期が短い中でいかに高いクオリティのものを作るのかが課題だと感じています。深夜や休日も使ってなんとか仕上げることも業界全体の傾向では少なく無いと感じますが、どうしても限界があるので何かしら効率的なものが必要だと思いました。 そこでデザインカンプを作成するときにデザインの情報としての配置にデザイン4原則を取り入れて、ロジックに則ったレイアウトを設計できるフレームワークを作り、レイアウトに迷う時間を短縮しようと考えました。フレームワークを元にすることで、そのサイトならではのコンセプトを体現したレ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く