Webサービスを作るときのテンプレートを作った - hiroppy's site
週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス
最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう
Jsonnetの薦め - Qiita
JsonnetというJSONテンプレート言語を紹介する。 後で見るように、これはJSONを生成するための汎用テンプレートというよりはむしろ、計算や依存関係を含む設定を静的に書き下すために便利なのではないかと考えられる。 実際Jsonnetの仕様はGoogleのBCLに似ている。BCLはGoogleでコンテナクラスタシステムBorgの設定を記述するために使われている言語だ。 JSONテンプレート言語 ある意味でJsonnetは毎度おなじみのやつだ。JavaScriptの文法の不便さに対してalt JSが多数出てきた。CSSにおけるネストの分かりづらさやの記述の重複に対してCSS preprocessorが多数出てきた。それと同じようにして、Webにおける機械可読データのLingua FrancaたるJSONを記述するのが不便なのでJSONテンプレートが出てきた。 Jsonnetはその中の1つ
もうデザイナーいらないって言われた話【無料デザインツールCanva】 - Qiita
みなさま、こんにちは。 プラコレアドベントカレンダー2019も折り返して、8日目。 冒険法人プラコレのデザイナーzukaです。 （投稿が遅れてしまいました。本当に申し訳ございません。） なんだかんだとデザイナー歴３年目。 少しずつ社内で力になれることも増えて、毎日充実しております。 令和初のクリスマスも間近に迫り、 女性率の高いプラコレ社内は一層明るい会話も飛び交っておりますが、 先週、信じられない発言が私の耳をつんざきます。 “もう、自分でつくれちゃうから” えぇ…………。 私たちはDressy（ドレシー）というブライダル系メディアを運営しており、 多くの花嫁さまのハートをきゅんとつかむようなコンテンツを 365日毎日発信し、業界へ新しい価値を提供しております。 なかでもデザイナーの役割といえば、 良質なグラフィックを作り出し、企画を盛り上げること。 かつての広告バナー100000000
管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla
商用のプロジェクトでも無料で利用できる、管理画面・ダッシュボードのレイアウトやUIコンポーネントが揃ったテンプレートを紹介します。 このテンプレートを使用すると、管理画面・ダッシュボードで必要なコンテンツを簡単に作成できます。 Stisla 管理画面・ダッシュボードに特化されたUIコンポーネントがほとんどすべて揃ったテンプレート。 30以上のサードパーティのライブラリと統合、多くのコンポーネントを簡単に利用できます。 HTML5とCSS3で記述されており、すべてのモダンブラウザでサポートされています。 Bootstrap 4をベースに、Flexboxでレイアウトされています。 一部のコンポーネントにはより簡単にやり取りするために、JavaScript APIを使用。 MITライセンスで、商用プロジェクトでも無料で利用できます。
std::enable_ifを使ってオーバーロードする時、enablerを使う？ - Qiita
本の虫:C++0xにおけるenable_ifの新しい使い方 今回のネタ元は言わずと知れたC++erの江添氏のブログからですが、テンプレート引数の型の特性によってオーバーロードする方法として、enablerという変数を使う方法が紹介されています。 実際、以前の記事でもこんな感じで活用しています。 extern void* enabler; template<bool condition, typename T = void> using enable_if_type = typename std::enable_if<condition, T>::type; // 符号なし整数型を受け取るオーバーロード template<typename T, enable_if_type<std::is_unsigned<T>{}>*& = enabler> inline constexpr int nt
エンジニアと1on1をするときの事前面談シートテンプレート - $shibayu36->blog;
はてなのチーム横断のエンジニアメンター制度 - Hatena Developer Blog で紹介していますが、はてなにはチーム横断のエンジニアメンター制度があります。僕も最近までメンターとして5~6人ほどのメンティーを持っていました(今は事情があってメンターをやっていないのですが)。 メンターとして1on1をする時には1on1ミーティングに備えるアンケート - しるろぐを参考にし、事前にメンティーに面談シートを書いてきてもらうという工夫をしていました。その面談シートは改善を少しずつ加えながら運用していたのですが、一度知見共有も兼ねて最近使っていた面談シートテンプレートを公開してみようと思います。 面談シートテンプレート 以下のようなフォーマットで書いてもらっています。1on1の前にメンティーに1on1用Google Docsに追記していってもらっています。1on1用Google Docs
無料で最強！レスポンシブ対応の高品質HTMLテンプレート23個まとめ 2017年10月度
2017年のウェブデザイントレンドをうまく反映したかっこいいウェブサイトや、アニメーションなど素敵なエフェクトを採用したランディングページなど、HTML5/CSS3で制作された無料テンプレート素材をまとめてご紹介します。 デザインの現場でも人気の高いBootstrapフレームワークをベースとしたテンプレートも多く、自由にそして手軽にHTMLテンプレートのカスタマイズを行うことができる素材が揃います。どれもスクリーン画面サイズに関係なく表示できるレスポンシブデザインを採用しており、さくっとウェブページを作成したいときの参考にもどうぞ。 Bootstrap 対応！2017年最新の無料HTMLテンプレート上半期まとめ レスポンシブ対応で無料！ウェブ制作を高速化できるHTMLテンプレート24選 2017年1月度 あまり知られていないBootstrapスタイルテクニック、小技16個まとめ Wired
envsubstを使ってShellでテンプレートエンジン的なことをする、Dockerコンテナ起動時にファイルを生成する - そんな今日この頃の技術ネタ
毎回の起動時に外部から指定された文言を含んだHTMLファイルを生成して、以降はそれを返すようなDockerイメージを作りたいという案件があった。 一度コンテナを起動してしまえば完全にスタティックなページなのでわざわざMySQL等には繋ぎたくないし、 ファイルを置いたボリュームをマウントするという手もあるがホストが複数台なので管理がめんどくさい。 できることならコンテナの起動時に環境変数として値を渡すようなDocker的にお行儀の良い方法をとりたいが、 文字列結合でHTMLファイルを生成するのもかったるい。 要件的には何がしかの言語のテンプレートエンジンを使えばよいところではあるが、 本当に一文だけなんでそれだけのためには大げさだよなぁ何か無いかなぁと思ってググッていたら、 envsubst なるものをみつけた。 どうやら環境変数を埋め込んだ出力ができるらしい。 $ export var1=
軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog
Vue.jsは軽量なMVVMライブラリ。 vue.js http://vuejs.org/ 使ってみた感じ、かなり手触りがよいので、紹介する。 概要 handlebars風のテンプレートを書いて、DOMを展開する。普通のテンプレートエンジンと違い、$dataアクセッサを通じて値を書き換えることで、テンプレート展開後も値が同期する(!!!)。 一言で言うと軽量Angular。コード読んだ感じ、内部的にもAngularから大量にコードを持ってきた痕跡がある。$watchとdirective定義がキモなのは同じ。 とはいっても、軽量なのは使う側のAPI側だけで、内部実装はそれなりに重い。APIを軽量にすることで、Angularのデメリットである学習コスト部分を限りなく削ることを目標にしているんじゃないだろうか。 大雑把な使い方 テンプレートを書く。対応するデータ構造を書く。{foo: 'bar'
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ | コムテブログ
TL;DR クライアントさんとの打ち合わせや会議の後は、必ず議事録を書いて社内共有します。座った位置や発言なども、思い出しながら簡潔に書きます。おかげで「何を話したっけ？」「言った、言わない」を防げてます。フリーランスの人は、見積書、請求書、契約書、法律などのテンプレや知識があると、スムーズに先へ進めます。その他、ヒアリングシート、契約書など Web 制作業でリアルで必要だった書類系テンプレや知識をまとめました。 企画／提案 １．企画書 企画書はどれくらいのコストで効果（売上）を得るかというのが一番大切。とはいえ、上司を説得できる企画書も大切。以下は企画書の作り方と資料作成サービスなどのまとめです。 [保存版] 最強の企画書の作り方と資料作成サービス完全まとめ | 世界ろぐ “通る企画書”作りの基本／上司を説得できる企画資料の作り方講座#1 | Web 担当者 Forum ２．提案書 提案
C++1y 軽量Concept - Faith and Brave - C++で遊ぼう
Concepts Lite: Constraining Templates with Predicates—Andrew Sutton, Bjarne Stroustrup C++11では入らなかったConceptですが、現在SG 8の研究グループで議論が行われ、Clangで実験的な実装が行われていたりと、Conceptはまだ生きています。 今回のこれは、Conceptが持ついろいろな機能のうち、「テンプレートの型制約」の部分を、C++11で入った定数式の機能であるconstexprと組み合わせて考え直した案です。 まず、2つの値のうち、小さな値を返すmin()関数を考えてみます。 template <class T> T min(T a, T b) { return a < b ? a : b; } min()関数に渡される任意の型Tは、<演算子で比較可能である必要があります。 C++1
フリーでフレッシュ＆美しいHTML5＋CSS3テンプレート５０:phpspot開発日誌
50 Fresh Free HTML5 and CSS3 Website Templates フリーでフレッシュ＆美しいHTML5＋CSS3テンプレート５０。 ほんとにフリーでいいんですかというレベルのWEBサイトテンプレートが５０個もまとまっています。 こうしたテンプレートを下地に作ればHTML5デザインの新しい印象を持たせつつキャンペーンサイトなどがすぐに作れそうですね。 また、フリーの高品質なHTML5なテンプレートを作れば世界中からアクセスを呼べちゃうのかも。 関連エントリ HTML5&CSS3を利用した美しい４０のフリーテンプレート集 ビューティホーなHTML5＆CSS3テンプレート５０ iOS6で使えるHTML5の変更点等
初心者デザイナー必見！お勧めランディングページテンプレート１０選
Tweet Pocket ランディングページのデザインはコンバージョンを左右する大きな要素だ。 しかし、常にゼロからデザインやレイアウトを考えていると、どれだけ時間があっても足りない。 そのため、あらかじめ使い勝手の良いランディングページテンプレートを用意しておくと便利だ。 なぜなら、結果の出るランディングページの型を用意しておくことで、業務のスピードアップが可能になるだけでなく、安定したコンバージョンをだすことができるからだ。 そこで、本日は、参考になるランディングページテンプレートを１０個ご紹介する。 全て１０ドル以下という低価格で手に入れることが出来る。また、この中のいくつかは、私も実際に使ったことのあるものだ。 １．Click & Play デモサイト Click & Playは、iPhoneやAndoroidアプリに適したランディングページテンプレートだ。 シンプルなコードで書か
無料で使える単一ページのHTML/CSSテンプレート集
美しい単一ページの無料テンプレート集。 CSS/HTMLの勉強にも使えそうですが、細かいところで単一ページらしいアイデアが使われているところも見所です。 色々と使い所満載のテンプレート集 単一ページだからと思って油断していましたがなかなかのクオリティでびっくり。 Free Single-Page HTML5 Portfolio Template Demo / Download スライドショーの部分も細かいですがよく出来てます。 Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3 Demo / Download Page 一般的な縦型のシングルページ。スムーズな移動も特徴的です。 Resume (HTML) Demo / Download Page Roundfolio: A Free Portfolio T
Django テンプレート言語 — Django v1.0 documentation
このドキュメントについて このドキュメントでは、Django テンプレートシステムの文法について説明して います。技術的な観点からのテンプレートシステムの仕組みや拡張方法に関す る説明は、 Python プログラマのための Django テンプレート言語ガイド を参照してください。 Django のテンプレート言語は、釣合いの取れたパワーと簡便さを実現するように、 また HTML を扱いなれた人にとっては快適になるように設計されています。 Smarty や CheetahTemplate のようなテキストベースのテンプレート言語を経験 したことがあるなら、 Django のテンプレートはしっくりくるはずです。 設計哲学 プログラミングの知識があったり、 PHP のようなプログラムコードを直接 HTML に混ぜ込む言語を使ったことがあるなら、 Django のテンプレートシステ ムが単に H
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Startup Landing Templates
cmmntr.com
Bootstrapをもっと活用するためのカスタマイズツールやリソースのまとめ