WebCrumbs WebCrumbsはWordPressを使う感覚でReact製のWebサイトやアプリを運用できるOSSです。プロジェクトを「ReactのためのWordPress」と位置付けており、Reactアプリの為の業界標準ソリューションを目指しているそうです。 WPライク、というようにReactベースのWebサイトを直感的な管理画面で簡単に作成、管理、拡張する事が可能との事。コーディング不要の管理画面でWebサイトの様々な面を管理・制御、プラグインで機能拡張、特定のニーズに合わせたフルカスタマイズも可能となっており、完全オープンソースで提供されています。 もちろん他言語対応で既に30か国以上の方のコミュニティへの参加があるようですが、日本はまだ未参加のようなので、ご興味ある方はぜひご覧になってみては如何でしょうか。ライセンスはMITです。 WebCrumbs

EvidenceはSQLとMarkdownで洗練されたデータプロダクトを構築できるBiツールOSSです。MITライセンスの元でソースコードが公開されています。 従来のD&DによるBiツールではなくコードベースとなっており、データアナリストが信頼性が高く価値のあるレポートを提供できる事を想定したものとなっているそうです。 コードベースにする事で、アナリストがダッシュボードにチャートやフィルタをD&Dで作業するよりも、より活用度の高いワークフローをアナリストに提供できるようになるのだそう。 そのため、利用にはSQLとMarkdownの知識が前提条件となっています。D&D仕様のBiツールに使いにくさを感じている方はご覧になってみては如何でしょうか。 Evidence

CSS To TailwindはCSSをTailwind.css向けにリアルタイム変換するOSSです。 CSSをTailwindに変換、というと語弊があるかもですが、要は書いたCSSに該当するTailwindのclassをリアルタイムで吐き出してくれる、というものになります。 例えば以下のCSSを書いた場合、 body { width: 100%; height: 50%; margin: 0 !important; background-color: transparent; transform: translate(10px, -20px) scale(.5); }以下をリアルタイムで提示してくれます。 w-full h-1/2 !m-0 bg-transparent transform translate-x-[10px] -translate-y-[20px] scale-[.5]

WindstaticはTailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開しているWebサイトです。 UI、というかセクション単位でカテゴライズされていて、ヒーローイメージのブロック、特徴を紹介するブロック、フッター、CTAや値段表などに分けられ、それぞれにいくつかのレイアウトを用意、コードをコピーできるようになっている、という感じです。 スタイルは一貫したもので統一されているので自由に組み合わせても、見た目はある程度はチグハグにならず整えられたサイトが出来上がるかなと思います。 利用にあたりユーザー登録も不要で自由に利用できるみたいです。 Windstatic

WindsterはシンプルなUIで見やすく使いやすいオープンソースのTailwind.css製の管理画面テンプレートです。Tailwind.cssのユーティリティクラスのみを使用して構築されています。 管理画面に必要になりそうなUIコンポーネントはTailwind.css向けのコンポーネントライブラリであるFlowbiteの導入で備えられており、静的サイトジェネレーターのHUGOを使用してコンテンツを管理できるように設計されています。 ダッシュボード開発に必要なものを事前に揃えてある、みたいな印象でした。これらを使い慣れている方なら開発も捗りそうですね。ライセンスはMITです。 Windster

DFlexはどのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリです。 他のD&Dライブラリとの大きな差として、最小限のレイアウトシフトをあげています。Webページで操作する要素が多い程、累積レイアウトシフト(CLS)が多くなり、結果としてレイアウトのズレを発生させ、UXに影響が出る、というものをGoogleがCore Web Vitals(コア・ウェブ・バイタル)の3つの指標の1つとして提唱しました。 CLS CLSは上のようにテキストを確認してボタンを押そうとしたら、遅れて表示されたコンテンツによりボタンの位置がズレ、本来押すつもりのなかったボタンを押してしまう、といったもので、GoogleのPageSpeed Insightsでも数値化され評価の対象として位置づけられています。 そのレイアウトシフトを最小限に抑える事が出来るD&Dライブラリとし

