個人開発を黒字にする技術 - k0kubun's blog
最近は個人開発は自分のOSSのメンテで手がいっぱいになってしまったのでサービス開発のようなものは普段あまりやらないのだが、大学院*1で今学期、何作ってもよいという感じの授業を取ってWeb/iOS/Androidアプリ*2を全て作るという体験をする中で、たまたま個人開発のコストを抑える活動をしたので、その時に調べたり考えたりしたことを書いておく。 Herokuで無料にする Herokuでは毎月550時間free dynoが使え、クレジットカードを登録しておくと更に450時間、合計1000時間無料で使える。Herokuは30分アクセスがないと一旦停止するが、今回授業で作ったサービスでこれを使い切らないことは明らかだったので最初はこれでセットアップした。セットアップも簡単だし、PostgreSQLも無料でついてくる。 ただ、コールドスタートに10秒くらいかかり、これがこのサービスではUX的に致命
noteの「あつ森」UXライティング解説が大反響！ naoさんに聞く、UXライティング力の鍛え方 | キャリアハック（CAREER HACK）
noteでの「『あつまれ どうぶつの森』の世界観をつくるUXライティング」をはじめ、UXライティング解説記事が反響を呼ぶ「nao」こと宮崎直人さん。じつはユニコーンの仲間入りを果たしたテック企業「Paidy」で働くUXライター・コピーライターだ。彼が考える、UXライティングとは？そして、その鍛え方とは？ 【前編】noteの「あつ森」UXライティング解説が大反響！ naoさんに聞く、UXライティング力の鍛え方 【後編】「あと払い」をリードするテック企業「Paidy」が、UXライターを採用。宮崎直人が広げる言葉の可能性 コピーライティングとUXライティングの違いとは？ もともと宮崎さんはコピーライターとしてキャリアを積み、現在は、Paidy（ペイディ）にてUXライティングにも実務で関わっていると伺いました。そもそも「コピーライティング」と「UXライティング」の違いとは？ ここは私のなかでは明確
Dockerfileのベストプラクティス Top 20
本文の内容は、2021年3月9日にÁlvaro Iradierが投稿したブログ(https://sysdig.com/blog/dockerfile-best-practices/)を元に日本語に翻訳・再構成した内容となっております。 Dockerfileのベストプラクティスのクイックセットをイメージビルドに適用することで、セキュリティ問題を防ぎ、コンテナ化されたアプリケーションを最適化する方法を学びます。 コンテナ化されたアプリケーションやマイクロサービスに精通している人なら、自分のサービスがマイクロサービスであることに気づいているかもしれません。しかし、脆弱性の検出、セキュリティ問題の調査、デプロイ後の報告や修正など、管理のオーバーヘッドがマクロな問題になっています。 このオーバーヘッドの多くは、セキュリティをシフトレフトし、開発ワークフローの中で可能な限り早く潜在的な問題に取り組むこ
ホーム画面の動作に追加する変更 | Blog | Chrome for Developers
「ホーム画面に追加」バナーをリリースして以来、Google はプログレッシブ ウェブアプリにわかりやすいラベルを付け、ユーザーが簡単にインストールできるように取り組んできました。最終的な目標は、すべてのプラットフォームでアドレスバーにインストール ボタンを提供することです。Chrome 68 では、この目標に向けた変更を行っています。 変更の概要 Android 版 Chrome 68（2018 年 7 月の Stable 版）以降、Chrome では「ホーム画面に追加」バナーが表示されなくなります。サイトがホーム画面への追加の条件を満たしている場合は、ミニ情報バーが表示されます。その後、ユーザーがミニ情報バーをクリックするか、ユーザー ジェスチャーから beforeinstallprompt イベントで prompt() を呼び出すと、Chrome にモーダルのホーム画面への追加ダイアロ
workbox を導入してServiceWorkerによるキャッシュを実装した話 - アクトインディ開発者ブログ
morishitaです。 いこレポに workbox を導入してServiceWorkerによるキャッシュを実装しました。 そのことについて書きます。 導入の背景 いこレポはおかげさまで順調に成長できており、アクセス数も伸びてきています。 先日 1 周年を迎え、ますます頑張っていなかければと思っている所存です。 report.iko-yo.net いこレポのトラフィックは現状、オーガニック流入が最も多く新規ユーザが大部分を占めています。 それはそれで良いのですが、多少、成長の質にも目も向けられる様になり、 リピータを増やしたいなぁと思い始めました。 メディアの本分としては、魅力的なコンテンツでユーザを惹きつけるということに注力するのですが、それは編集チームのみなさんが頑張ってくれています。 私はエンジニアなのでエンジニアとしてやれることは何かなぁと考えたときに A2HS をもっと使ってもら
PWAの作り方をサクッと学ぶ - 「ホーム画面に追加」「キャッシュ操作」「プッシュ通知」の実装 - エンジニアHub｜Webエンジニアのキャリアを考える！
PWAの作り方をサクッと学ぶ - 「ホーム画面に追加」「キャッシュ操作」「プッシュ通知」の実装 PWAをテーマにしたコミュニティ「PWA Night」を運営する菅家大地さんが、既存のWebアプリをPWA化する簡単な実装方法を解説します。 はじめまして、菅家（@kan_dai）といいます。普段は株式会社TAMという会社でフロントエンドをメインに、クライアントのWebサイト制作やWebサービスの開発をしています。PWA（Progressive Web Apps）をテーマにしたコミュニティ「PWA Night」の運営もしています。 さて、2018年ごろからPWAという言葉を聞く機会が多くなってきました。2019年現在、毎月コンスタントにPWAに関する仕事の相談を受けるようになっており、PWAへの関心の高まりを感じます。日本経済新聞やスマートフォン版Yahoo! Japanといった有名サービスでの
【Other】【CSS / jQuery / javascript】PWAでプッシュ通知を実装してみる（３）Firebaseでプッシュ通知に必要なトークンを処理する｜虹色ミツバチ
前回までの記事で、PWA化にはmagnifest.jsonとserviceworker.jsが必要と解説し、そのサンプルを掲載しました。 今回からは目標だったプッシュ通知について解説します。 プッシュ通知の仕組みとFirebaseを利用することにした経緯 PWAを使ったプッシュ通知では、ブラウザで「プッシュ通知を受け取る」設定をした時に、「トークン」が発行されます。 これはブラウザ単位で発行されるので、PCのGoogle ChromeとスマホのAndroidでは別々のトークンが発行されます。 この「トークン」に対して、PWAを利用したサイト（ウェブアプリ）の管理者がサーバーからCurlコマンドを叩くことでプッシュ通知を送信します。 すなわち、「トークン」をどこかに保存しておく必要がありそうです。 トークンを取得したとしても、プッシュ通知を１件１件送っていくのは時間がかかりそうな気がします。
脱ネイティブ！Googleが推進する「PWA」にたった数時間で対応する方法
Googleが昨年発表した、Webアプリをネイティブアプリのように使えるようにするしくみ「PWA（Progressive Web Apps）」が話題です。既存サイトをPWA化する方法をサンプルコードをもとに解説します。 ここ最近はプログレッシブWebアプリ（Progressive Web Apps、PWA）の話題をよく耳にするとともに、これが未来のWebなのかどうかが議論の的になっています。ネイティブアプリ vs PWA論争に加わるつもりはありませんが、PWAがモバイルデバイス対応を強化し、ユーザーエクスペリエンスを向上することだけは確かです。2018年までにはモバイルからのアクセス数がほかのすべてのデバイスからのアクセス数を上回ると予測されるなかで、どうしてこの流れを無視できるのでしょうか。 良いニュースは、PWAの作成は難しくないということです。実際のところ既存のサイトをPWA化するこ
Windows 2000っぽいギザギザフォントを2020年のウェブブラウザで再現するまでの道のり
絵文字もCSSの対応も不十分で、ウェブページの色彩も豊かではなかった1990年代風のホームページを作りたいと考えた2人のウェブエンジニアが、「簡単に実現できるだろう」とフォントの再現に取りかかったところ、思わぬ技術の壁にぶつかってしまいました。 Convincing-looking 90s fonts in modern browsers – Vistaserv.net https://vistaserv.net/blog/90s-fonts-modern-browsers 1990年代風のウェブサイト・Vistaservを趣味で運営しているケイトリン氏とポール氏は、当初「グレーの背景に黒のTimes New Romanのフォントを合わせれば1990年代風のデザインを再現できるだろう」と考えていたそうです。しかし、実際に作成したウェブページをGoogle Chromeで確認したところ、以下
【Nuxt.js】Firebase Storageに画像アップロード・削除する方法 | みんたく
前提条件Nuxt.jsとFirebase Storageの連携をします。firebase.jsにFirebaseとの繋ぎ込みの設定をしておきましょう。 ・firebase.js
【7年かかった】19歳から7年、1人で30個のWebサービスを作り一発当ててもう働く必要がなくなったので振り返ってみる - 考えすぎてしまう人のブログ
どうもせせりです:) 19歳の頃からほぼ1人でRailsでWebサービスを作り始めて早7年 紆余曲折ありなんだかんだで作ったサービスは30個ほどになりました 7年ほど前に一番最初に作ったTwitterアカウントで「僕の夢は25歳までに3億円を稼いで残りの人生を楽しむ事です」などと言っていました あれから7年がたち26歳になり、3億円は無理でしたが残りの人生贅沢しなければ働かずに生きていけるくらいにはなりました Rails勉強会、ハッカソン、未踏、などなど色々参加していましたし、狭いRails界隈なのでもしかしたら勉強会などでお会いした方は覚えている方もいるかもしれません 色々お話を聞いてくださりアドバイス下さった先輩方ありがとうございます あの頃の初心者は無事に夢にたどり着きました！ 振り返ってみれば訴訟起こすぞって怒られたり、警察から電話がきたり、サーバー会社にサービス止められたり、サー
ブラウザからメーラーアプリの受信トレイを起動する方法 | collabit（コラビット）｜不動産テック(RealEstateTech)企業
こんにちは。 コラビットのGrowthHackerソネ（@_kok____）です。 先日、メール認証率UPの施策として、申込み完了ページの改善を行ったのですが、その際ハマってしまいました。。。 何にハマったかというと、スマホの場合にURLスキームでメーラーアプリを起動したかったのですが、ググってもググってもmailtoで新規メールを立ち上げる方法ばかり。 私がやりたかったのは受信トレイを開くことだったので、思った以上に時間を費やしてしまったわけです。 そんなこんななので、やり方をまとめておきます！ iOSの場合 公式のドキュメントはコチラにありました。 公式ではmailtoで新規メールを作成する方法しかないのですが、messageというURLスキームを使えばメーラーの受信トレイを開くことができます！（公式のサポート外になってしまうかもしれませんが）
CSSでメディアクエリ(Media Queries)の基本的な書き方、記述の意味を理解し、「何となく使う」を卒業する。 | WEMO
CSSでメディアクエリ(Media Queries)の基本的な書き方、記述の意味を理解し、「何となく使う」を卒業する。 2019 8/15 今回は、レスポンシブで絶対にお世話になるCSSの メディアクエリ（Media Queries）について。基本的な書き方や記述の意味についてまとめていきます。 なんとなく @medeia screen and ... とか書いているけど、 screenってどういう意味？とか、そんなレベルの話です。メディアタイプ・メディア特性・区切り方やそのキーワードの意味など...。 先日、 @media only screen...という書き方を目にした時に onlyの意味がわからず、それだけを調べるつもりが、結構知らないことがあってびっくりしました。 今までがいかに「何となく」だったかを痛感し、せめて基本的なことくらい分かっておこうと思った次第です。 はじめに 今回
Shrineを使って画像をアップロードする | RE:ENGINES
はじめに こんにちは、onoです。 以前、CarrierWaveを使って画像をアップロードするフォームを作成しました。 CarrierWaveは多機能で使いやすいGemだと思いますが、コードが大きく複雑なため、一般的な使い方から外れた場合や問題が発生した場合に処理を追っていくのが大変です。 そこで、今回は実装がシンプルで必要な機能を選んで追加できるShrineを使ってみます。 Shrineとは 簡単な説明 Shrineはファイルをアタッチするためのツールです。 主に画像をアップロードする際に利用されるのではないかと思います。 作者 ShrineはJanko Marohnić氏（リポジトリはこちら）が2015年9月から開発しています。 特徴 主な特徴としては下記の2つが挙げられます。 Shrine本体は必要最小限の機能のみを実装しているため、シンプルでコードが小さい。 リサイズやダイレクトア
ログインできないec2インスタンスを調査する ｜ DevelopersIO
はじめに サーバを運用しているといろいろなことが起こります。 今回はなんらかのトラブルによりインスタンスが正常に起動しない、 ログインできなくなった場合の対応方法をご紹介します。 障害インスタンンスはAmazon LinuxでrootボリュームはEBSということで話を進めていきます。 障害インスタンスを停止する 正常に起動しない、ログインができないインスタンスをstopします。 サーバにログインできないのでマネジメントコンソールやAPIでstopします。 障害インスタンスのルートボリュームをデタッチする ルートボリュームのEBS IDを確認してVolumesへ移動します。 ・DescriptionのRoot Device 「/dev/xvda」をクリック また後でアタッチし直すのでRoot Device名はメモしておきます。 ・EBS ID をクリック ・Volumesに移動します。 ・A
半年間の開発環境の改善を振り返る - メドピア開発者ブログ
こんにちは、メドピアCTO室 SREの侘美(たくみ)です。 普段はRails/Vue.js/terraform/Lambdaなどを書いています。 趣味は飼い猫と遊ぶことで、生傷が絶えません。 入社してから約半年間、Railsのプロジェクトで実装をしつつ、合間に開発環境の改善をいろいろとやってきました。けっこうな分量となったので、紹介したいと思います。 なお、本記事で扱う開発環境とは下記2つを指すこととします。 ソースコードの修正/テストの実行/静的解析の実行環境 サービスを起動し、ブラウザでデバッグする環境 特徴 主な改善対象である、「MedPeer」サービスの特徴をご紹介します。 Ruby on Rails製 社内では最も巨大なRailsプロジェクト モデル数693 認証サービス、旧サービス(PHP製)と連携している 開発環境はDocker for Macを利用 コンテナ数は旧システム、
PHPの危い関数リスト
(Last Updated On: 2019年2月2日)一応、PHPの危い関数リスト、は存在します。例えば、以下のような物があります。 StackOverflow DangerousPHPFunction 後者は主にホスティング環境（？）でリスクがある関数の一覧を作るプログラムのようです。 ファイルを操作する関数、コマンドやスクリプトを実行する関数などのリスクは自明だと思います。少し趣向を変え、間違えて使うと危い関数の一覧を独断と偏見で作ってみました。 【重要】こういった「危険な物」を定義するのはブラックリストです。ブラックリストは仕組的に危険です。ブラックリストに頼るのは脆弱性を作るような物です。ブラックリスト”だけ”で安心しないでください。最後にどうすれば良いのか？を書きます。 hash_hkdf() hash_hkdf()は秘密鍵から実際に利用する鍵を導出する関数です。鍵を作る関数な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
実はYOUTRUSTのChrome拡張つくっていた件 - YOUTRUST Tech Blog
Shrineでアップロードする際に画像を加工する – RE:ENGINES
Slack のインフラはどのように進化してきたか？
