JavaScript JavaScriptで簡単にBase64エンコード&デコードの完全ガイド 2024-06-10 dad-union
![DAD UNION – エンジニア同盟|世のエンジニアを手助けするテック系サイト](https://cdn-ak-scissors.b.st-hatena.com/image/square/ed283dba3d5e981018ca1333058f70f7db03849e/height=288;version=1;width=512/https%3A%2F%2Fdad-union.com%2Fwp-content%2Fuploads%2F2023%2F06%2Flogo2.jpg)
JavaScript JavaScriptで簡単にBase64エンコード&デコードの完全ガイド 2024-06-10 dad-union
レイアウトが同じで「タイトル」と「メイン画像」が違うHTMLを量産するために使いました。 あまり理解できてないので、理解を深めるためにまとめようと思います。 ながれ ページ生成用JSONファイル(pages.json)をつくる テンプレート用EJSファイル(template.ejs)をつくる EJSの設定をgulpfile.jsに追記する gulpタスクを起動 構想 フォルダ構成 ↓こんなかんじで作ろうと思います。 src ├── __gulpfile.js__ │ ├── json │ └── __pages.json__ └── ejs └── __template.ejs__ dist └── __ejs生成HTML出力先__ JSONデータ 下記3つのデータJSONで管理しようと思います。 出力ファイル名(page) タイトル(title) 画像ファイル名(imageSrc)
人気のタスクランナーツール「Gulp.js」とテンプレートエンジン「EJS」を下地に、 JSONデータから複数ページを生成できる仕組みを備忘録を兼ねて紹介します。 きっかけ 現在進めている案件で、HTMLを静的かつそこそこ大量に作る事案が発生。 しかし1ページづつ作成・修正するのはとにかくめんどくさいと思われたので、JSONで情報を一括で編集でき、生成も簡単に出来るやり方を確立したかった。 前提・やりたいこと サーバはありものを使用。権限的な問題で新たにパッケージのインストールすることは不可。 PHPが使えないサーバだったため、複製は静的HTMLで行う必要がある。 似たページを1つづつ作成、後で修正をするのはとにかくめんどくさいので、機械的に行いたい。 ページ複製用データは全てJSONファイルにまとめたい。 仕様 書き出しツールとしてGulp.jsを使用。 テンプレートエンジンはEJS。採
似たようなhtmlを複数ページ制作するような案件があると思いますが、地道に複製して制作するのは非効率で管理も面倒でミスもしやすいです。 そこで今回はGulpとEJSというテンプレートエンジンを使用してJSONファイルに設定した値を読み込み、複数のhtmlファイルを量産する方法を備忘録を兼ねてご紹介します。 今回使用するもの 今回はGulpを使用してEJSを動かします。Gulpの導入方法などは検索するとたくさん記事が出てきますので、そちらをご確認下さい。 テンプレートエンジンであるEJSと、生成したファイルごとに名前を付与するリネーム用のプラグインを導入します。 gulp-ejs gulp-rename pages.json template.ejs gulp.js 各ファイルの設定 pages.json ユニークな値を格納するJSONファイルは下記の通りです。 { "pages": [ {
ejs は embeddedjavascript というテンプレートエンジン。 gulp 用のパッケージもあるよ。 www.npmjs.com HTML に組み込むような書き方なので、デザイナーさんなどと共有しやすいし、学習コストが低くて気に入っています。 外部ファイルの include や 変数の呼び出し、ループなど、はもちろん js で出来ることは(たぶん)全部出来る。 以下、外部ファイルの head を読み込んで、見出しに変数を入れ、配列をループさせる簡単な例です。 <% var title = "見出し1", array=["hoge","fuga","poyo"] %> <html> <head> <% include head %> </head> <body> <h1><%= title %></h1> <ul> <% for(var i=0;i<array.length;i
これらの設定値を変更することでもろもろ調整が可能になっています。 追加される要素は一つひとつが <div>で囲われるようになっており 個々にID名が付与されるようになっています。 ※実行後のHTMLソースをFirebug等の開発ツールで見てもらえると分かるかと思います。 (ID名に関してはJSONファイルに記述) スクリプト14行目の「url: ‘js/include.json’」が 読み込むJSONファイルの指定になるので パスやファイル名を変える際にはここを変更します。 そして読み込むJSONファイルは以下の様になっています。 (ちょっとムダに長いです・・・) ◆JSON [ { "itemNum": "1", "itemSource": "<img src='img/photo1.jpg' alt='' />【photo1】<br>これは追加要素1つ目のダミーテキストです。これは追加
AjaxでJSON形式のデータを扱う JSON形式のデータは、XML形式よりタグが無い分サイズも小さく、又、XML形式で必要なDOM操作も無く、 単純な処理で読み込みや書き出しができます。 javascriptはもとより、さまざまな言語間でのデータの受け渡しに使えるので便利です。 JSONのデータ形式や参照方法を勉強してみます。 JSONのデータ形式 JSONで使えるデータ型は数値・文字列・真偽値・配列・オブジェクト(連想配列)などです。 カンマで区切られたデータの集合を、配列は大カッコ[]で、オブジェクトは中カッコ{}で囲みます。 キーは必ず文字列になります。つまりダブルクォーテーションで囲む必要があります。 配列 ["田中", "佐藤", "鈴木"] オブジェクト {"name":"田中", "age":25, "sex":"男"} 両方の組み合わせ [{"name":"田中", "a
比較的単純なHTTPリクエストを実行する際は、非同期リクエストであるNSURLConnectionクラスのsendAsynchronousRequest:queue:completionHandler:クラスメソッドを利用する。 本APIはiOS5.0から利用可能。 第3引数completionHandlerにはデータ取得時に実行するBlock文を記述する。このBlock文は第2引数queueで指定したNSOperationQueue上で実行される。以下のコード例ではBlock文はメインスレッドで実行されることになる。 環境 Xcode 4.6.3 ARC ON iPhone 6.1 Simulator #import <UIKit/UIKit.h> @interface ViewController : UIViewController @property (weak, nonatomi
桜の季節も終わり、いい季節になって来ました。 時間の流れは早いものです。 今年は2つの目標を立てたけど、ひとつはクリア! もう一個もなんとかしよう。昨日と同じ明日なんて来ないからね。 話は変わって、iOSでWebAPIを使うときについて。 まあ殆どの場合はXMLを使うと思います。自分でWebAPIが使えるならプロパティリストでもいいですね。 しかしiOSのXMLパーサは使いづらい。ウンコーーー。 プロパティリストはiOS/Mac OSX以外だとちょい怖い。 そこで最近はJSONをよく使ってます。 なんといってもiOS5ならJSONライブラリが標準化されたし。 使い方はこんな感じ NSLog(@"WebAPIのURL:%@",apiUrlJson ); NSURL *httpDataUrl2 = [NSURL URLWithString:apiUrlJson]; NSURLRequest *
JSON は、「JavaScript Object Notation」の略で「ジェイソン」といいます。
JSONとは何か? JSONとはJavaScript Object Notationの略で、XMLなどと同様のテキストベースのデータフォーマットです。 その名前の由来の通りJSONはJavaScriptのオブジェクト表記構文のサブセットとなっており、XMLと比べると簡潔に構造化されたデータを記述することができるため、記述が容易で人間が理解しやすいデータフォーマットと言えます。 なお、JSONは2006年に「RFC 4627(http://www.rfc-editor.org/rfc/rfc4627.txt)」として公開されています。 例としてXMLとJSONで同じデータを記述したものをリスト1とリスト2に示します(図1)。 リスト1のXMLではすべての情報をタグで囲んだテキストノードとして記述していますが、XMLでデータを表現する場合、データの記述方法として属性とテキストノードの使い分けが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く