Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに SSTでアルバイトをしていて約一年半、仕事は勉強になることばかりで「むしろ自分がお金を払わなくて良いのか?」と思いつつある石渡です。 今回はとある理由でCSP(コンテンツセキュリティポリシー)について調べる機会を頂き、色々な記事を読みましたので、CSPについてまとめてみます。 CSPとは CSP(Content Security Policy)は、対応しているユーザーエージェント(通常はブラウザ)の挙動をWebサイト運営者が制御できるようにする宣言的なセキュリティの仕組みです。どの機能が有効になるか、どこからコンテンツをダウンロードすべきか、などを制御することで、Webサイトの攻撃対象領域を小さくできます。1 簡単に説明すると、XSS等を緩和する為、インラインスクリプトやevalなどを禁止したり、信頼できるコードなどを参照するように制限をかけたりするセキュリティの為のHTTPレス
まえおき 今回は気になる記事を検証する内容だゾ たまにこういう感じで記事を書くゾ 今日はブラウザでExcelチックなことができたので その感想と使いどころを書いてイくぞ 気になった記事 JavaScriptだけでExcel風のスプレッドシートを開発できる「jExcel」を使ってみた! ていうかさ ブラウザでExcelチック? そんなのオンラインOfficeを使えば解決でしょ??? そういわずに聞いてください。 まぁまぁ 自分のWebアプリに Excelみたいなセル機能が実装できたら カッコ良いなとか思っている。 加えて 電子化っていいよね。 で! 具体的に何をしたかと言えば jexcelというものを使えば ブラウザ上でExcelのような処理ができる と聞いて実際にやってみたという話 先に結論を言おう ブラウザ上でCSVの加工ができる。 これはかなりの範囲で応用が効くのではと 思わざるを得な
「な、なんじゃこりゃあああぁあっtっt!!!!」 ・・・ ・・・ ・・・ 読みやすいコードを書きたい 複雑な条件分岐は、書いている本人も、後からそれを読む他人も非常に疲れるものです。 令和プログラマー*1である私自身、なるべく気を付けようと思っていますが、ついつい条件反射でif-elseを書いてしまいそうになります。 (*1: 令和になってからプログラミングを知った人。初心者のこと。) if - elseを使わない条件分岐のレパートリーを増やす if - else文が絶対ダメということでは決してありません。 たくさんのレパートリー、つまり引き出しを持っておけば、適切な読みやすいコードをかける可能性が上がるかなと思うのです。 文と式 JavaScriptには「文」と「式」があります。 この2つの違いを意識することが重要ではないかと思います。 「文」は、マシンへの命令です。 「式」は数学的な値
4. RIGIDBODYの追加 RIGID BODYも同様に、ADD COMPONENTから追加をします。 床の場合はこちらはStaticのままで大丈夫です。 床の作成はこれで完成しました。次は一人称視点を実装していきます。 一人称視点を実装する この状態でゲームを起動するとキャラクターの操作ができるようになっています。これの後は、ヒエラルキーを調整して、1人称視点を実装します。 現状確認をするゲームを起動する 1. ゲームの起動をする ゲームの起動は、シーンビューから行うことができます。 2. WASDで操作、Spaceキーでジャンプ WASDキーでPlayerの操作を行うことができます。Spaceをクリックすることでジャンプすることができます。 カメラをPlayerのエンティティの下に配置 ゲームを起動すると分かりますが、現状はFirstPersonではありません、カメラの カメラをP
この記事の目的 2020年02月から、GASが従来のRhinoエンジンからV8エンジンに対応した。 これにより、最新のJavascriptのモダンな書き方ができるようになった。 この記事はこのバージョンアップでGASがどうなったか、と、モダンな書き方を学習するためのメモ (公式)スクリプトをV8ランタイムに移行する https://developers.google.com/apps-script/guides/v8-runtime/migration 注意 誤った内容があるかもしれませんので、閲覧の際は、参考程度にとどめたほうが良いかもしれません。 気を付けること 予約語禁止になった。 Rhinoではある程度許容されていたみたいですが、V8ではより厳密になった。 for each(variable in object)を避ける for (variable in object) か for
はじめに メディアの開発において外部サイトからの流入者のみに何かポップアップやモーダールの表示したい時などはありませんか。 今回はその判定についてまとめていきたいと思います。 外部サイトからのランディングの判定をしよう JavaScriptを用いて外部サイトからのランディングの判定をするには分割して考える必要があります。 主に以下3つになります。 ①1つ前に開いていたページのドメイン取得 ②現在開いているページのドメインの取得 ③①1つ前のページのドメインと②現在のページのドメインが一致するか判定 ※ちなみにドメインとは例えばhttps://www.google.com/toppagedayoこんなURLがあるとすると、www.google.comの部分のことです。 それでは1つづつ確認していきましょう。 ①1つ前に開いていたページのドメイン取得 これはとても簡単です。 document.
Grid.js Advanced Table PluginGrid.js is a Free and open-source JavaScript table plugin. It works with most JavaScript frameworks, including React, Angular, Vue and VanillaJs.
JavaScript/ECMAScriptというプログラミング言語の歴史について書いた文章はWikipediaなどいろいろなものがあります。 その中でも、ECMAScript 2015のSpec EditorであるAllen Wirfs-Brockによって書かれた”JavaScript: The First 20 Years”が特におすすめです。 JavaScript: The First 20 Years JavaScript: The First 20 Years | Zenodo “JavaScript: The First 20 Years”はHOPL IV - History of Programming Languages向けに書かれたPaperです。 JavaScriptの誕生からECMAScriptの策定、ECMAScript/JavaScript各バージョンでの違い、ブラ
概要 Chart.jsでは普通にグラフを作ると画面の幅に合わせて1つのデータ当たりのサイズをレスポンシブに調整して表示してくれます. とても便利ですが,データの量が多いとかなり見づらくなってしまいます. そこでデータ1つ当たりの横幅を固定して画面に収まりきらない分は横スクロールで見えるようにしようと思いましたが,かなり苦労したのでメモを残します.参考になれば幸いです. 完成図 今回は棒グラフが必要だったので,棒グラフを作成しました. 他の種類のグラフは試していませんが,データ構造が同じようなグラフなら上手くいくと思います. 図の下にスクロールバーが描画され,スクロールバーを動かすとスクロールすることができます. (右の方はラベルしか描画されていませんが,値を入れなかっただけなので気にしないでください.) 実行環境 ブラウザ: Google Chrome Chart.js バージョン: 2.
最近猛烈にスターを集めているビルドツール、Viteを触ってみたので簡単に紹介します。 この記事はVite v0.19.1時点での情報です。 Viteとは? ViteはVue.jsの作者のEvan You氏が開発中のノーバンドルなビルドツールです。 ネイティブのESモジュールのインポートを利用しバンドル不要で高速に動作するdevサーバーと、Rollup.jsをベースとしたプロダクションビルド機能を提供します。 設定不要で.vueのSFC(Single File Components)をコンパイルできて、さらにデフォルトで今開発中のVue3.0が使えます。 しかも、vue-cliのようにVue.js限定ではなく、React、Preactにも対応しています。 注意 Still experimental, but we intend to make it suitable for producti
プロジェクトで使われている技術と ESModule の状況について UIT では、 SPA 開発のプロジェクトにおいて Vue.js と React が多く利用されており、既存の多くは Babel を利用した JavaScript で、新規のプロジェクトでは TypeScript を利用して開発が行われています。 FYI: 【LINE DEV DAY 2019 番外編】UIT Front-end Tooling Survey 2019 技術選定は勿論、プロジェクトにおける細かなコーディングルールについては、プロジェクトのコードオーナーに委ねられており、プロジェクトごとに裁量を持った意思決定を行っています。 その上で、私が携わるプロジェクトにおいては、 default export を可能な限り避けるように心がけています。 import 側の裁量で対象を自由に命名できてしまう 今回は「『Da
class Graph { constructor() { this.connectedList = {}; } addVertex(vertex) { this.connectedList[vertex] = [] } addEdge(v1, v2) { this.connectedList[v1].push(v2); this.connectedList[v2].push(v1); } removeEdge(vertex1, vertex2) { this.connectedList[vertex1] = this.connectedList[vertex1].filter( v => v !== vertex2 ); this.connectedList[vertex2] = this.connectedList[vertex2].filter( v => v !== vertex1
setTimeout(() => console.log(5), 1000); setTimeout(() => console.log(4), 1000); setTimeout(() => console.log(3), 1000); setTimeout(() => console.log(2), 1000); setTimeout(() => console.log(1), 1000); setTimeout(() => console.log(0), 1000); よめ太郎「↑このコードを実行するのに、合計で何秒かかると思う?」 娘「ええと、setTimeout()は確か」 娘「タイマーをセットするメソッドだから」 娘「1,000ミリ秒後・・・つまり1秒後にconsole.log(5)が実行されるよね」 よめ太郎「せやな」 娘「その後、次の行が処理されるから」 娘「また1秒経過し
https://をスキーム、exampleをサーバー名、xxx.xxxはドメイン、example.xxx.xxxの部分はオーソリティ、yyyy/zzzzはパス名といいます。(諸説あるかもしれません) 手順2 GAS側 適当に新しいプロジェクトを作って関数を作ります。 文字列を受け取ってHello!とくっつけるだけです。 次にGoogleCloudPlatformとの連携を行います。GASは昔は自動で連携してたんですがその機能がOFFになっているそうで自分で作らなければいけません。 手順3 GoogleCloudPlatform側 これは課金が必要です。よくわからないですが無料トライアルに銀行口座が必要らしいです。自動で請求しないみたいですが。 新しいプロジェクトを作る。(名前はGASと同じがわかりやすい) APIとサービスからOAuth 同意画面に移動する。同意画面を作成していきます。 ア
はじめに どうもはるうさぎです。最近は Vue.js とか Nuxt.js とか書いてます。 ところで、みなさん時間のフォーマットはどうされていますかね? Moment.js などのライブラリを使われる方が多いと思います。 仕事のタスクで 5:0 → 05:00 に修正して欲しいというものがありました。 これの背景として、独自で時間と分を分割した上で、使用されていたので修正が難しいというものがありました。 まあ普通は簡単じゃん〜〜って思うじゃないですか。しかし、 Moment.js 単体だと 時:分 のように、最大単位を 時 に制限することができないんですよ。 そこで、 Moment.js の拡張プラグインの moment-duration-format を使います。インストール方法などの詳細は参考文献を見てください。 今回はそれをインストールした上で、 Vue.js のフィルターとして使
Nuxt.jsとFirebaseで作っていたWebサービスを7月末にリリースして、はや10ヶ月。。 登録総額1億円を突破したので、記念企画として積読レビュー機能をリリースしました!! そこでKonva.jsというライブラリを使ってOGP画像を生成したので、 その時に調べたことをまとめてみました。 積読・読書前でも書ける『積読レビュー』 読書のレビューというと、読書後の感想を書くものですが、 積ん読が多いとなかなか書く機会がないです。。 「感想は読書後だけではないのでは?」 ということで、読書前でも書けるレビューを2つ用意してみました。 妄想で書く『妄想レビュー』 まだ読んでないけど、本の表紙や帯の印象から妄想で書いてみる『妄想レビュー』 「中身じゃなく外観だけで、読書後のレビューを書いてみるとどうだろう。。?」 というネタ的なレビューです。 いかに読んでる醸し出せるかをチャレンジしてみると
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く