Day.jsはMoment.jsライクに使える2KBほどの軽量な日付操作ライブラリです。Moment.jsとほぼ同じ使い方で同じように操作する事が出来ます。 他ライブラリにも依存せず、Moment.jsを使っている方なら学習コストもほぼ不要でファイルサイズもかなり軽量になっています。 Moment.jsにあるような痒いところに手が届く機能を削いだ分、軽量化されている、みたいな感じでしょうか。国際化も進んでおり、翻訳者も募集されています。 ざっくり使い方です。今回は用意されているCDNを使います。unpkgの他、cdnjsやjsDelivrにも用意されているみたいです。 <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>まずスクリプトを読み込みます。 <script>dayjs().format()</scr

umamiはGoogleアナリティクス代替として開発されたオープンソースの自己ホスト型Web分析ソリューションです。 GAよりもシンプルで軽量、使いやすさを考慮して開発されたようで、GAよりもユーザーフレンドリーでプライバシー重視且つオープンソースの代替手段を提供したいそうです。 自身以外でもユーザー登録及び他ユーザーが任意のWebサイトを管理する事も可能で、共有も出来るようになっています。 ページビュー、使用デバイス、リファラなど、解析にとって重要な指標のみを取得し、単一ページに表示する事で解析を合理的に行えるように設計されています。 解析できるWebサイトの数は制限なく、追跡用のスクリプトは6kbと非常に軽量なため、Webサイトのパフォーマンスにも影響を与えません。 何よりOSSで自己ホスト型なので第三者、というかGoogleに解析データを握られる心配が無いのが大きいですね。ライセンス

Vuestic AdminはVue.jsベースのオープンソースな管理画面テンプレートです。40以上のUIコンポーネントも同梱されています。 コンポーネントを含むレイアウトは完全なレスポンシブ対応となっています。管理画面系のコンテンツによく必要とされるコンポーネントは概ね揃えられているので、1から作るよりはかなり工数を減らせそうです。 細かい部分のサポートの充実 更にVuestic AdminはJSONファイルによる他言語化対応、MEDIUMライクなテキストエディターの搭載など、ユーザーフレンドリーな設計となっています。 細かい部分もサポートしてくれているのは嬉しいですね。これだけ揃っても完全にOSSなのは貴重かもです。 ライセンスはMITとの事です。 Vuestic AdminOn Github

Frontnd BuilderはCSSフレームワークを元に作られたテンプレートから、D&Dによるレイアウト調整やクリック→テキスト編集など、直感的な操作でWebサイトを開発できるWebサイトビルダーです。 本アプリはフロントエンド開発者向けを謳っています。開発画面はブロックベースとなっており、ブロック毎にライブコーディングする形となります。各ブロックは単体で編集、再利用可能となっています。 また、RWD対応となっており、いつでも各デバイスに表示切替が可能です。HTMLやpugやHaml、CSSはSASSやLESS、JSはCoffeescriptやBabelなども対応しているので書きなれた環境で開発する事が可能です。 試しに使ってみました。 使ってみる 従来のブラウザで作れるWebサイトビルダーの開発者向けという感じ。コーディングはライブコーディングで各フレームワークも揃えられており、Ham

RanetoはMarkdownで書けるシンプルなナレッジベースです。軽量で高速、DB不要で動作します。レイアウトはBootstrapベースでRWDにも対応、Highlight.jsによるハイライト、Lunrで全文検索に対応しているそうです。静的サイトジェネレータで作るWiki的な感じでしょうか。シンプルで見やすく、カスタマイズもしやすい印象です。インストール法など、詳細はドキュメントをご参照下さい。ライセンスはMIT。 Raneto

Lite Editorはインライン要素に特化したオープンソース国産WYSIWYGエディタです。国産CMSとして名高いa-blog cmsを提供するappleple社さんの開発されたエディタで、a-blog cmsのようなブロックタイプのCMS向けに作られたそう。従来のWYSIWYGエディタでは意図しないスタイルになってしまう事も多く、異なる記事編集者間でテイストも異なってしまう問題もありますが、インライン要素のタグ挿入に特化させる事でそういった編集者間の差異を無くすのが目的のようです。これは良いですね。使い方も日本語で詳しく書かれています。ライセンスはMITとの事です。 Lite Editor on Githubインライン用のWYSIWYGエディターLite Editorをリリースしました。

