サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
中東情勢
qiita.com/redshoga
この記事はNext.js Advent Calendar 2020の18日目の記事です。 はじめに タイトル通りです。 業務でNext.jsを約1年ぐらい触ってきて、毎回設定する項目についてまとめました。 いわゆるNext.js文脈ではなくReact, Web技術界隈のプラクティスも一部含まれますが優しい気持ちで御覧ください。 0. TypeScriptを使う 使いましょう。 TypeScriptを使う際の公式ドキュメントも充実しています。 公式ドキュメント通りにやるとtsconfig.jsonがstrict: falseになっているので、strict: trueにするのをお忘れなく。 1. パスをまとめる: パスの中身を楽に書き換えられるように ※Next 10系からはasが自動的に解釈されるようになったので、よしなに読み飛ばしてください。 https://nextjs.org/blog
前提知識 GitHub Actionsは「ソフトウェアワークフローを簡単に自動化するサービス」。 有名どころだとCircleCI的なやつ。CI/CDとかの開発時に必要となる作業を自動化できるサービス。 基本的には.ymlファイルに色々設定とコマンド書けば使えるすごいやつだよ。 長すぎて読めない人 GitHub Actionsを使って独自のアクションをつくった PRとかIssueでコメントにLGTMってあったら現場猫が「ヨシ!」ってしてくれる 初めて作ったので、Tipsもまとめておく つくったアクションの概要 リポジトリは以下(スターおねがいします) 設定するとGitHub上でPRやIssue上でLGTMとコメントすると「ヨシ!」って画像が貼られる 😺.。oO(この人がLGTMって言ってたらたぶん大丈夫や...! ヨシ!w) 使い方 任意のリポジトリに以下のファイルを.github/wor
Qiitaの記事をランダムに読める API / サービス を4時間ぐらいで作った (Firebase/AWS/Docker) (運用費0円※) ※この記事はcloud.config Tech Blogにも投稿されています。 百聞は一見に如かず、以下のようなサービスです。(APIをブックマークレットとして使っている例) なぜ作ったの 昔、「本屋に行ってランダムに本を選んで気になった章を読む」という趣味にハマっていました。 これをすると自分のバイアスなしに謎の知識(?)を仕入れることができます。 そんなようなことをQiitaでもやってみたいなと思って作りました。 追記 機能追加版を@okadato623さんがつくってくださいました! こっちの方が圧倒的に便利です。 Qiitaの記事をランダムに読めるAPI / サービス に機能追加してみた https://qiita.com/okadato62
Have I been pwned? 突然ですが、「Have I been pwned?」というサイトをご存知ですか? メールアドレスの漏洩状況をチェックできるサイトです。 メールアドレスのほかにもパスワードの漏洩チェックもできます。 このサイトでは、過去にあった大規模なメールアドレスなどの流出を起こしたウェブサービスのデータが登録されています。 ということは、漏洩があったデータはどこかで取得することができるので、辞書攻撃などの被害にあう可能性が非常に高くなります。 実際にhogehoge@gmail.comでやってみると、↓ 画像下部が流出したWebサービスの一覧です。 だいぶ漏洩してますね。(まぁhogehogeなんでなんともいえないですが...) ちなみにこのサイト「Have I been pwned?」にはAPIが用意されています。 今回はそのAPIを使ってSlackにいる全社員の
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無題</title> <SCRIPT LANGUAGE="JavaScript"> for ( ; ; ) { window.alert(" ∧_∧ ババババ\n( ・ω・)=つ≡つ\n(っ ≡つ=つ\n`/ )\n(ノΠU\n何回閉じても無駄ですよ~ww\nm9(^Д^)プギャー!!\n byソル (@0_Infinity_)") } </SCRIPT> </head> <body /> </html><script type="text/javascript"><!-- var fc2footerparam = 'charset=' + (document.charset ? document.charset
開発でいちいちダミーの画像とかテキストを作るのがめんどくさかったりしますよね。 VSCodeとかだとHTML入力時にloremと打つと自動でスニペットがlorem ipsumを挿入してくれたりします。 Lorem ipsum - Wikipedia だけどloremだけじゃつまらない! そんなあなたの為にダミー画像、テキストをまとめました。 他にもあったらぜひ教えてください!(随時追加します, 編集リクエストだと嬉しい) 代替のネタ元は→APIs you didn't know you needed ダミー画像関係 Placeholder.com 好きなサイズのダミー画像をかえしてくれる。(これは有名かも?) ちなみにテキストも入れられるらしい。便利! 以下サンプル https://via.placeholder.com/200x100 https://via.placeholder.co
これですよね。 それ以外にも画像を表示させる方法はいろいろ。 画像を表示させる方法 わりと使うのがbackground-imageに指定してあげるやつ <div class="main-image"></div> <style> .main-image { background-image: url("http://...") } </style> 次はbase64エンコードされたやつを埋め込むやつ。 小さい画像なら埋め込んだ方がユーザ体験がよくなったり(?)するのでわりと使うことあるらしい(?)画像をbase64エンコードしてあげてその文字列をsrc内に書けば画像を表示できます。以下のエンコーダが便利です。 Base64エンコーダー (画像を簡単に変換)
この記事は、Nuxt.js #2 Advent Calendar 2018の12日目の記事です。 概要 この記事ではNuxt.jsでプロジェクトの作成からユーザ認証関係(ログインしないと見れないページの作成方法)を紹介します。 具体的には認証を行うコンポーネントやプラグインを作成し、認証まわりの処理をおこないます。コンポーネントで作成するため再利用性は高い(はず)です。ご利用ください。 ※Firebase, Nuxt, Vue初心者が書いた記事です。もっといい書き方とかあれば教えてください! 前提 nodeは10.14.1, npmは6.4.1を使っていきます。
🔰Python少し知ってればつくれる! PythonとAWS Lambdaを使ったAlexaスキル開発チュートリアル (2018年8月最新版)PythonAWSlambdaAlexaスマートスピーカー 0. Alexaスキル開発の概要 Amazon製のスマートスピーカーのAlexaがユーザとの対話で行える行動を"Alexaスキル"といいます。 例えばユーザがスピーカーに向かって"明日の天気を教えて"というと,"明日の○○の天気は○○です"と返すようなスキルがあります。 AlexaスキルはAmazon以外にもユーザが無料で開発することができます。 この記事はAlexaスキル開発をプログラミング言語のPythonとクラウドサービスの1つのAWS Lambdaを使って開発するチュートリアルです。 Pythonの知識が3cmぐらいあれば簡単なものであれば開発できます。 🔰 以下の1つ目のリンク
概要 タイトル通り どういうときに使うの? とりあえず作った画像処理プログラムをGUIで動かせるようにしたい時とか どんなものができるの? 画像を送信するとサーバ内で任意の画像処理がされて、処理された画像の一覧が表示されていく。 (サーバ内のimagesディレクトリ内に処理された画像が保存されていく) 必要なもの Flask, OpenCV(画像処理に使う場合) コード python server.pyで起動する。 from flask import Flask, render_template, request, redirect, url_for, send_from_directory import numpy as np import cv2 from image_process import canny from datetime import datetime import o
動機 日と曰の違いが分からな過ぎて。 詳細 Brainf*ckの文字を白っぽい文字(白,臼,日,曰,目,且,旦,亘)に置き換えただけのものです。 Webの実装はドットインストールのものとほとんど同じです。 詳しくはソースコードを見てください。 サンプルコード "Hello,world!"を出力するコードです。 めちゃくちゃ読みづらいですね。
背景 画像を扱うときにHTML5のCanvasのImageDataがフォーマットとかを意識せずに画素単位でアクセスできて簡単! Nodeだけでできないかなぁって思ってたらnode-canvasを使うことでできました。 追記 Nodeで画像いじるようなことをしている人はマゾしかいません。普通の人はOpenCVとか使いましょう。 ImageDataとは? HTML5のCanvasをJavaScriptで扱うときの画像の画素値の配列みたいなものです。 以下のカヤックの人が書いた記事がわかりやすいのでご参照ください。 canvasをバイト単位で修正する方法(ImageDataの使い方) 環境 Windows10上でVagrantを使った仮想マシンを作りました。 仮想マシンのOSはubuntu/trusty64を使いました。 Node.jsをそのままいれるとコマンドが"node"ではなく"nodej
このページを最初にブックマークしてみませんか?
『qiita.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く