DBML - データベース構造用マークアップ言語
データベースはアプリケーションのコードとは別で管理されることが多いです。構造の変更をコードで書けるようになっていますが、ER図を見ようと思うと専用のツールを使ったりします。 今回は別な仕組みとしてDBMLを紹介します。データベース構造を現すのに使うマークアップ言語です。 DBMLの使い方 左側がDBMLです。右側にビジュアル化した内容が表示されています。この表示は dbdiagram.io によるものです。 右側でリレーションを変更すると、DBMLにも反映されました。 DBMLはTable、RefそしてEnumを使ってデータベース構造を表現します。作成したDBMLのファイルはSQLへの変換が可能で、逆にSQLからDBMLも作成できます。JavaScriptでオブジェクトとして読み込むこともできるので、システム連携にもよさそうです。 DBMLはJavaScript製のオープンソース・ソフトウ
そろそろHTML6とCSS4の話を。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGの代表のゴウです。 LIGでは毎年アドベントカレンダーなるものをやっていまして。 「今年はゴウさんもなんか書いてくださいよー」 とエンジニアのまさくにに言われたので、よっしゃ、待ってましたとばかりに書いております。 アドベントカレンダーはもともとエンジニア界隈の風習らしいので、テーマもそういったテクノロジー系が喜ばれるみたいですね。テクノロジーかー。俺が書けるテクノロジーの記事なんてあんまないので、ここはあいつに聞いてみましょう。 というわけで、LIGのCTOであるづやを呼び出しました。 こいつだったら最近のWeb業界の流れとかテクノロジーとか知ってるでしょう。 ぜんぜん関係ないですけど、づやの実家はこちらです。電気屋をやっていて、彼は長男なのでいずれ継がないといけないのですが、どうするんでしょうか。我が地元、長野県信濃町も過疎高齢化が進み、他の地域と同じで後継者問題は重
使いやすさを重視したHTMLスクレイピングライブラリを作った - 純粋関数型雑記帳
TL:DR レポジトリ https://github.com/tanakh/easy-scraper ドキュメント 背景 このところ訳あってRustでHTMLからデータを抽出するコードを書いていたのですが、 既存のスクレイピングライブラリが（個人的には）どれもいまいち使いやすくないなあと思っていました。 HTMLから望みのデータを取り出すのはいろいろやり方があるかと思いますが、 ツリーを自力でトラバースするのはさすがにあまりにも面倒です。 近頃人気のライブラリを見てみますと、CSSセレクターで目的のノードを選択して、 その周辺のノードをたどるコードを書いて、 欲しい情報を取り出すという感じのものが多いようです。 RustにもHTMLのDOMツリーをCSSセレクターで検索して見つかったノードをイテレーターで返してくれたりする、 scraperというライブラリがあります。 例えば、<li>要素
SVG形式のファビコンを設置しよう
2022年4月27日 SVG, Webサイト制作 つ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません！やったね！少し工夫すればダークモードにも対応できますよ！さっそくみていきましょう！ ↑私が10年以上利用している会計ソフト！ SVGファビコン設置方法 1. SVG形式のファビコン用画像を用意 グラフィックツールでファビコンにしたい画像を用意します。サイズは特に気にしなくてもOK。正方形であればどのサイズでもきれいに表示されます。今回はIllustratorを使って32x32pxのものを用意しました。 SVG形式で保存します。 2. HTMLファイルに記述 あと
強い組織を作るベイジ流日報のススメ | knowledge / baigie
メリット1：価値観の浸透実は私たちの日報は、ある経営上の課題を解決するために始まった取り組みでした。その課題とは、「行動指針の浸透」です。 ベイジの行動指針は、2012年4月に制定されました。私が入社する4年前になります。当時は創業2年目で、社員はまだ3人の状態でした。その行動指針がこちらです。 最初は、7つの大項目とそれぞれに8つの小項目、合計56項目が策定されました。その後1つの大項目が増え、現在は64項目の行動指針となっています。それ以外は一言一句、2012年の段階から変わっていません。（ちなみに2020年現在、「行動指針」でGoogleで検索すると3位に表示されます） 創業2年、社員がまだ3人の状態で、組織というより個人事業に近い状態です。そんな状態で56項目もの明確な行動指針を作成するというのは、先走り過ぎのように思えます。 しかし、起業後の早い段階で行動指針を作るのは、代表の枌
SPA向けのCSS設計 - COCSS - Qiita
Component Oriented CSS CSSをもっと便利に使うための努力 CSSの歴史は、言うまでもなく長いです。 テーブルレイアウトの時代から使われ、テンプレートエンジンの時代を経て、JSが定着した最近はフレームワークやライブラリーなどにテーマが移っています。 もはやウェブ開発者・ウェブデザイナーと言う概念から、FE・BE、細かい場合はマークアップエンジニアなど、専門的かつ細分化になっています。 CSSも、専門のエンジニアが活躍する場合もあるくらいです。 こういう流れとともに、CSSの構造に関しても様々な工夫が行われてきました。 代表的には下記の例があります。 OOCSS BEM SMACSS FLOCSS RSCSS 各例の概念と、不便なところだけ軽くチェックします。 経験者の方は、共感するところもあると思います。 既存の設計、これが不便だった 1. OOCSS コンテナーとコ
うわっ、日本のWebデザイナーの年収、低すぎ…？
以前、Webクリエイターボックスの「世界のWebデザイナーのお給料はいかほど？」という記事が話題になっていました。 記事そのものではなく、記事に対する Twitter や、はてなブックマークのコメントでの反応を見ていて個人的に気になったことがありましたのでここにまとめました。 「他の国とくらべて日本のWebデザイナーの年収は低すぎる」とか「海外に脱出するしかない」と嘆いている方がかなりいらっしゃったようですが、こういう見方もありますよ、ということで… ※この記事は、2013年に公開したものを2019年にリライトしたものです。 Webデザイナーは、海外に移住すれば給料が上がる？ 特定の方を晒しあげるつもりはないのでツイートを埋め込むのはやめておきますが、Twitter では「世界のWebデザイナーのお給料はいかほど？」という記事をツイートするときに、以下のようなコメントをつけている方が何名か
ランディングページのデザインまとめサイト11選！デザインを作る際のポイントとは | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、マーケターのまこりーぬです。 Webサイトのランディングページを作成することになったけど、どのようなデザインにしたらよいのかさっぱりわからん……と悩んでいる方も多いのではないでしょうか？ この記事では、Web制作担当者向けに、ランディングページとはなにか、デザイン作る際の注意点やおすすめのデザインのまとめサイトを紹介します！ ランディングページとは ランディングページ（LP）とは、ユーザーが広告・外部サイトなどをクリックした際に、一番最初に訪れるページのことです。一般的には縦長の1枚構成になっています。 ランディングページの役割 ランディングページの役割は、ユーザーに、自社の商品やサービスへの関心を持たせ、商品購入や問い合わせといったコンバージョン（結果）を引き出すことです。ユーザーを他のページに移動させないために、1ページ中に情報を集約する、イメージ画像を多用する、情報を提示
プロとアマの小説の特徴を数値化して比較してみたらやっぱり差があったので、それを埋めるための型付き小説記述用言語 TypeNovel を公開した件について - anti scroll
ラノベのタイトルみたいな記事を書く、という夢が叶いました。 github.com 開発に至った動機 以前から、アマチュアの小説はプロに比べると、描写不足な傾向があるのかもしれない、と思っていました。 特に不足がちだと感じるのは「時間」に関する描写です。 季節がわからなかったり、昼か夜か、平日か休日かみたいなことが不明瞭な作品が多い気がします。 しかし印象だけで語ってもアレなので、実際に差があるのかどうかを計測してみました。 計算式は、 時間描写の文の数 * 時間描写分布のエントロピー / 文の数 です。 「時間描写分布のエントロピー」というのは「全体を通じて、どれだけ満遍なく時間表現が書かれているか」という数字だと思ってください。 例えば時間描写が冒頭部にしかなかったりすると数値が小さくなり、全編を通じて満遍なく描写されていると、数値が大きくなります。 あと時間描写というのは、一応「季節、
2019年6月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン 「Adobe Creative Cloud」が32bit版Windowsのサポートを終了 ～次期大型更新から – 窓の杜 「Creative Cloud」アプリの大半は64bit版Windowsが必須となっているが、次期メジャーリリースではこの要件がすべてのアプリに適用されることになる そうですのでご注意ください。 プログラミング 【永久保存版】Gitのあらゆるトラブルが解決する神ノウハウ集を翻訳した – LABOT 機械学習ブログ 今月もっとも絶賛されていた記事のようです。 gitで「あっやべっ！」ってときに使うコマンド[随時更新] – Qiita ブランチを切り忘れた、間違ったコミットを
拝啓、お客様。Webサイト制作のコストはここにかかります。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、「自然に帰ろう……自然に帰ろう……」と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。 さて。さてさて。 皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。 失礼ながら、そのお気持ち、 たぶん5ヶ月、遅いです！ 仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD（テクニカルディレクション）やPM（プロジェクトマネージャー）として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方にお
W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血
まえがき W3C（とWHATWG）からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG（Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます）がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感
Responsive Designs and CSS Custom Properties: Defining Variables and Breakpoints | CSS-Tricks
Responsive Designs and CSS Custom Properties: Defining Variables and Breakpoints CSS custom properties (a.k.a. CSS variables) are becoming more and more popular. They finally reached decent browser support and are slowly making their way into various production environments. The popularity of custom properties shouldn’t come as a surprise, because they can be really helpful in numerous use cases,
CSSリセットにも新しい動きが！最近の実装に合わせて、見直すきかっけになる新しいCSSのリセット -CSS Remedy
最近、CSSのリセットを見直す動きが少しずつあるようです。 2018年おすすめのCSSリセット！「Reboot.css」の特徴と使い方を解説、CSSリセットの2019年用私流カスタマイズ方法など、当ブログでもCSSリセットの記事を公開しました。 今回紹介するのはMozilla Developerによる新しいプロジェクトで、後方互換性を備えつつ、現在のデスクトップやスマホの環境に合わせたCSSリセットです。 CSS Remedy -GitHub CSS Remedyの特徴 CSS Remedyのコード CSS Remedyの特徴 CSS RemedyはMozilla Developerによる、CSSリセットの新しいプロジェクトです。 CSSリセットの今までの流れ 何年もの間、リセット用やベース用のスタイルシートは、Web制作者がより早く作業を始めるのに役立ちました。 初期のリセットではすべて
フロントエンドエンジニアの多様性｜平尾ゆうてん
フロントエンドエンジニアの領域が広すぎる。そんな話が先日のアクセシビリティの情報交換会ででてきた。今回はそこをもう少し考えてみた。 フロントエンドの領域いつ頃からだったかフロントエンドエンジニア（以下FEE）という言葉が生まれ、IT/Web界隈でみんなの共通認識ができた。マークアップエンジニアやWebデザイナーと名乗っていた人も一部そう名乗るようになった。その当時、FEEの領域といえばHTMLとCSSでのコーディングをベースにJavaScriptでAjaxやDOM操作をしたり、もしくはFlashを再現するようなリッチなインタラクションの実装をすることだった（まだFlashも現役だったっけ）。 それがいつの間にかSASSをきっかけに開発環境の変化が起こり、Web APIは豊かになり、ViewとModelのアーキテクチャがフロントエンドでも再現されフレームワーク化し、SPAのようなものが実現可
公開日と更新日の両方を構造化データでマークアップすることをGoogleは推奨 | 海外SEO情報ブログ
[レベル: 上級] 記事が最初に公開された日時と最後に更新された日時の両方を構造化データでマークアップすることを、Google の John Mueller（ジョン・ミューラー）氏は推奨しました。 また、Google に日時を正しく認識させるために、構造化データで指定する日時とページ内に書かれている日時を統一することが重要です。 公開日と更新日の両方をマークアップする 構造化データでマークアップするなら、公開日と更新日のどちらを使用すべきか？ この質問にミューラー氏は、次のように回答しました。 どちらを使っても構わないが、個人的には両方マークアップすることを勧める。両方をマークアップすることができるはずだ。 Google のアルゴリズムには両方とも役に立つ。 schema.org の Article や NewsArticle、BlogPosting などのタイプは、公開日と更新日の両方の
Emmetでより良いコーディングライフを送ろう | Stocker.jp / diary
この記事について この記事は、スマートフォン時代のWebデザインスクール や スマートフォン時代のWebコーディングスクール 初回体験レッスンなどをお手伝いして頂いている「やのう まり絵」さんによる寄稿記事です。 やのうさんは、私が執筆した 世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書 と同じシリーズ本である 世界一わかりやすい Dreamweaver 操作とサイト制作の教科書 CC対応 の執筆もされています。 フリーランスの「やのう まり絵」と申します。普段、Webサイト制作を行っておりWebデザインからコーディング、WordPress構築を行っています。 共著：世界一わかりやすい Dreamweaver 操作とサイト制作の教科書 CC対応 これから学ぶ方でも教科書通りに手を動かせばひとつのサイトが完成する流れになっています。 HTM
汎用言語表現モデルBERTを日本語で動かす(PyTorch) - Qiita
今DL for NLP界で、BERTというモデルが話題です。PyTorchによる実装が公開されていたので、日本語Wikipediaコーパスに適用してみました。 コードはこちらに公開しております。 2018/11/27 作成したBERTのモデルを使って内部動作の観察とその考察を行いました。単語の潜在表現獲得の部分で感動的な結果を見せてくれました。ご興味あればご覧ください↓ https://qiita.com/Kosuke-Szk/items/d49e2127bf95a1a8e19f この記事ではBERTのポイントの解説と、ポイントごとの実装を紹介します。 尚、記事の執筆にあたってこちらのリポジトリを参考にさせていただきました。 https://github.com/codertimo/BERT-pytorch 本記事は以下の4つで構成されています。 ・BERTとは ・BERTのキモ ・BER
Chrome 70 デベロッパーツールが便利になってる！Web制作者がチェックしておきたい新機能のまとめ | コリス
DOMノードの強調表示 Consoleタブを選択。 DOMノードに評価される式を入力。 入力する式 以下の便利な式を使用できます。 「document.activeElement」で、現在フォーカスのあるノードを強調表示。 「document.querySelector(s)」で、任意のノードを強調表示。sはCSSセレクタで、DOMツリー内のノード上をホバリングするのと同じ。 「$0」で、DOMツリーで現在選択されているノードを強調表示。 「$0.parentElement」で、現在選択されているノードの親を強調表示。 パフォーマンスパネルの最適化 今までのパフォーマンスパネルは大きなページをプロファイリングする際にはデータの処理とビジュアル化に時間がかかりました。Chrome 70ではこの処理とビジュアル化が高速になりました。 パフォーマンスパネルの最適化 信頼性の高いデバッグ Chro
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.si-ght.jp/entry/techandme-fujikawa01