tinyresetはモダンなWeb向けの小さなCSSリセットです。よく分かりませんね。適切なタイトル思いつかなかったので直訳しました。ただ、内容は良いリセットだと思います。オールドブラウザほぼ死滅の今日ではリセットも少なくて済みそうです。サイズは圧縮版で1kb未満でした。ライセンスはMIT。 tinyreset

debugCSSは誤った使い方をしたHTMLソースの箇所をハイライトしてくれるスタイルシートです。その名の通りデバッグ用のCSSです。実用的かどうかよりも面白いアイデアだなーと思ったので備忘録。ソース見ていろいろ感心してしまいました。CSS苦手なので応用を学べそうです。一応ブックマークレットも用意されています。ただ、チェックしたいなら一般的なlintツールのほうがいいかなぁとは思います。手軽で良いのでこれはこれで有りですけどね。 debugCSS

初めてWordPressオリジナルテーマの作成にトライしたい、という方向けの基本のマニュアルです。マニュアルというほど大袈裟なものではありませんけど、ある程度敷居が低くなると嬉しいなぁという思いを込めて記事にします。 この記事の内容はあくまで基本中の基本で、初心者・ノンプログラマー向けとなっていますので応用的な情報は殆どありません。また、説明の仕方も分かりやすさ重視で、厳密的にはちょっと違う点もあります。 初心者さん向けに、もう少し情報があってもいいかなと思って、書いてみることにしました。僕もまだまだ初級レベルなので一緒に学んでいきましょう。初級者レベルでこんな記事書くなって話ですけども。 目次目次です。各セクションで必要と思う場所から見るようにしてください。 はじめに作成するWebサイトの目的と構造テーマ作成前に用意するものと環境テーマの構造を（触り程度だけでも）理解するHTMLからテー

たまに使うので自分用にメモします。 css3のtext-shadow等を使用した テキスト装飾のサンプルコードの 備忘録です。工夫すればいろいろ と作れるんでしょうけど、とりあえず よく使うものをピックアップします。 自分用のコピペ用サンプルです。用途は限られますけど、iPhone用サイトなどでも使えるので覚えておいて損は無いかなと思います。テキストだけだと管理が楽でいいですよね。 CSS3 text-shadow sampleいろいろ。フォントはGoogle font APIを使用しています。付けてるネーミングは無いと不自然だから付けた的なものですので気にしないで下さい。 Default

Loud linksはWebコンテンツにサウンドインタラクションを追加する為のシンプルなJSライブラリです。audio属性を使うみたい。非依存型で軽量なのは良いですね。音源を用意して特定のclassとカスタムデータ属性を追加すれば該当する要素にサウンドインタラクションを追加する事が出来る、との事。音を出すのはいささか抵抗がある方も少くはないと思いますが、レイアウトやUIだけで解決できない問題もサウンドインタラクションで解決出来るケースもあります例えばエラーを気づかせるのが困難なな複雑な送信フォームでも、小さなエラー音を出すだけでもユーザーにハッとさせる事も出来るかもしれません。使い所の問題ですね。個人的にも以前は音＝完全NGという先入観を持っていたのでもう少し柔らかい思考で臨みたいところです。 Loud links

tota11yはWebサイトのアクセスビリティチェックを行うライブラリです。基本的にはJavaScriptファイルを読み込むだけ、その他は必要に応じてプラグインファイルを読みこめば自動でチェックし、問題点を教えてくれます。チェック項目は左下にツールが表示されるようになるのでそこから確認するだけ。上図スクショはコントラスト比をチェックしているところです。アクセシビリティの判定はGoogle ChromeのAccessibility Developer Toolsを元に作成されているそうです。ライセンスはMIT。 tota11yOn Github

Livedownは各エディタでMarkdown記法を使う際にリアルタイムプレブビュー機能を付加するプラグイン。VimやSublime text、Emacsなどのプラグインが用意されています。Markdownを書く機会が多い方には便利そうですね。ライセンスはMIT。 Livedown