はてなブックマーク

クリップボードにリッチテキストをコピーする方法を説明します。今回はとくにClipboard APIという現在推奨された方法で実装します。 「リッチテキストをコピー」というのは、ペーストしたときにWYSIWYGエディターへ書式が有効なまま入力されることを言っています。たとえばWordでコピーをすると、見出しや太字などを含めてコピーされるのと同じことです。 Clipboardを使ってリッチテキストをコピーする 標準のClipboard APIを使ってリッチテキストをコピーするには、以下のようにします。 const body = '<h1>見出し</h1><strong>太字</strong>' const blob = new Blob([body], { type: 'text/html' }) const blobPlain = new Blob([body], { type: 'text

こんにちは。 mimic（ミミック）というサービスがリリースされ、インターネットを騒がせています。 このサービスはアップロードされたイラストを学習して、類似されたイラストを生成できるというものです。 illustmimic.com 誰がこの文章を書いているか ShodoというAI文章校正サービスを作って運営しているものです。@hirokikyといいます。 Shodoは皆さんがメールや記事を書くときに、変な日本語になっていないかや、二重敬語を使っていないかなどをチェックしてくれるサービスです。 この記事はざっくりAIエンジニアが書いていると思ってください。 「AIと著作権」というかなりセンシティブな問題について当事者でもありますので、今回の件をサービスの設計などを含めてざっくり話します。 私自身も勉強中の身ですので、ぜひ文章に改善点があれば教えてくれると嬉しいです。 そして実際に困ったことが

こんにちは。kyです。 今日はちょっと昔話というか、お話をしようと思います。ですので気軽に聞いてもらえると嬉しいです。 ここでお伝えしたいことは「テックブログの運営で大変だった話」と「課題を解決するプロダクトを作っていった話」です。僕なりに気づいたこともお伝えします。 昔、テックブログを作ったときの意気込みと大変だったこと 前の会社でPyQというWebサービスを数人で立ち上げたのですが、成長するにつれて、もっとお客様にPyQを知っていただく必要がありました。 マーケターのnanaもチームにジョインし「ブログを通して有益な情報を公開して、それでサービスを知ってもらおう！」と決めました。SEOだけを考えた残念な記事を量産するのでなく、ちゃんと問題の解決や知見になる記事を書こう！ということを大切にしました。 テクノロジーに関したWebサービスだったので、テックブログとも言えるブログを作り始めまし

DjangoのQuerySetでグループごとに最大・最小のデータのみ抽出する方法を紹介します。 この記事はDjango Advent Calendar 2021 3日目の記事です。 グループごとの最大・最小のデータとは何でしょうか？ たとえば以下のような場合に必要となります。 ブログ記事ごとに最新のコメントのみ取得 ユーザーごとに金額が最大の購入履歴のみ取得 ページごとにリビジョン番号が最大の差分データのみ取得 実際に仕事をしているとたまに欲しくなりますよね。 今回は Parent モデルというグループごとに、 Child モデルの number が最大になる Child の一覧を取得します。 class Parent(models.Model): pass class Child(models.Model): parent = models.ForeignKey(Parent) numb

こんにちは。hirokikyです。 僕の個人的な話をしますが、4分ほどで誰でも気軽に読めるようまとめました ので、ぜひお付き合いください （5分の動画より短いです）。 今日の 2021年11月5日で、30歳になりました。 そしてこのブログも、もう10年以上やっていることになります。 僕は20歳のころからプログラミング（Python）界隈と関わりを持っていました。 当時は「若者Pythonエンジニア」と受け入れられたように覚えています。2011年ごろはまだRubyの全盛期で、わざわざPythonを選ぶのは少し変わった人たちでした（ChefやCoffeeScriptが流行り始める時代感です）。 そこに現れた20歳の僕や、同年代のPythonエンジニアはさらに珍しかったのです。 （2012年の併設カンファレンスでの懇親会） 「若者エンジニア」という名札は便利でした （正直に言ってしまうと）。 あ

イーロンマスク氏がスペースXを案内するという動画（Starbase Tour with Elon Musk PART1）の中で語られた「開発の5ステップ」が僕的に衝撃でしたのでまとめます。 この内容、心底素晴らしいのですが、元動画では話が少しとっ散らかっていますし専門的すぎます。 僕自身、何度も内容を思い返して役に立ったのですが、見直すたび読解に苦労するので自分のためにまとめ直しました （ありがとう、僕！愛してるよ！）。 以降については、イーロンマスク氏が語る開発の5ステップについてまとめています。 余力があれば、自動字幕ありで動画を見ながらのほうが、イーロンマスク氏の熱意を感じられて楽しいと思います（下の動画では、この話が始まる辺りから始まるようにしています）。 youtu.be イーロンマスク、開発の5ステップ 開発の中では以下の順序を必ず守らないといけません。 要件をアホのままにしな

WEB+DB PRESS Vol. 122に「新バージョン登場！ PythonによるWeb開発の基本 - はじめてのDjango」という記事を寄稿しました。 PythonでWebアプリケーションの開発を初めたい人に向けて「初めてがこれで良かった」と思えるように内容をまとめました。 4月24日（土曜日）に発売されます！予約はもう開始していますし、お店によっては先行販売されているそうです。こちらから購入いただけます： gihyo.jp 本特集に誤りがありました。正誤表はこちらをご確認ください サポートページ：WEB+DB PRESS Vol.122：｜gihyo.jp … 技術評論社 どんな人に読んでほしいか 4月の特集というのもあって、これから社会人になる人は特に読んでほしいです。 前提としてPythonとUbuntu（Linux）の基本だけ知っている必要がありますが、なるべく幅広い人に読ん

TrelloのUI（UX）が素晴らしすぎます。UIと言っても表面上のデザインだけでなくて、基本的な要素の手触りが良すぎます。 とくに上の写真にあるDescriptionがすごい。ここだけで作り込みがすごすぎてビックリする。 これはカード（Todoリストでいうタスク）の説明欄です。入力はtextareaででき、URLなどが入力されると表示される際はリンクになります。ただそれだけの要素ですよ。 ただそういう次元じゃないんですよね。たとえば以下の機能があります。 Descriptionが空のときは「Add a more detailled description...」を表示する Descriptionが空のときはマウスホバーで背景色を濃くしてクリックを促す Description内に描画する内容があるときは、 cursor: pointer にするだけで背景色は変わらない Descriptio

プログラミングに興味がある人たち、どうか「自分はプログラミングに向いてない」と思わないでほしいです。 プログラミングスクール通ってるかどうかとかどうでもよくて、この年末年始にコード全く書いてない人はエンジニア向いてないんじゃないですかね、それぐらい好奇心が必要な職業だとおもうけど— キュン / 今村雅幸 / ZOZO CTO (@kyuns) 2021年1月3日 たしかに「プログラミングスクールに通ってるから」良いスキルがあるわけではないし、スクールよりも好奇心のほうが重要なのは僕も同意です。 というか基本的な考え方はたぶんこのツイートをしてる方と、僕は同じだと思います。僕もうっかりこういうことを言うこともあります。 実際、本当に大好きで休日もプログラミングしてしまう人のほうが、スキル面で伸びが早いのも当然でしょう。 でも「休日にもプログラミングしてしまう」ほど好奇心を持って好きになるにも

退色 株式会社ビープラウドを退職しました。 こんにちは、 id:hirokikyです。 8年間勤めたビープラウドでしたが、先日限りで退職しました。 僕の中に大きなやりたいことがあり、それに挑戦したいという理由から退職しました。 「お前誰だよ、知らねーよ」という読者の方はブコメに好きな寿司のネタでも書いといてください。僕はエンガワです。 20歳から30歳が大事 僕は、人間の人生には重要な年齢というのが決まっていると考えています。 とくに20歳から30歳までは重要で、向こう30年の生き方を決定すると思っています。 そして20歳から28歳までのこの8年を、ビープラウドとPythonコミュニティの中で過ごせて本当に良かったと思っています。 その中でも、4人のメンバーで立ち上げから作ってきたWebサービスの PyQと、 某大手経済新聞社さんにPython・Web技術のコンサルティングをさせていただい

なぜ、執筆することって色々と大変なのでしょうか？ 実は、書くことそのものよりも、 文章のチェックや記事の管理が大変だと僕は考えています。 文章を単に書くことであれば、あまり大変ではないのかもしれません。 たしかに最初に書きはじめるには腰が重いときもありますが、筆が乗れば悩まずに書けてしまうのは皆さんも経験があるのではないでしょうか。 記事や原稿を執筆する際の面倒な作業や大変さをすべて解決する仕組みがあれば、これはもうすごく良さそうです。 その発想で Shodo というWebアプリケーションは作られています。 今日は、その ShodoにAIでの文章校正をする機能を追加したことを発表します。 Shodo AIの概要 Shodoとはなにか Shodo（ショドー） https://shodo.ink/ は原稿や記事の執筆をするためのプラットフォームです。 記事の自動校正やチームメンバーとの相互レビ

自走プログラマー表紙 「自走プログラマー」という本が出ます！ この本は僕と清水川さん、tell-kさんで、株式会社ビープラウドの仕事として書いた本です。 自走プログラマーには僕の10年来の開発ノウハウを詰め込みました。清水川さんtell-kさんに至ってはもっと長い経験があります。その3人が、入門本ではない本を本気で書きました。さらにビープラウドのつよつよメンバーが何度も何度もレビューしてくれました。 僕は自走プログラマーを多くの人にぜひ読んでほしいと思っています。ですが、「とにかく買ってほしい」とはあまり思っていません。 なぜかというと、普段、 僕（著者全員）が伝えたいこと・伝えてきたことを書いた本 だからです。 なので「多くの人に読んで欲しい」、「これで助けになってほしい」と思っています。むしろビープラウドでは自走プログラマー（とPythonプロフェッショナルプログラミング）を読んでもら

Djangoはデータベースマイグレーションの機能を持っています。 ですが、 実際、Djangoマイグレーションってどう使うの？ という疑問が多いかと思います。 docs.djangoproject.com この記事では、 マイグレーションを稼働中のアプリケーションに、無停止でどう反映すれば良いのか を説明します。 前提としてWebアプリ、データベースは本番環境に1系統づつあるとします。 基本的に無停止でマイグレーションを実行するのは 絶対に安全という方法ではないので、動作確認などをして慎重に反映する必要があります 。 無停止でマイグレーションを反映する基本 マイグレーションを 無停止で行う場合、「マイグレーションとアプリのリリースはどちらを先にすべきか」 という話になります （マイグレーションをするということは、アプリケーションの変更も必要になります）。 マイグレーションを先に実行して、ア

ページの離脱時に警告を表示するには、 beforeunload イベントを使えば簡単にできます。 ですが、Vue.jsでVueRouterを使っている場合、ページの移動で beforeunload イベントは発生しません。 理由はブラウザーの画面自体が切り替わっていないからです（ページの遷移はVueRouter, つまりJavaScriptが同一の画面内で制御している）。 WordPressやDropboxPaperも、ページ離脱時には confirm() やモーダル表示を使ってページ遷移時に警告を表示しています （もちろんbeforeunload時の警告も併用しています）。 Vue.js + VueRouterでページ離脱、再読込時に警告を表示する 以下のように beforeunload を使えば良いです（クロスブラウザー対応どうこうはうまく書き換えてください）。 methods: {

このブログ記事で 「MultiAZ」にしていたら何事も全て大丈夫という認識を変えられると嬉しいです （当該の時点で障害起こした人はちゃんとMultiAZにしてなかったんでしょ？という人の認識も変えられると嬉しいです）。 MultiAZにしておくことは基本 です。 その上でも、 安心しきらずに監視は必要 という話をしています。 MultiAZ構成にしておきましょう そのうえで監視、検知、トレーサビリティを大切にしましょう MultiAZ要らないという見当外れの解釈はしないでください （一部、間違えた解釈をしてるコメントも見受けられましたが、大いに違います）。 前提 2019-08-23、AWSで大規模な障害が起こりました。 障害の一般的な内容は以下のとおりです。 まとめのブログ https://piyolog.hatenadiary.jp/entry/2019/08/23/174801 AW

ちょっと、大きなテーマを扱います （大げさな話しなので間違いがあれば教えてください）。 「やりたいことが見つからない」 「自分は何をやっても中途半端になる」 「好きなことも、すぐに飽きてしまう。楽しくなくなる」 そういった悩みは、僕を含めて、多くの人が持っていると思います。 でもそう思う理由は「やりたいことの見つけ方」を知らないからです。 僕は最初から「やりたいこと」なんて無かった 僕について少し自己紹介かねて個人的な話をします。 僕は今、BeProudという会社でプログラミング、プロダクト開発を仕事にしています。 PyQ というWebサービスを4人の小さいチームでゼロから企画して、今も開発をしています（最初はharu、kamekoと僕で企画を練って、僕が開発でした。初期はちょいちょいshinが関わってくれて、4人で作りました）。 僕は12歳のときからプログラミングをしているので、周りから

「ここで改行するほうがキレイで良いと思います」 『いや、私はこちらのほうがキレイ良いと思います』 コードレビューでこういう議論をしたことはありませんか？ 大切なことだとは思いますが、生産性にはあまり直結しません。議論を避けるために書き方を決めるほうが良いでしょう （個々の問題について逐次議論するのがエネルギーを無駄にしてしまいます。一度決めて、再利用するようにしたいものです）。 今日はそのために使える black というツールを紹介します （「私はflake8を使ってるから結構です」と思われるかもしれませんが、少し違う話なので読んでみてください）。 blackを使おう Pythonのコードを自動でフォーマットしてくれる black を紹介します。 github.com blackはPythonのコードフォーマッターで、自動的にPythonプログラムの書き方を修正してくれます。 PEP8 と

よくプログラミング初心者の方に「PythonとRubyの違いを教えてください」と聞かれるので書いておきます。 免責 あくまで僕がプログラミング初心者さんに説明するときにこの説明を使うよという視点です。読んでる方が思う視点とか別の意見はぜひご自身のブログに書いてください（読みますので）。 違いはたくさんありますが、5分で簡潔に伝わる違いを伝えたいと思っています。 あと私はPythonをずっと10年近く使っていますが、Rubyはちょっとだけです。でもRubyもとても良い言語だと思っています。 （コードサンプルの色味が読みにくくてごめんなさい。気が向いたら直しときます） 本文 プログラミング初心者に簡単にPythonとRubyの違いを説明する場合ベストは「Pythonはより明示します。Rubyはより略せます」だと思っています （あくまでプログラミング初心者に5分以内に伝えると考えたときの視点です

ふとこの前プログラミングを教えているときに言われたことです。 「プログラミングをしていると『イライラ』してしまうんですが。。」 「プログラミングをしてイライラしてしまう自分はプログラミングが向いてないんじゃないか」とか、「良くないことなのかな」というニュアンスでの話でした。その心配な気持ちは分かりますが、 プログラミング中はイライラしても大丈夫なので安心してください 。そういうものです。 むしろ、そこまでイライラするほど真剣に取り組める時点でプログラミングに向いてます。 多少イライラするのは普通なので大丈夫 プログラムが動かないとき、サーバーが止まってしまうとき、環境構築がうまくいかないとき、一生懸命に頭を使ってるんで誰でもイライラすると思います。 プログラミングしているときはイライラして大丈夫です 。するものと思ってください。僕はしてます。かなり。 人間も生物なので、小さいところに閉じこ

何かを作りたいときは、エディターをいきなり起動してはいけません。 エディターを閉じて、まずはイメージをまとめることに集中しましょう。 なぜこの文章が必要か なぜ何かを作る前にイメージをまとめる必要があるのでしょうか？ 頭の中には完璧な作りたいもののイメージがあることでしょう。 であれば今すぐにでもプログラミングを始めるのが賢明なように思えます。 ですがそうしてはいけません。理由は「作りたいもののイメージは単なる幻想だから です」。 頭のなかにあるイメージはとても素晴らしいものですが、多くの場合は曖昧で、触れられない、価値を検証できないものです。 それを一旦書き出して、まとめていく方法を知っておきましょう。 まとめていく中で作るものがより明確になり、自分でも気づかない価値を発見できます。 作るものをまとめて検証することで、作り始めた後の手戻りを防ぎます 作るものをまとめて明確にすることで、作