Rebuilt repository
ichiju
parent
da643bae50
commit
dd72405e01
|
|
@ -0,0 +1,241 @@
|
|||
const pluginTailwind = require('eleventy-plugin-tailwindcss');
|
||||
const { url } = require('./src/_data/site');
|
||||
|
||||
// ocoge start
|
||||
const md = require('markdown-it')({ html: true });
|
||||
// const EleventyFetch = require("@11ty/eleventy-fetch");
|
||||
const metascraper = require('metascraper')([
|
||||
require('metascraper-description')(),
|
||||
require('metascraper-image')(),
|
||||
require('metascraper-logo')(),
|
||||
require('metascraper-logo-favicon')(),
|
||||
require('metascraper-publisher')(),
|
||||
require('metascraper-title')(),
|
||||
require('metascraper-url')()
|
||||
]);
|
||||
const got = require('got');
|
||||
// ocoge end
|
||||
|
||||
module.exports = (config) => {
|
||||
config.addPlugin(pluginTailwind, {
|
||||
src: 'src/assets/css/*'
|
||||
});
|
||||
|
||||
config.setDataDeepMerge(true);
|
||||
|
||||
config.addPassthroughCopy('src/assets/img/**/*');
|
||||
config.addPassthroughCopy({ 'src/posts/img/**/*': 'assets/img/' });
|
||||
|
||||
config.addWatchTarget("src/assets/js/");
|
||||
|
||||
config.addLayoutAlias('default', 'layouts/default.njk');
|
||||
config.addLayoutAlias('post', 'layouts/post.njk');
|
||||
|
||||
config.addFilter('readableDate', require('./lib/filters/readableDate'));
|
||||
config.addFilter('minifyJs', require('./lib/filters/minifyJs'));
|
||||
|
||||
config.addTransform('minifyHtml', require('./lib/transforms/minifyHtml'));
|
||||
|
||||
config.addCollection('posts', require('./lib/collections/posts'));
|
||||
config.addCollection('tagList', require('./lib/collections/tagList'));
|
||||
config.addCollection('pagedPosts', require('./lib/collections/pagedPosts'));
|
||||
config.addCollection('pagedPostsByTag', require('./lib/collections/pagedPostsByTag'));
|
||||
|
||||
// ocoge start
|
||||
config.addPassthroughCopy({ 'src/assets/oc-css/**/*': 'assets/css/' });
|
||||
config.addPassthroughCopy('src/assets/floatbox/**/*');
|
||||
|
||||
// Shortcodes
|
||||
|
||||
// 注釈
|
||||
var ann = 0;
|
||||
config.addShortcode('annotate', conf => {
|
||||
if (conf) ann = 1;
|
||||
else ann++;
|
||||
let n = String(ann);
|
||||
return `<sup><a href="#${n}">${n}</a></sup>`;
|
||||
});
|
||||
var sm = 0;
|
||||
config.addPairedShortcode('small', (content, conf) => {
|
||||
if (conf) sm = 1;
|
||||
else sm++;
|
||||
content = md.renderInline(content);
|
||||
return `<small id="${sm}">${sm}. ${content}</small>`;
|
||||
});
|
||||
|
||||
// キャプション付きセンタリング画像
|
||||
config.addPairedShortcode('centerimg', (content, img) => {
|
||||
content = md.renderInline(content);
|
||||
return `<figure class="center"><img loading="lazy" src="/assets/img/${img}">
|
||||
<figcaption>${content}</figcaption>
|
||||
</figure>`;
|
||||
});
|
||||
|
||||
// インライン画像
|
||||
config.addShortcode('inlineimg', conf => {
|
||||
return `<img loading="lazy" class="inline" src="/assets/img/${conf.img}" style="height: ${conf.height ? conf.height : '32px'}">`;
|
||||
});
|
||||
|
||||
// 単純なボックス
|
||||
config.addPairedShortcode('simplebox', (content, cls) => {
|
||||
content = md.renderInline(content);
|
||||
return `<div class="${cls}"><p>${content}</p></div>`;
|
||||
});
|
||||
|
||||
// 現在の年(footerで使用)
|
||||
config.addShortcode("year", () => `${new Date().getFullYear()}`);
|
||||
|
||||
// Youtube 埋め込み
|
||||
config.addPairedShortcode("youtube", (content, conf) => {
|
||||
content = md.renderInline(content);
|
||||
return `<figure class="youtube"><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/${conf.videoid}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<figcaption>${content}</figcaption></figure>`;
|
||||
});
|
||||
|
||||
// 強調表示（インライン）
|
||||
config.addPairedShortcode("strong", (content, conf) => {
|
||||
content = md.renderInline(content);
|
||||
return `<span style="font-weight:bold; color:${conf.color ? conf.color : 'initial'}">${content}</span>`;
|
||||
});
|
||||
|
||||
// IconBox
|
||||
config.addPairedShortcode("iconbox", (content, conf) => {
|
||||
content = md.renderInline(content);
|
||||
return `<div class="iconbox">
|
||||
<span class="box-title"><i class="${conf.iconclass ? conf.iconclass : "fa-solid fa-circle-exclamation"}"></i></span>
|
||||
<p>${content}</p>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
// Blog Card
|
||||
config.addAsyncShortcode("blogcard", async (conf) => {
|
||||
try {
|
||||
var { body: html, url } = await got(conf.link);
|
||||
} catch (error) {
|
||||
console.error('MyTryCatchError: ' + error);
|
||||
return '<p>404</p>';
|
||||
}
|
||||
|
||||
const metadata = await metascraper({ html, url });
|
||||
|
||||
// uri に "localhost" を使えるようにする：ポート80 でローカルwebサーバを立てておく
|
||||
// なんか勝手に localhost が ocoge.club に書き換わるのでそちらも対策
|
||||
if (metadata.url) { metadata.url = metadata.url.replace('http://localhost', ''); metadata.url = metadata.url.replace('https://ocoge.club', ''); }
|
||||
if (metadata.image) { metadata.image = metadata.image.replace('http://localhost', ''); metadata.image = metadata.image.replace('https://ocoge.club', ''); }
|
||||
if (metadata.logo) { metadata.logo = metadata.logo.replace('http://localhost', ''); metadata.logo = metadata.logo.replace('https://ocoge.club', ''); }
|
||||
|
||||
return `<div class="card"><article class="blogcard"><h4 class="blogcard__heading"><a class="blogcard__link" href="${metadata.url}">${metadata.title}</a></h4>${metadata.image ? `<img loading="lazy" class="blogcard__image" src="${metadata.image}">` : ``}${metadata.description ? `<p class="blogcard__description">${metadata.description}</p>` : ""}<div class="blogcard__meta">${metadata.logo ? `<img loading="lazy" class="blogcard__logo" src="${metadata.logo}">` : ""}${metadata.publisher ? `<span class="blogcard__publisher">${metadata.publisher}</span>` : ""}</div></article></div>`;
|
||||
// const metadata = await EleventyFetch(`https://api.microlink.io/?url=${conf.link}`, {
|
||||
// duration: "1w",
|
||||
// type: "json",
|
||||
// });
|
||||
// return `<div class="card"><article class="blogcard">
|
||||
// <h4 class="blogcard__heading"><a class="blogcard__link" href="${metadata.data.url}">${metadata.data.title}</a></h4>
|
||||
// ${metadata.data.image ? `<img class="blogcard__image" src="${metadata.data.image.url}" width="${metadata.data.image.width}" height="${metadata.data.image.height}" alt="">` : ``}
|
||||
// ${metadata.data.description ? `<p class="blogcard__description">${metadata.data.description}</p>` : ""}
|
||||
// <small class="blogcard__meta">
|
||||
// ${metadata.data.logo ? `<img class="blogcard__logo" src="${metadata.data.logo.url}" width="${metadata.data.logo.width}" height="${metadata.data.logo.height}" alt="">` : ""}
|
||||
// ${metadata.data.publisher ? `<span class="blogcard__publisher">${metadata.data.publisher}</span>` : ""}</small>
|
||||
// </article></div>`;
|
||||
});
|
||||
|
||||
// FloatBox
|
||||
config.addPairedShortcode("floatbox", (content, conf) => {
|
||||
content = md.renderInline(content);
|
||||
w = conf.width ? conf.width : 'auto'
|
||||
return `<figure style="max-width: ${w}; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:${conf.colortheme ? conf.colortheme : 'silver'}" style="width: 100%;">
|
||||
<a href="/assets/img/${conf.img}" title="${conf.title ? conf.title : ''}"><img loading="lazy" src="/assets/img/${conf.img}" style="width: 100%;"></a></div>
|
||||
<figcaption>${content}</figcaption>
|
||||
</figure>`;
|
||||
});
|
||||
|
||||
// 別窓リンク
|
||||
config.addPairedShortcode("link_new", (content, conf) => {
|
||||
content = md.renderInline(content);
|
||||
return `<a href="${conf.uri}" target="_new" title="${conf.title ? conf.title : ''}">${content} <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>`
|
||||
});
|
||||
|
||||
// マーカー
|
||||
config.addPairedShortcode("span", (content, clss) => {
|
||||
content = md.renderInline(content);
|
||||
return `<span class="${clss}">${content}</span>`;
|
||||
});
|
||||
|
||||
// レッスン（アコーディオン）
|
||||
config.addPairedShortcode("lesson", (content, conf) => {
|
||||
content = md.renderInline(content);
|
||||
return `<details class="lesson">
|
||||
<summary class="lesson"> <i class="fa-solid fa-pen-to-square"></i> レッスン：${conf.summary}</summary>
|
||||
<div class="lesson"><div class="slide">${content}</div></div>
|
||||
</details>`;
|
||||
});
|
||||
|
||||
// ブロックプログラム（アコーディオン）
|
||||
config.addPairedShortcode("blockprogram", (content, conf) => {
|
||||
content = md.renderInline(content);
|
||||
return `<details class="lesson">
|
||||
<summary class="blockprogram"> <i class="fa-solid fa-computer-mouse"></i> 『オコゲ』ブロックプログラム：${conf.summary}</summary>
|
||||
<div class="lesson"><div class="slide">${content}</div></div>
|
||||
</details>`;
|
||||
});
|
||||
|
||||
|
||||
// 吹き出し
|
||||
// 話者アイコン（左）
|
||||
config.addShortcode("talkicon_l", function (conf) {
|
||||
return `<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/${conf.img}">
|
||||
<p>${conf.name ? conf.name : ''}</p>
|
||||
</div>`;
|
||||
});
|
||||
//吹き出し（左）
|
||||
config.addPairedShortcode("says_l", function (content) {
|
||||
content = md.renderInline(content);
|
||||
return `<div class="chatting">
|
||||
<div class="says">${content}</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
//話者アイコン（右）
|
||||
config.addShortcode("talkicon_r", function (conf) {
|
||||
return `<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/${conf.img}">
|
||||
<p>${conf.name ? conf.name : ''}</p>
|
||||
</div>`;
|
||||
});
|
||||
//吹き出し（右）
|
||||
config.addPairedShortcode("says_r", function (content) {
|
||||
content = md.renderInline(content);
|
||||
return `<div class="chatting">
|
||||
<div class="says_right"><p>${content}</p></div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
// 考える吹き出し
|
||||
config.addPairedShortcode("think_l", content => {
|
||||
content = md.renderInline(content);
|
||||
return ` <div class="chatting">
|
||||
<div class="think-l-bal-s"></div>
|
||||
<div class="think-l-bal-l"></div>
|
||||
<div class="tamathink">
|
||||
<p>${content}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
// ocoge end
|
||||
|
||||
return {
|
||||
dir: {
|
||||
input: 'src',
|
||||
output: 'htdocs'
|
||||
},
|
||||
// pathPrefix: "/subfolder/",
|
||||
templateFormats: ['md', 'njk', 'html'],
|
||||
dataTemplateEngine: 'njk',
|
||||
markdownTemplateEngine: 'njk'
|
||||
};
|
||||
};
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
# Creative Commons Attribution-ShareAlike 4.0 International
|
||||
|
||||
Creative Commons Corporation (“Creative Commons”) is not a law firm and does not provide legal services or legal advice. Distribution of Creative Commons public licenses does not create a lawyer-client or other relationship. Creative Commons makes its licenses and related information available on an “as-is” basis. Creative Commons gives no warranties regarding its licenses, any material licensed under their terms and conditions, or any related information. Creative Commons disclaims all liability for damages resulting from their use to the fullest extent possible.
|
||||
|
||||
### Using Creative Commons Public Licenses
|
||||
|
||||
Creative Commons public licenses provide a standard set of terms and conditions that creators and other rights holders may use to share original works of authorship and other material subject to copyright and certain other rights specified in the public license below. The following considerations are for informational purposes only, are not exhaustive, and do not form part of our licenses.
|
||||
|
||||
* __Considerations for licensors:__ Our public licenses are intended for use by those authorized to give the public permission to use material in ways otherwise restricted by copyright and certain other rights. Our licenses are irrevocable. Licensors should read and understand the terms and conditions of the license they choose before applying it. Licensors should also secure all rights necessary before applying our licenses so that the public can reuse the material as expected. Licensors should clearly mark any material not subject to the license. This includes other CC-licensed material, or material used under an exception or limitation to copyright. [More considerations for licensors](http://wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensors).
|
||||
|
||||
* __Considerations for the public:__ By using one of our public licenses, a licensor grants the public permission to use the licensed material under specified terms and conditions. If the licensor’s permission is not necessary for any reason–for example, because of any applicable exception or limitation to copyright–then that use is not regulated by the license. Our licenses grant only permissions under copyright and certain other rights that a licensor has authority to grant. Use of the licensed material may still be restricted for other reasons, including because others have copyright or other rights in the material. A licensor may make special requests, such as asking that all changes be marked or described. Although not required by our licenses, you are encouraged to respect those requests where reasonable. [More considerations for the public](http://wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensees).
|
||||
|
||||
## Creative Commons Attribution-ShareAlike 4.0 International Public License
|
||||
|
||||
By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and conditions of this Creative Commons Attribution-ShareAlike 4.0 International Public License ("Public License"). To the extent this Public License may be interpreted as a contract, You are granted the Licensed Rights in consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in consideration of benefits the Licensor receives from making the Licensed Material available under these terms and conditions.
|
||||
|
||||
### Section 1 – Definitions.
|
||||
|
||||
a. __Adapted Material__ means material subject to Copyright and Similar Rights that is derived from or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged, transformed, or otherwise modified in a manner requiring permission under the Copyright and Similar Rights held by the Licensor. For purposes of this Public License, where the Licensed Material is a musical work, performance, or sound recording, Adapted Material is always produced where the Licensed Material is synched in timed relation with a moving image.
|
||||
|
||||
b. __Adapter's License__ means the license You apply to Your Copyright and Similar Rights in Your contributions to Adapted Material in accordance with the terms and conditions of this Public License.
|
||||
|
||||
c. __BY-SA Compatible License__ means a license listed at [creativecommons.org/compatiblelicenses](http://creativecommons.org/compatiblelicenses), approved by Creative Commons as essentially the equivalent of this Public License.
|
||||
|
||||
d. __Copyright and Similar Rights__ means copyright and/or similar rights closely related to copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database Rights, without regard to how the rights are labeled or categorized. For purposes of this Public License, the rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights.
|
||||
|
||||
e. __Effective Technological Measures__ means those measures that, in the absence of proper authority, may not be circumvented under laws fulfilling obligations under Article 11 of the WIPO Copyright Treaty adopted on December 20, 1996, and/or similar international agreements.
|
||||
|
||||
f. __Exceptions and Limitations__ means fair use, fair dealing, and/or any other exception or limitation to Copyright and Similar Rights that applies to Your use of the Licensed Material.
|
||||
|
||||
g. __License Elements__ means the license attributes listed in the name of a Creative Commons Public License. The License Elements of this Public License are Attribution and ShareAlike.
|
||||
|
||||
h. __Licensed Material__ means the artistic or literary work, database, or other material to which the Licensor applied this Public License.
|
||||
|
||||
i. __Licensed Rights__ means the rights granted to You subject to the terms and conditions of this Public License, which are limited to all Copyright and Similar Rights that apply to Your use of the Licensed Material and that the Licensor has authority to license.
|
||||
|
||||
j. __Licensor__ means the individual(s) or entity(ies) granting rights under this Public License.
|
||||
|
||||
k. __Share__ means to provide material to the public by any means or process that requires permission under the Licensed Rights, such as reproduction, public display, public performance, distribution, dissemination, communication, or importation, and to make material available to the public including in ways that members of the public may access the material from a place and at a time individually chosen by them.
|
||||
|
||||
l. __Sui Generis Database Rights__ means rights other than copyright resulting from Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, as amended and/or succeeded, as well as other essentially equivalent rights anywhere in the world.
|
||||
|
||||
m. __You__ means the individual or entity exercising the Licensed Rights under this Public License. __Your__ has a corresponding meaning.
|
||||
|
||||
### Section 2 – Scope.
|
||||
|
||||
a. ___License grant.___
|
||||
|
||||
1. Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide, royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the Licensed Material to:
|
||||
|
||||
A. reproduce and Share the Licensed Material, in whole or in part; and
|
||||
|
||||
B. produce, reproduce, and Share Adapted Material.
|
||||
|
||||
2. __Exceptions and Limitations.__ For the avoidance of doubt, where Exceptions and Limitations apply to Your use, this Public License does not apply, and You do not need to comply with its terms and conditions.
|
||||
|
||||
3. __Term.__ The term of this Public License is specified in Section 6(a).
|
||||
|
||||
4. __Media and formats; technical modifications allowed.__ The Licensor authorizes You to exercise the Licensed Rights in all media and formats whether now known or hereafter created, and to make technical modifications necessary to do so. The Licensor waives and/or agrees not to assert any right or authority to forbid You from making technical modifications necessary to exercise the Licensed Rights, including technical modifications necessary to circumvent Effective Technological Measures. For purposes of this Public License, simply making modifications authorized by this Section 2(a)(4) never produces Adapted Material.
|
||||
|
||||
5. __Downstream recipients.__
|
||||
|
||||
A. __Offer from the Licensor – Licensed Material.__ Every recipient of the Licensed Material automatically receives an offer from the Licensor to exercise the Licensed Rights under the terms and conditions of this Public License.
|
||||
|
||||
B. __Additional offer from the Licensor – Adapted Material.__ Every recipient of Adapted Material from You automatically receives an offer from the Licensor to exercise the Licensed Rights in the Adapted Material under the conditions of the Adapter’s License You apply.
|
||||
|
||||
C. __No downstream restrictions.__ You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing so restricts exercise of the Licensed Rights by any recipient of the Licensed Material.
|
||||
|
||||
6. __No endorsement.__ Nothing in this Public License constitutes or may be construed as permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with, or sponsored, endorsed, or granted official status by, the Licensor or others designated to receive attribution as provided in Section 3(a)(1)(A)(i).
|
||||
|
||||
b. ___Other rights.___
|
||||
|
||||
1. Moral rights, such as the right of integrity, are not licensed under this Public License, nor are publicity, privacy, and/or other similar personality rights; however, to the extent possible, the Licensor waives and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to allow You to exercise the Licensed Rights, but not otherwise.
|
||||
|
||||
2. Patent and trademark rights are not licensed under this Public License.
|
||||
|
||||
3. To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of the Licensed Rights, whether directly or through a collecting society under any voluntary or waivable statutory or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right to collect such royalties.
|
||||
|
||||
### Section 3 – License Conditions.
|
||||
|
||||
Your exercise of the Licensed Rights is expressly made subject to the following conditions.
|
||||
|
||||
a. ___Attribution.___
|
||||
|
||||
1. If You Share the Licensed Material (including in modified form), You must:
|
||||
|
||||
A. retain the following if it is supplied by the Licensor with the Licensed Material:
|
||||
|
||||
i. identification of the creator(s) of the Licensed Material and any others designated to receive attribution, in any reasonable manner requested by the Licensor (including by pseudonym if designated);
|
||||
|
||||
ii. a copyright notice;
|
||||
|
||||
iii. a notice that refers to this Public License;
|
||||
|
||||
iv. a notice that refers to the disclaimer of warranties;
|
||||
|
||||
v. a URI or hyperlink to the Licensed Material to the extent reasonably practicable;
|
||||
|
||||
B. indicate if You modified the Licensed Material and retain an indication of any previous modifications; and
|
||||
|
||||
C. indicate the Licensed Material is licensed under this Public License, and include the text of, or the URI or hyperlink to, this Public License.
|
||||
|
||||
2. You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means, and context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the conditions by providing a URI or hyperlink to a resource that includes the required information.
|
||||
|
||||
3. If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to the extent reasonably practicable.
|
||||
|
||||
b. ___ShareAlike.___
|
||||
|
||||
In addition to the conditions in Section 3(a), if You Share Adapted Material You produce, the following conditions also apply.
|
||||
|
||||
1. The Adapter’s License You apply must be a Creative Commons license with the same License Elements, this version or later, or a BY-SA Compatible License.
|
||||
|
||||
2. You must include the text of, or the URI or hyperlink to, the Adapter's License You apply. You may satisfy this condition in any reasonable manner based on the medium, means, and context in which You Share Adapted Material.
|
||||
|
||||
3. You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, Adapted Material that restrict exercise of the rights granted under the Adapter's License You apply.
|
||||
|
||||
### Section 4 – Sui Generis Database Rights.
|
||||
|
||||
Where the Licensed Rights include Sui Generis Database Rights that apply to Your use of the Licensed Material:
|
||||
|
||||
a. for the avoidance of doubt, Section 2(a)(1) grants You the right to extract, reuse, reproduce, and Share all or a substantial portion of the contents of the database;
|
||||
|
||||
b. if You include all or a substantial portion of the database contents in a database in which You have Sui Generis Database Rights, then the database in which You have Sui Generis Database Rights (but not its individual contents) is Adapted Material, including for purposes of Section 3(b); and
|
||||
|
||||
c. You must comply with the conditions in Section 3(a) if You Share all or a substantial portion of the contents of the database.
|
||||
|
||||
For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this Public License where the Licensed Rights include other Copyright and Similar Rights.
|
||||
|
||||
### Section 5 – Disclaimer of Warranties and Limitation of Liability.
|
||||
|
||||
a. __Unless otherwise separately undertaken by the Licensor, to the extent possible, the Licensor offers the Licensed Material as-is and as-available, and makes no representations or warranties of any kind concerning the Licensed Material, whether express, implied, statutory, or other. This includes, without limitation, warranties of title, merchantability, fitness for a particular purpose, non-infringement, absence of latent or other defects, accuracy, or the presence or absence of errors, whether or not known or discoverable. Where disclaimers of warranties are not allowed in full or in part, this disclaimer may not apply to You.__
|
||||
|
||||
b. __To the extent possible, in no event will the Licensor be liable to You on any legal theory (including, without limitation, negligence) or otherwise for any direct, special, indirect, incidental, consequential, punitive, exemplary, or other losses, costs, expenses, or damages arising out of this Public License or use of the Licensed Material, even if the Licensor has been advised of the possibility of such losses, costs, expenses, or damages. Where a limitation of liability is not allowed in full or in part, this limitation may not apply to You.__
|
||||
|
||||
c. The disclaimer of warranties and limitation of liability provided above shall be interpreted in a manner that, to the extent possible, most closely approximates an absolute disclaimer and waiver of all liability.
|
||||
|
||||
### Section 6 – Term and Termination.
|
||||
|
||||
a. This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if You fail to comply with this Public License, then Your rights under this Public License terminate automatically.
|
||||
|
||||
b. Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates:
|
||||
|
||||
1. automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery of the violation; or
|
||||
|
||||
2. upon express reinstatement by the Licensor.
|
||||
|
||||
For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies for Your violations of this Public License.
|
||||
|
||||
c. For the avoidance of doubt, the Licensor may also offer the Licensed Material under separate terms or conditions or stop distributing the Licensed Material at any time; however, doing so will not terminate this Public License.
|
||||
|
||||
d. Sections 1, 5, 6, 7, and 8 survive termination of this Public License.
|
||||
|
||||
### Section 7 – Other Terms and Conditions.
|
||||
|
||||
a. The Licensor shall not be bound by any additional or different terms or conditions communicated by You unless expressly agreed.
|
||||
|
||||
b. Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are separate from and independent of the terms and conditions of this Public License.
|
||||
|
||||
### Section 8 – Interpretation.
|
||||
|
||||
a. For the avoidance of doubt, this Public License does not, and shall not be interpreted to, reduce, limit, restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without permission under this Public License.
|
||||
|
||||
b. To the extent possible, if any provision of this Public License is deemed unenforceable, it shall be automatically reformed to the minimum extent necessary to make it enforceable. If the provision cannot be reformed, it shall be severed from this Public License without affecting the enforceability of the remaining terms and conditions.
|
||||
|
||||
c. No term or condition of this Public License will be waived and no failure to comply consented to unless expressly agreed to by the Licensor.
|
||||
|
||||
d. Nothing in this Public License constitutes or may be interpreted as a limitation upon, or waiver of, any privileges and immunities that apply to the Licensor or You, including from the legal processes of any jurisdiction or authority.
|
||||
|
||||
> Creative Commons is not a party to its public licenses. Notwithstanding, Creative Commons may elect to apply one of its public licenses to material it publishes and in those instances will be considered the “Licensor.” The text of the Creative Commons public licenses is dedicated to the public domain under the [CC0 Public Domain Dedication](https://creativecommons.org/publicdomain/zero/1.0/legalcode). Except for the limited purpose of indicating that material is shared under a Creative Commons public license or as otherwise permitted by the Creative Commons policies published at [creativecommons.org/policies](http://creativecommons.org/policies), Creative Commons does not authorize the use of the trademark “Creative Commons” or any other trademark or logo of Creative Commons without its prior written consent including, without limitation, in connection with any unauthorized modifications to any of its public licenses or any other arrangements, understandings, or agreements concerning use of licensed material. For the avoidance of doubt, this paragraph does not form part of the public licenses.
|
||||
>
|
||||
> Creative Commons may be contacted at creativecommons.org.
|
||||
11
README.md
11
README.md
|
|
@ -1,3 +1,8 @@
|
|||
# pages
|
||||
|
||||
ocoge.club pages
|
||||
# ocogeclub pages
|
||||
|
||||
|
||||
|
||||
このリポジトリは『Git:おこげ俱楽部』にホストされ、『[おこげ俱楽部](https://ocoge.club)』に自動デプロイされています。
|
||||
|
||||
## Licence
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="クリエイティブ・コモンズ・ライセンス" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br />このリポジトリに含まれる全てのオリジナルデータは <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">クリエイティブ・コモンズ 表示 - 継承 4.0 国際ライセンス</a>の下に提供されています。
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>『情報コース』もっとくわしく編 | おこげ俱楽部</title>
|
||||
<meta name="title" content="『情報コース』もっとくわしく編 | おこげ俱楽部">
|
||||
<meta name="description" content="『情報コース』では Raspberry Pi やブロックプログラム開発環境『オコゲ』、センサやモータなどを使用して、楽しみながら ICT や IoT などの情報技術を学習します。">
|
||||
<meta name="keywords" content="ICT-Course,動画,オコゲ,blockly,プログラミング,上野学習塾">
|
||||
<meta name="author" content="ocogeclub">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://ocoge.club/2022-04-27_ict-motto/">
|
||||
<link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png">
|
||||
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
|
||||
<script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="/assets/floatbox/floatbox.css" />
|
||||
<script src="/assets/floatbox/floatbox.js" defer></script>
|
||||
<link rel="stylesheet" href="/assets/css/ocmain.css">
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/footer.css">
|
||||
<link rel="stylesheet" href="/assets/css/post.css">
|
||||
<meta property="og:image" content="https://ocoge.club/assets/img/ogp_tama-graphig.webp">
|
||||
<meta property="og:title" content="『情報コース』もっとくわしく編 | おこげ俱楽部">
|
||||
<meta property="og:description" content="『情報コース』では Raspberry Pi やブロックプログラム開発環境『オコゲ』、センサやモータなどを使用して、楽しみながら ICT や IoT などの情報技術を学習します。">
|
||||
<meta property="og:url" content="https://ocoge.club/2022-04-27_ict-motto/">
|
||||
<meta property="og:site_name" content="おこげ俱楽部">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@ocogeclub">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col h-screen bg-white text-gray-800 break-words">
|
||||
<header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500">
|
||||
<div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between">
|
||||
<div class="sm:mr-8">
|
||||
<a class="flex items-center" href="/">
|
||||
<span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span>
|
||||
</a>
|
||||
</div>
|
||||
<nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0">
|
||||
|
||||
<a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a>
|
||||
|
||||
<a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a>
|
||||
|
||||
<a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud/Mail</a>
|
||||
|
||||
<a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a>
|
||||
|
||||
</nav>
|
||||
<form id="search" action="/search" class="order-last sm:order-none flex-grow items-center justify-end hidden sm:block mt-6 sm:mt-0">
|
||||
<label class="visually-hidden" for="header-searchbox">記事タイトル/概要を検索 ...</label>
|
||||
<input type="text" id="header-searchbox" name="q" placeholder="記事タイトル/概要を検索 ..." class="w-full sm:max-w-xs bg-gray-200 border border-transparent float-right focus:bg-white focus:border-gray-300 focus:outline-none h-8 p-4 placeholder-gray-500 rounded text-gray-700 text-sm">
|
||||
</form>
|
||||
<div id="menu-toggle" class="flex items-center md:hidden text-gray-700 hover:text-teal-600 cursor-pointer sm:ml-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-7 lg:mx-6 mt-32 flex-grow">
|
||||
|
||||
|
||||
<article class="max-w-5xl mx-auto">
|
||||
<header class="mb-14">
|
||||
<h1 class="text-3xl text-center font-bold leading-normal text-gray-900 mt-0 mb-3">『情報コース』もっとくわしく編</h1>
|
||||
<div class="text-center"><i class="fa-regular fa-clock"></i> 2022年4月27日</div>
|
||||
|
||||
<div class="mt-3 text-center">
|
||||
|
||||
<a href="/tags/ICT-Course" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#ICT-Course</a>
|
||||
|
||||
<a href="/tags/動画" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#動画</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-10 -mx-7 md:mx-0">
|
||||
<img class="w-full max-w-2xl mx-auto" src="/assets/img/ogp_tama-graphig.webp" alt="This post thumbnail">
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div id="content" class="prose text-gray-800 max-w-none">
|
||||
<p>『情報コース』では、シングルボードコンピュータ『Raspberry Pi』や独自仕様のブロックプログラミング開発・実行環境『オコゲ』、各種センサやモータなどを使用してプログラミングを楽しく学び、ICT (Information and Communication Technology – 情報通信技術) や IoT (Internet of Things – モノのインターネット) などの情報技術を習得することを目的としています。</p>
|
||||
<h2>Raspberry Pi シングルボードコンピュータ</h2>
|
||||
<figure style="max-width: 400px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/raspi.webp" title="Raspberry Pi と きなこもち"><img loading="lazy" src="/assets/img/raspi.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p><a href="https://ja.wikipedia.org/wiki/Raspberry_Pi" target="_new" title="Wikipedia">Raspberry Pi <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> は、イギリスの<a href="https://www.raspberrypi.org/" target="_new" title="Raspberry Pi Foundation">ラズベリーパイ財団 <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>によって主に教育で利用することを想定して開発された<a href="https://ja.wikipedia.org/wiki/%E3%82%B7%E3%83%B3%E3%82%B0%E3%83%AB%E3%83%9C%E3%83%BC%E3%83%89%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF" target="_new" title="Wikipedia">シングルボードコンピュータ <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>です。小型・軽量で低価格、性能は価格なりですが、OS (基本ソフト) に Linux (Debian) を採用し、モニタとキーボード、マウスを接続してデスクトップを備えた GUI が使える、れっきとしたパーソナルコンピューターです。モニタは HDMI 入力のあるテレビでも代用でき、導入コストが低いのが特徴です。PC と大きく異なる点は <a href="https://ja.wikipedia.org/wiki/GPIO" target="_new" title="Wikipedia">GPIO <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> ( General-purpose input/output – 汎用入出力) 端子の存在で、ここに各種センサやモータなどを接続して数値を読み 取ったり制御したりすることができます。つまり、コンピュータが物理的に「感じ」たり、「動い」たりすることができるのです。</p>
|
||||
<h2>ブロックプログラミング開発・実行環境『オコゲ』</h2>
|
||||
<figure style="max-width: 400px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/ocoge.webp" title="『オコゲ』デフォルトスクリーン"><img loading="lazy" src="/assets/img/ocoge.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>『オコゲ』は、<a href="https://developers.google.com/blockly" target="_new" title="A JavaScript library for building visual programming editors.">Google Blockly <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> ライブラリを使用した、Raspberry Pi 用ブロックプログラミング環境です。</p>
|
||||
<p>ブロックプログラミング (Block-Based Coding) は、コンピュータへの命令が記述されたブロックを並べたり積み重ねることでプログラムを作成するプログラミングの形式で、主にプログラミング学習の目的で使用されています。学生がプログラム言語を覚えたりタイピングを習得する苦労やストレスから解放され、プログラミングの概念そのものを学習することに専念できるからです。また、何ができるかが一目でわかり簡単に試してみることができ、子供（大人でも！）の創造性を強く刺激します。</p>
|
||||
<p>ブロックプログラミングツールの最も有名なもののひとつに <a href="https://scratch.mit.edu/" target="_new" title="物語や、ゲーム、アニメーションを作ろう 世界中のみんなと共有しよう">Scratch <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> があります。<a href="https://ja.scratch-wiki.info/wiki/Scratch%E3%82%AD%E3%83%A3%E3%83%83%E3%83%88" target="_new" title="Wikipedia">『スクラッチの猫ちゃん』(Scratch cat) <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> を見たことがあるかもしれません。その Scratch も、バージョン２までは Macromedia (Adobe) Flash で作られていましたが、最新のバージョン３では Google Blockly ベースになりました。ブロックプログラミングツールのもうひとつの代表格 <a href="https://www.microsoft.com/ja-jp/makecode" target="_new" title="プログラミング教育のハンズオン">Microsoft MakeCode <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> も Blockly を元にしています。</p>
|
||||
<h2>Raspberry Pi + オコゲ = ?</h2>
|
||||
<p>では、Raspberry Pi と『オコゲ』を組み合わせると何ができるのでしょうか。その一部を動画でご紹介します。</p>
|
||||
<div class="iconbox">
|
||||
<span class="box-title"><i class="fa-solid fa-circle-exclamation"></i></span>
|
||||
<p>
|
||||
※動画ではブロックの色や形状などの『オコゲ』の見た目や周辺機器が最近更新された記事と異なりますが、機能や内容に変更はありません。
|
||||
</p>
|
||||
</div>
|
||||
<h3>デモンストレーション</h3>
|
||||
<figure class="youtube"><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/Q8CCj9NnLHM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<figcaption>
|
||||
</figcaption></figure>
|
||||
<p>『情報コース』で使用する機材の一部を使用した動作サンプルです。</p>
|
||||
<ul>
|
||||
<li>『Julius』との連携による音声認識</li>
|
||||
<li>サーボモータ制御</li>
|
||||
<li>Lチカ</li>
|
||||
<li>温湿度センサー</li>
|
||||
<li>赤外線LEDによるリモコン（キーボードに乗っけてあるミニライト）</li>
|
||||
<li>接触が悪くてLEDが発光しなかったカメラ</li>
|
||||
<li>画像ファイルのロードと表示</li>
|
||||
</ul>
|
||||
<h3>飲み過ぎ防止システム</h3>
|
||||
<figure class="youtube"><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/CQ3bTddq_-E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<figcaption>
|
||||
</figcaption></figure>
|
||||
<p>IoT のとってもくだらない例。２杯目からもうコンピュータに怒られる。</p>
|
||||
<h3>スマートスイッチ</h3>
|
||||
<figure class="youtube"><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/OdciAgMR5bA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<figcaption>
|
||||
</figcaption></figure>
|
||||
<p>Raspberry Pi につないだサーボモータで物理的に照明のスイッチをオンオフします。操作は『オコゲ』を通じて音声で行います。ちょっと強力な両面テープと結束バンドだけでできる工事いらずのスマートホームです。</p>
|
||||
<h3>顔認識</h3>
|
||||
<figure class="youtube"><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/vasLwxYlqco" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<figcaption>
|
||||
</figcaption></figure>
|
||||
<p>カメラモジュールの映像をリアルタイムで処理してヒトの顔を認識し、その座標情報を使用してペーパークラフト人形の顔の向きを制御しています。動画ではちょっとわかりにくいかもしれませんが、お人形がずっとこちらを見続けていますヨー。</p>
|
||||
<h3>ネットワーク</h3>
|
||||
<figure class="youtube"><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/87JHKVDVQpI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<figcaption>
|
||||
</figcaption></figure>
|
||||
<p>ネットワークにつながるだけでプログラミングのアイディアは大きく広がります。例えば２つ上の「スマートスイッチ」は音声でコントロールしていますが、これをネットワークにつなげれば、出先や離れからスマートフォンなどを通じて照明のオンオフができるようになるでしょう。
|
||||
『オコゲ』は簡単にウェブサーバとそれにアクセスするためのクライアントを作ることができます。動画では、音声合成LSI「<a href="https://www.a-quest.com/products/aquestalkpicolsi.html" target="_new" title="ゆっくり">AquesTalk pico <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>」を接続したサーバ側 Raspberry Pi に、ミニディスプレイをつないだクライアント側 Raspberry Pi から LAN 経由で HTTP 接続をして朝のあいさつや「吾輩は猫である」の朗読をさせています。</p>
|
||||
<h3>ウェブチャット</h3>
|
||||
<figure class="youtube"><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/0YVbnBv4CmU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<figcaption>
|
||||
</figcaption></figure>
|
||||
<p>用途が限定された特殊ブロックもあります。この例では、WebRTC（ウェブブラウザ上でシンプルなリアルタイムコミュニケーションを実現する技術）を使用してテキストベースのウェブチャットを実装しています。</p>
|
||||
<h3>ゲーム制作</h3>
|
||||
<figure class="youtube"><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/Xb3O9ttwyx8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<figcaption>
|
||||
</figcaption></figure>
|
||||
<p>テレビゲームっぽいものも作れます。</p>
|
||||
<h2>『オコゲ』にさわってみよう</h2>
|
||||
<p>ここまでご覧になって「おもしろそう！」と思った方は、ぜひ当学習塾に… の前に、Web 体験版を触ってみましょう。サンプルプログラムや、自分で考えてサンプルを改良するプチレッスンをご用意しております。</p>
|
||||
<div class="card"><article class="blogcard"><h4 class="blogcard__heading"><a class="blogcard__link" href="/2022-05-07_demo/">『オコゲ』Web 体験版 | おこげ俱楽部</a></h4><img loading="lazy" class="blogcard__image" src="/assets/img/raspberrycake_ogp.webp"><p class="blogcard__description">ブロックプログラミングを体験してみましょう。ハードウェアなどの制限から、Web体験版ではできないこともありますが、感触を確かめることはできます。</p><div class="blogcard__meta"><img loading="lazy" class="blogcard__logo" src="/assets/img/favicon.png"><span class="blogcard__publisher">おこげ俱楽部</span></div></article></div>
|
||||
</div>
|
||||
|
||||
<div class="mt-10">
|
||||
|
||||
<div class="italic text-gray-700">Disqus comments only available for production</div>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</main>
|
||||
<footer class="mt-20 px-10 py-8 bg-gray-200">
|
||||
<div id="footer-badge"><a href="https://git.ocoge.club/" target=_new><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target=_new><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div>
|
||||
<div class="max-w-5xl mx-auto text-gray-700 text-center">
|
||||
© 2023 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>.
|
||||
Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a>
|
||||
using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/assets/js/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', (event) => {
|
||||
document.getElementsByTagName('html')[0].style.display='block';
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>ブロックプログラミング環境『オコゲ』 | おこげ俱楽部</title>
|
||||
<meta name="title" content="ブロックプログラミング環境『オコゲ』 | おこげ俱楽部">
|
||||
<meta name="description" content="『オコゲ』は、Google Blockly ライブラリを使用して作られた、Raspberry Pi 向けブロックプログラミング環境です。">
|
||||
<meta name="keywords" content="オコゲ,オコゲ,blockly,プログラミング,上野学習塾">
|
||||
<meta name="author" content="ocogeclub">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://ocoge.club/2022-05-01_ocoge-about/">
|
||||
<link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png">
|
||||
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
|
||||
<script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="/assets/floatbox/floatbox.css" />
|
||||
<script src="/assets/floatbox/floatbox.js" defer></script>
|
||||
<link rel="stylesheet" href="/assets/css/ocmain.css">
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/footer.css">
|
||||
<link rel="stylesheet" href="/assets/css/post.css">
|
||||
<meta property="og:image" content="https://ocoge.club/assets/img/ogp_ocoge.webp">
|
||||
<meta property="og:title" content="ブロックプログラミング環境『オコゲ』 | おこげ俱楽部">
|
||||
<meta property="og:description" content="『オコゲ』は、Google Blockly ライブラリを使用して作られた、Raspberry Pi 向けブロックプログラミング環境です。">
|
||||
<meta property="og:url" content="https://ocoge.club/2022-05-01_ocoge-about/">
|
||||
<meta property="og:site_name" content="おこげ俱楽部">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@ocogeclub">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col h-screen bg-white text-gray-800 break-words">
|
||||
<header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500">
|
||||
<div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between">
|
||||
<div class="sm:mr-8">
|
||||
<a class="flex items-center" href="/">
|
||||
<span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span>
|
||||
</a>
|
||||
</div>
|
||||
<nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0">
|
||||
|
||||
<a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a>
|
||||
|
||||
<a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a>
|
||||
|
||||
<a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud/Mail</a>
|
||||
|
||||
<a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a>
|
||||
|
||||
</nav>
|
||||
<form id="search" action="/search" class="order-last sm:order-none flex-grow items-center justify-end hidden sm:block mt-6 sm:mt-0">
|
||||
<label class="visually-hidden" for="header-searchbox">記事タイトル/概要を検索 ...</label>
|
||||
<input type="text" id="header-searchbox" name="q" placeholder="記事タイトル/概要を検索 ..." class="w-full sm:max-w-xs bg-gray-200 border border-transparent float-right focus:bg-white focus:border-gray-300 focus:outline-none h-8 p-4 placeholder-gray-500 rounded text-gray-700 text-sm">
|
||||
</form>
|
||||
<div id="menu-toggle" class="flex items-center md:hidden text-gray-700 hover:text-teal-600 cursor-pointer sm:ml-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-7 lg:mx-6 mt-32 flex-grow">
|
||||
|
||||
|
||||
<article class="max-w-5xl mx-auto">
|
||||
<header class="mb-14">
|
||||
<h1 class="text-3xl text-center font-bold leading-normal text-gray-900 mt-0 mb-3">ブロックプログラミング環境『オコゲ』</h1>
|
||||
<div class="text-center"><i class="fa-regular fa-clock"></i> 2022年5月1日</div>
|
||||
|
||||
<div class="mt-3 text-center">
|
||||
|
||||
<a href="/tags/オコゲ" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#オコゲ</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-10 -mx-7 md:mx-0">
|
||||
<img class="w-full max-w-2xl mx-auto" src="/assets/img/ogp_ocoge.webp" alt="This post thumbnail">
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div id="content" class="prose text-gray-800 max-w-none">
|
||||
<p>『オコゲ [ocoge: code generator]』は、 <a href="https://developers.google.com/blockly" target="_new" title="A JavaScript library for building visual programming editors."> <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> Google Blockly ライブラリを使用した、Raspberry Pi 用ブロックプログラミング環境です。 プログラム言語を覚える必要がなく、未経験の方でもすぐにプログラミングの楽しさを体験することができます。</p>
|
||||
<h2>デモンストレーション</h2>
|
||||
<div class="card"><article class="blogcard"><h4 class="blogcard__heading"><a class="blogcard__link" href="/2022-05-07_demo/">『オコゲ』Web 体験版 | おこげ俱楽部</a></h4><img loading="lazy" class="blogcard__image" src="/assets/img/raspberrycake_ogp.webp"><p class="blogcard__description">ブロックプログラミングを体験してみましょう。ハードウェアなどの制限から、Web体験版ではできないこともありますが、感触を確かめることはできます。</p><div class="blogcard__meta"><img loading="lazy" class="blogcard__logo" src="/assets/img/favicon.png"><span class="blogcard__publisher">おこげ俱楽部</span></div></article></div>
|
||||
<h2>機能と特徴</h2>
|
||||
<ul>
|
||||
<li>Google Blockly を用いたブロックプログラミングによる開発・実行環境<br>
|
||||
特別な機能を持ったブロックをつなげていくだけでプログラムを組み立てることができます。プログラム言語を覚える必要がないため、アルゴリズム（処理の手順）を考えることに集中できます。また、作成したプログラムは『オコゲ』上ですぐに実行することができます。</li>
|
||||
<li>GPIO 入出力<br>
|
||||
Raspberry Pi の GPIO（汎用入出力端子）に接続したセンサや LED、サーボモータなどを操作するプログラムを作成・実行できます。</li>
|
||||
<li>Javascript コードジェネレータ<br>
|
||||
ブロックで作成したプログラムを Javascript 言語で出力・閲覧することができます。次のステップ（コードによるプログラミング）に進むための足がかりになります。</li>
|
||||
</ul>
|
||||
<h2>その他技術情報</h2>
|
||||
<ul>
|
||||
<li><a href="https://nodejs.org/" target="_new" title="">Node.js <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> + <a href="https://www.electronjs.org/" target="_new" title="">Electron <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> によりデスクトップアプリケーションとして動作</li>
|
||||
<li>GPIO ライブラリには <a href="http://abyz.me.uk/rpi/pigpio/pigpiod.html" target="_new" title="">pigpiod <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> を使用し、<a href="https://git.ocoge.club/ocoge.club/ocoge/src/branch/master/local_modules/@ocoge.club/pigpio" target="_new" title="">自作ネイティブモジュール <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>により『オコゲ』から直接 GPIO へのアクセスが可能。</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-10">
|
||||
|
||||
<div class="italic text-gray-700">Disqus comments only available for production</div>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</main>
|
||||
<footer class="mt-20 px-10 py-8 bg-gray-200">
|
||||
<div id="footer-badge"><a href="https://git.ocoge.club/" target=_new><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target=_new><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div>
|
||||
<div class="max-w-5xl mx-auto text-gray-700 text-center">
|
||||
© 2023 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>.
|
||||
Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a>
|
||||
using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/assets/js/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', (event) => {
|
||||
document.getElementsByTagName('html')[0].style.display='block';
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>『オコゲ』Web 体験版 | おこげ俱楽部</title>
|
||||
<meta name="title" content="『オコゲ』Web 体験版 | おこげ俱楽部">
|
||||
<meta name="description" content="ブロックプログラミングを体験してみましょう。ハードウェアなどの制限から、Web体験版ではできないこともありますが、感触を確かめることはできます。">
|
||||
<meta name="keywords" content="ICT-Course,オコゲ,動画,オコゲ,blockly,プログラミング,上野学習塾">
|
||||
<meta name="author" content="ocogeclub">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://ocoge.club/2022-05-07_demo/">
|
||||
<link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png">
|
||||
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
|
||||
<script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="/assets/floatbox/floatbox.css" />
|
||||
<script src="/assets/floatbox/floatbox.js" defer></script>
|
||||
<link rel="stylesheet" href="/assets/css/ocmain.css">
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/footer.css">
|
||||
<link rel="stylesheet" href="/assets/css/post.css">
|
||||
<meta property="og:image" content="https://ocoge.club/assets/img/raspberrycake_ogp.webp">
|
||||
<meta property="og:title" content="『オコゲ』Web 体験版 | おこげ俱楽部">
|
||||
<meta property="og:description" content="ブロックプログラミングを体験してみましょう。ハードウェアなどの制限から、Web体験版ではできないこともありますが、感触を確かめることはできます。">
|
||||
<meta property="og:url" content="https://ocoge.club/2022-05-07_demo/">
|
||||
<meta property="og:site_name" content="おこげ俱楽部">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@ocogeclub">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col h-screen bg-white text-gray-800 break-words">
|
||||
<header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500">
|
||||
<div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between">
|
||||
<div class="sm:mr-8">
|
||||
<a class="flex items-center" href="/">
|
||||
<span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span>
|
||||
</a>
|
||||
</div>
|
||||
<nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0">
|
||||
|
||||
<a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a>
|
||||
|
||||
<a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a>
|
||||
|
||||
<a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud/Mail</a>
|
||||
|
||||
<a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a>
|
||||
|
||||
</nav>
|
||||
<form id="search" action="/search" class="order-last sm:order-none flex-grow items-center justify-end hidden sm:block mt-6 sm:mt-0">
|
||||
<label class="visually-hidden" for="header-searchbox">記事タイトル/概要を検索 ...</label>
|
||||
<input type="text" id="header-searchbox" name="q" placeholder="記事タイトル/概要を検索 ..." class="w-full sm:max-w-xs bg-gray-200 border border-transparent float-right focus:bg-white focus:border-gray-300 focus:outline-none h-8 p-4 placeholder-gray-500 rounded text-gray-700 text-sm">
|
||||
</form>
|
||||
<div id="menu-toggle" class="flex items-center md:hidden text-gray-700 hover:text-teal-600 cursor-pointer sm:ml-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-7 lg:mx-6 mt-32 flex-grow">
|
||||
|
||||
|
||||
<article class="max-w-5xl mx-auto">
|
||||
<header class="mb-14">
|
||||
<h1 class="text-3xl text-center font-bold leading-normal text-gray-900 mt-0 mb-3">『オコゲ』Web 体験版</h1>
|
||||
<div class="text-center"><i class="fa-regular fa-clock"></i> 2022年5月7日</div>
|
||||
|
||||
<div class="mt-3 text-center">
|
||||
|
||||
<a href="/tags/ICT-Course" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#ICT-Course</a>
|
||||
|
||||
<a href="/tags/オコゲ" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#オコゲ</a>
|
||||
|
||||
<a href="/tags/動画" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#動画</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-10 -mx-7 md:mx-0">
|
||||
<img class="w-full max-w-2xl mx-auto" src="/assets/img/raspberrycake_ogp.webp" alt="This post thumbnail">
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div id="content" class="prose text-gray-800 max-w-none">
|
||||
<div class="iconbox">
|
||||
<span class="box-title"><i class="fa-solid fa-circle-exclamation"></i></span>
|
||||
<p>
|
||||
※ Web 体験版は Google Chrome (Chromium) 推奨です。それ以外のブラウザをご使用の場合、表示が乱れたり、機能の一部が使用できないことがあります。
|
||||
※ レンダリングエンジンに Blink (Chromium) を使用しているブラウザは使えます。例えば、Microsoft Edge（バージョン79.0.309.65以降）、Yandex Browser（日本じゃ誰も使ってないだろうけど）などです。
|
||||
</p>
|
||||
</div>
|
||||
<p>ブロックプログラミングを体験してみましょう。ハードウェアなどの制限から、Web体験版ではできないこともありますが、感触を確かめることはできます。下の方にあるサンプルプログラムを組んで試してみてください。それが済んだら「プチレッスン」にも挑戦してみましょう。</p>
|
||||
<p>404</p>
|
||||
<h2>各部の名称と使い方</h2>
|
||||
<figure style="max-width: 400px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/partsnames.webp" title="『オコゲ』各部名称"><img loading="lazy" src="/assets/img/partsnames.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
<ol>
|
||||
<li>コーディング<br>
|
||||
ツールボックスのカテゴリをクリックするとフライアウトが開きます。フライアウト上のブロックをドラッグしてワークスペースに配置します。<br>
|
||||
ワークスペース上に配置したブロックは、ドラッグで移動できます。基本的にはつまんだブロックは上のブロックと切り離され、その下のブロックとはつながったまま移動します。つまんだブロックだけを取り出したい場合はキーボードの Ctrl キーを押しながらドラッグします。<br>
|
||||
つまんだブロックは、ツールボックスかゴミ箱の上にドロップすると削除することができます。</li>
|
||||
<li>プログラムの実行<br>
|
||||
「実行」メニューボタンをクリックします。</li>
|
||||
<li>実行停止（リロード）<br>
|
||||
自動的に実行が停止しないコードや画面上にエレメントを表示するようなプログラムの場合、「リロード」メニューボタン <span style="color: #00bfff" class="text-color"><i class="fas fa-redo-alt"></i></span> をクリックすることでアプリケーションをリセットすることができます。ワークスペース上にあるブロックはそのまま残ります。</li>
|
||||
<li>ワークスペース保存<br>
|
||||
「保存」メニューボタンをクリックすると、XMLファイルがダウンロードされますのでローカルに保存してください。</li>
|
||||
<li>ワークスペース読込<br>
|
||||
「開く」メニューボタンをクリックすると、ファイル選択ダイアログが開くので、ワークスペースを保存した XML ファイルを選択してください。</li>
|
||||
<li>ワークスペースをクリア<br>
|
||||
「新規」メニューボタンをクリックすると、ワークスペース上のブロックが全て消去されます。</li>
|
||||
<li>Javascript コードを見る<br>
|
||||
「CODE」メニューボタンをクリックします。</li>
|
||||
</ol>
|
||||
<figure class="youtube"><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/NXapl_gtN0A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<figcaption>
|
||||
</figcaption></figure>
|
||||
<h2>サンプルプログラム</h2>
|
||||
<p>Web体験版で作成・実行できるプログラムをいくつかご紹介します。ブロックプログラムの画像を見ながら、同じように組み立ててみてください。できたら、画面右上にある「実行」ボタンをおしてみましょう。</p>
|
||||
<h3>簡単な入出力</h3>
|
||||
<figure style="max-width: 400px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/askanswer.webp" title=""><img loading="lazy" src="/assets/img/askanswer.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>名前を入力するとその名前を呼んでくれるプログラムです。<br>
|
||||
実行すると入力欄が表示されるので、名前を入力してエンターキーを押すかチェックボタン <span style="color: #9999ff" class="text-color"><i class="fas fa-check-circle"></i></span> をクリックしてください。</p>
|
||||
<h3>タイプライターもどき</h3>
|
||||
<figure style="max-width: 400px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/typewriter.webp" title=""><img loading="lazy" src="/assets/img/typewriter.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>「黒板」を表示し、アルファベットを1行に1文字ずつタイプできます。エンターキーやバックスペースキー、矢印キーなどの特殊キーを押してみると…？<br>
|
||||
※特殊キーを試す前に、ワークスペース上の何もない所をクリックしてブロックからフォーカス（ブロックが枠で囲まれて選択された状態）を外しておいてください。バックスペースを押したときにフォーカスされたブロックがあると削除されてしまうためです。</p>
|
||||
<p>「プチレッスン」に、もっとタイプライターらしくする課題「タイプライターっぽいもの」を作成しました。</p>
|
||||
<h2>プチレッスン</h2>
|
||||
<p>『オコゲ』Web 体験版を使用して、問題形式でプログラミング学習を体験することができるレッスンをご用意しております。（準備中）</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-10">
|
||||
|
||||
<div class="italic text-gray-700">Disqus comments only available for production</div>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</main>
|
||||
<footer class="mt-20 px-10 py-8 bg-gray-200">
|
||||
<div id="footer-badge"><a href="https://git.ocoge.club/" target=_new><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target=_new><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div>
|
||||
<div class="max-w-5xl mx-auto text-gray-700 text-center">
|
||||
© 2023 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>.
|
||||
Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a>
|
||||
using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/assets/js/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', (event) => {
|
||||
document.getElementsByTagName('html')[0].style.display='block';
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,248 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>おこげ倶楽部自宅サーバについて | おこげ俱楽部</title>
|
||||
<meta name="title" content="おこげ倶楽部自宅サーバについて | おこげ俱楽部">
|
||||
<meta name="description" content="ocoge.club は Orange Pi 自宅サーバにてホスティングされています。Webサーバ、メールサーバ、Git サーバ稼働中。">
|
||||
<meta name="keywords" content="技術情報,オコゲ,blockly,プログラミング,上野学習塾">
|
||||
<meta name="author" content="ocogeclub">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://ocoge.club/2022-05-08_server copy/">
|
||||
<link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png">
|
||||
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
|
||||
<script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="/assets/floatbox/floatbox.css" />
|
||||
<script src="/assets/floatbox/floatbox.js" defer></script>
|
||||
<link rel="stylesheet" href="/assets/css/ocmain.css">
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/footer.css">
|
||||
<link rel="stylesheet" href="/assets/css/post.css">
|
||||
<meta property="og:image" content="https://ocoge.club/assets/img/opi-server.webp">
|
||||
<meta property="og:title" content="おこげ倶楽部自宅サーバについて | おこげ俱楽部">
|
||||
<meta property="og:description" content="ocoge.club は Orange Pi 自宅サーバにてホスティングされています。Webサーバ、メールサーバ、Git サーバ稼働中。">
|
||||
<meta property="og:url" content="https://ocoge.club/2022-05-08_server copy/">
|
||||
<meta property="og:site_name" content="おこげ俱楽部">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@ocogeclub">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col h-screen bg-white text-gray-800 break-words">
|
||||
<header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500">
|
||||
<div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between">
|
||||
<div class="sm:mr-8">
|
||||
<a class="flex items-center" href="/">
|
||||
<span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span>
|
||||
</a>
|
||||
</div>
|
||||
<nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0">
|
||||
|
||||
<a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a>
|
||||
|
||||
<a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a>
|
||||
|
||||
<a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud/Mail</a>
|
||||
|
||||
<a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a>
|
||||
|
||||
</nav>
|
||||
<form id="search" action="/search" class="order-last sm:order-none flex-grow items-center justify-end hidden sm:block mt-6 sm:mt-0">
|
||||
<label class="visually-hidden" for="header-searchbox">記事タイトル/概要を検索 ...</label>
|
||||
<input type="text" id="header-searchbox" name="q" placeholder="記事タイトル/概要を検索 ..." class="w-full sm:max-w-xs bg-gray-200 border border-transparent float-right focus:bg-white focus:border-gray-300 focus:outline-none h-8 p-4 placeholder-gray-500 rounded text-gray-700 text-sm">
|
||||
</form>
|
||||
<div id="menu-toggle" class="flex items-center md:hidden text-gray-700 hover:text-teal-600 cursor-pointer sm:ml-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-7 lg:mx-6 mt-32 flex-grow">
|
||||
|
||||
|
||||
<article class="max-w-5xl mx-auto">
|
||||
<header class="mb-14">
|
||||
<h1 class="text-3xl text-center font-bold leading-normal text-gray-900 mt-0 mb-3">おこげ倶楽部自宅サーバについて</h1>
|
||||
<div class="text-center"><i class="fa-regular fa-clock"></i> 2022年5月7日</div>
|
||||
|
||||
<div class="mt-3 text-center">
|
||||
|
||||
<a href="/tags/技術情報" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#技術情報</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-10 -mx-7 md:mx-0">
|
||||
<img class="w-full max-w-2xl mx-auto" src="/assets/img/opi-server.webp" alt="This post thumbnail">
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div id="content" class="prose text-gray-800 max-w-none">
|
||||
<p>ocoge.club は Orange Pi 自宅サーバ（上写真）にてホスティングされています。現在 Webサーバ、メールサーバ、Git サーバが稼働しています。数千円で購入できる手のひらサイズのシングルボードコンピュータと3千円程度のSSDを使ってなかなか充実したネットサービスごっこwができます。</p>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p>タマちー</p>
|
||||
</div><div class="chatting">
|
||||
<div class="says">
|
||||
「おこげ俱楽部」は、軽量多目的 <s>Raspberry Pi</s> <a href="http://www.orangepi.org/" target="_new" title="Orange Pi">Orange Pi <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> サーバーとして絶賛改装中です...。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p>ミミィ</p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
市場でラズパイが枯渇している関係で、サーバのハードウェアを 4B(4GB) から、現状最も手に入りやすい中華<s>パチモン</s> <span title="シングルボードコンピュータ">SBC</span> の Orange Pi に変更したのよね！軽量化のために<span class="mfy"><a href="https://ja.wordpress.org" target="_new" title="シェア世界一の CMS">WordPress <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></span> をやめて <span class="mfg"><a href="https://jamstack.org" target="_new" title="ちょっと何言ってるか分からない">Jamstack <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></span> にするとかの対応中ヨ！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div> <div class="chatting">
|
||||
<div class="think-l-bal-s"></div>
|
||||
<div class="think-l-bal-l"></div>
|
||||
<div class="tamathink">
|
||||
<p>
|
||||
らずぱい売ってない... 困る...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
RSコンポーネンツの通販サイトに「11月入荷」とか書いてあるのよ！<br>
|
||||
鬼も笑えないわ！！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<h2>ハードウェア構成</h2>
|
||||
<ul>
|
||||
<li><a href="http://www.orangepi.org/Orange%20Pi%203%20LTS/index.html" target="_new" title="">Orange Pi 3 LTS <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></li>
|
||||
<li>Crucial SSD 120GB 2.5インチ (CT120BX500SSD1JP)</li>
|
||||
<li>Salcar USB-C 2.5インチ SATA HDD/SSDケース</li>
|
||||
</ul>
|
||||
<p>ケースは RPi 用を流用。ネジ穴が合わなかったので百均の耐震マットを小さく切って貼り付け。</p>
|
||||
<h2>ソフトウェア構成</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>種類</th>
|
||||
<th>名称</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>OS</td>
|
||||
<td><a href="http://www.orangepi.org/downloadresources/" target="_new" title="">Orange Pi3 LTS Debian Buster Server <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Webサーバ</td>
|
||||
<td><a href="https://nginx.org/en/" target="_new" title="">Nginx <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>サーバサイドインタプリタ</td>
|
||||
<td><a href="https://www.php.net/" target="_new" title="">PHP <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>データベース</td>
|
||||
<td><a href="https://www.sqlite.org/index.html" target="_new" title="">SQLite3 <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>メールサーバ (MTA)</td>
|
||||
<td><a href="http://www.postfix.org/" target="_new" title="">Postfix <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Webメールクライアント</td>
|
||||
<td><a href="https://www.rainloop.net/" target="_new" title="">Rainloop <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>POP/IMAP サーバ</td>
|
||||
<td><a href="https://www.dovecot.org/" target="_new" title="">Dovecot <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Git サーバ</td>
|
||||
<td><a href="https://gitea.io/" target="_new" title="">Gitea <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>このほか、スパムメール対策に <a href="https://spamassassin.apache.org/" target="_new" title="">SpamAssasin <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> であるとか証明書取得に <a href="https://letsencrypt.org/ja/" target="_new" title="">Let’s Encrypt (certbot) <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> であるとか</p>
|
||||
<h2>その他利用しているもの</h2>
|
||||
<p>独自ドメイン (ocoge.club)<br>
|
||||
<a href="https://www.mydns.jp/" target="_new" title="">MyDNS <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>（無料ダイナミックDNS）<br>
|
||||
インターネット接続回線（有線LANで接続）<br>
|
||||
静的サイトジェネレータ <a href="https://www.11ty.dev/" target="_new" title="">11ty <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> 及びブログテーマ <a href="https://github.com/dafiulh/vredeburg" target="_new" title="">Vredeburg <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></p>
|
||||
<h2>参考サイト</h2>
|
||||
<p><a href="https://samhobbs.co.uk/raspberry-pi-email-server" target="_new" title="">Sam Hobbs | Raspberry Pi Email Server <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a><br>
|
||||
英語でメールサーバのみの解説ではあるが、ステップごとにインストールや設定がうまくいっているかどうか確認を行うことができるようになっているため、長い作業の中でどこでミスをしたのか、または不具合が出ているのかがわかりやすい。また、設定をデフォルトから変更する箇所にそれぞれ設定の意味の説明があり、自分が何をしているのかがわかるため、ソフトウェアのアップデートで設定項目やその値に変更があり見本と齟齬が生じていても対処が容易である。わけもわからず言われた通り延々ソフトウェアのインストールと設定ファイルの書き換えを繰り返し、辟易しながら終わらせたものの結局動作せず問題のある個所も見当がつかないまま挫折、などという悲劇を起こしにくい、ナイスなサイト。</p>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says">
|
||||
WordPress と NextCloud の運用をやめた理由は実は別にあったりする...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
セキュリティアップデートが面倒だったのヨ！<br>
|
||||
仕事でもないのにあんなのやってられないワ！！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-10">
|
||||
|
||||
<div class="italic text-gray-700">Disqus comments only available for production</div>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</main>
|
||||
<footer class="mt-20 px-10 py-8 bg-gray-200">
|
||||
<div id="footer-badge"><a href="https://git.ocoge.club/" target=_new><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target=_new><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div>
|
||||
<div class="max-w-5xl mx-auto text-gray-700 text-center">
|
||||
© 2023 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>.
|
||||
Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a>
|
||||
using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/assets/js/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', (event) => {
|
||||
document.getElementsByTagName('html')[0].style.display='block';
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,248 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>おこげ倶楽部自宅サーバについて | おこげ俱楽部</title>
|
||||
<meta name="title" content="おこげ倶楽部自宅サーバについて | おこげ俱楽部">
|
||||
<meta name="description" content="ocoge.club は Orange Pi 自宅サーバにてホスティングされています。Webサーバ、メールサーバ、Git サーバ稼働中。">
|
||||
<meta name="keywords" content="技術情報,オコゲ,blockly,プログラミング,上野学習塾">
|
||||
<meta name="author" content="ocogeclub">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://ocoge.club/2022-05-08_server/">
|
||||
<link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png">
|
||||
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
|
||||
<script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="/assets/floatbox/floatbox.css" />
|
||||
<script src="/assets/floatbox/floatbox.js" defer></script>
|
||||
<link rel="stylesheet" href="/assets/css/ocmain.css">
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/footer.css">
|
||||
<link rel="stylesheet" href="/assets/css/post.css">
|
||||
<meta property="og:image" content="https://ocoge.club/assets/img/opi-server.webp">
|
||||
<meta property="og:title" content="おこげ倶楽部自宅サーバについて | おこげ俱楽部">
|
||||
<meta property="og:description" content="ocoge.club は Orange Pi 自宅サーバにてホスティングされています。Webサーバ、メールサーバ、Git サーバ稼働中。">
|
||||
<meta property="og:url" content="https://ocoge.club/2022-05-08_server/">
|
||||
<meta property="og:site_name" content="おこげ俱楽部">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@ocogeclub">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col h-screen bg-white text-gray-800 break-words">
|
||||
<header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500">
|
||||
<div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between">
|
||||
<div class="sm:mr-8">
|
||||
<a class="flex items-center" href="/">
|
||||
<span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span>
|
||||
</a>
|
||||
</div>
|
||||
<nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0">
|
||||
|
||||
<a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a>
|
||||
|
||||
<a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a>
|
||||
|
||||
<a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud/Mail</a>
|
||||
|
||||
<a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a>
|
||||
|
||||
</nav>
|
||||
<form id="search" action="/search" class="order-last sm:order-none flex-grow items-center justify-end hidden sm:block mt-6 sm:mt-0">
|
||||
<label class="visually-hidden" for="header-searchbox">記事タイトル/概要を検索 ...</label>
|
||||
<input type="text" id="header-searchbox" name="q" placeholder="記事タイトル/概要を検索 ..." class="w-full sm:max-w-xs bg-gray-200 border border-transparent float-right focus:bg-white focus:border-gray-300 focus:outline-none h-8 p-4 placeholder-gray-500 rounded text-gray-700 text-sm">
|
||||
</form>
|
||||
<div id="menu-toggle" class="flex items-center md:hidden text-gray-700 hover:text-teal-600 cursor-pointer sm:ml-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-7 lg:mx-6 mt-32 flex-grow">
|
||||
|
||||
|
||||
<article class="max-w-5xl mx-auto">
|
||||
<header class="mb-14">
|
||||
<h1 class="text-3xl text-center font-bold leading-normal text-gray-900 mt-0 mb-3">おこげ倶楽部自宅サーバについて</h1>
|
||||
<div class="text-center"><i class="fa-regular fa-clock"></i> 2022年5月7日</div>
|
||||
|
||||
<div class="mt-3 text-center">
|
||||
|
||||
<a href="/tags/技術情報" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#技術情報</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-10 -mx-7 md:mx-0">
|
||||
<img class="w-full max-w-2xl mx-auto" src="/assets/img/opi-server.webp" alt="This post thumbnail">
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div id="content" class="prose text-gray-800 max-w-none">
|
||||
<p>ocoge.club は Orange Pi 自宅サーバ（上写真）にてホスティングされています。現在 Webサーバ、メールサーバ、Git サーバが稼働しています。数千円で購入できる手のひらサイズのシングルボードコンピュータと3千円程度のSSDを使ってなかなか充実したネットサービスごっこwができます。</p>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p>タマちー</p>
|
||||
</div><div class="chatting">
|
||||
<div class="says">
|
||||
「おこげ俱楽部」は、軽量多目的 <s>Raspberry Pi</s> <a href="http://www.orangepi.org/" target="_new" title="Orange Pi">Orange Pi <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> サーバーとして絶賛改装中です...。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p>ミミィ</p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
市場でラズパイが枯渇している関係で、サーバのハードウェアを 4B(4GB) から、現状最も手に入りやすい中華<s>パチモン</s> <span title="シングルボードコンピュータ">SBC</span> の Orange Pi に変更したのよね！軽量化のために<span class="mfy"><a href="https://ja.wordpress.org" target="_new" title="シェア世界一の CMS">WordPress <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></span> をやめて <span class="mfg"><a href="https://jamstack.org" target="_new" title="ちょっと何言ってるか分からない">Jamstack <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></span> にするとかの対応中ヨ！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div> <div class="chatting">
|
||||
<div class="think-l-bal-s"></div>
|
||||
<div class="think-l-bal-l"></div>
|
||||
<div class="tamathink">
|
||||
<p>
|
||||
らずぱい売ってない... 困る...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
RSコンポーネンツの通販サイトに「11月入荷」とか書いてあるのよ！<br>
|
||||
鬼も笑えないわ！！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<h2>ハードウェア構成</h2>
|
||||
<ul>
|
||||
<li><a href="http://www.orangepi.org/Orange%20Pi%203%20LTS/index.html" target="_new" title="">Orange Pi 3 LTS <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></li>
|
||||
<li>Crucial SSD 120GB 2.5インチ (CT120BX500SSD1JP)</li>
|
||||
<li>Salcar USB-C 2.5インチ SATA HDD/SSDケース</li>
|
||||
</ul>
|
||||
<p>ケースは RPi 用を流用。ネジ穴が合わなかったので百均の耐震マットを小さく切って貼り付け。</p>
|
||||
<h2>ソフトウェア構成</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>種類</th>
|
||||
<th>名称</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>OS</td>
|
||||
<td><a href="http://www.orangepi.org/downloadresources/" target="_new" title="">Orange Pi3 LTS Debian Buster Server <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Webサーバ</td>
|
||||
<td><a href="https://nginx.org/en/" target="_new" title="">Nginx <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>サーバサイドインタプリタ</td>
|
||||
<td><a href="https://www.php.net/" target="_new" title="">PHP <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>データベース</td>
|
||||
<td><a href="https://www.sqlite.org/index.html" target="_new" title="">SQLite3 <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>メールサーバ (MTA)</td>
|
||||
<td><a href="http://www.postfix.org/" target="_new" title="">Postfix <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Webメールクライアント</td>
|
||||
<td><a href="https://www.rainloop.net/" target="_new" title="">Rainloop <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>POP/IMAP サーバ</td>
|
||||
<td><a href="https://www.dovecot.org/" target="_new" title="">Dovecot <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Git サーバ</td>
|
||||
<td><a href="https://gitea.io/" target="_new" title="">Gitea <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>このほか、スパムメール対策に <a href="https://spamassassin.apache.org/" target="_new" title="">SpamAssasin <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> であるとか証明書取得に <a href="https://letsencrypt.org/ja/" target="_new" title="">Let’s Encrypt (certbot) <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> であるとか</p>
|
||||
<h2>その他利用しているもの</h2>
|
||||
<p>独自ドメイン (ocoge.club)<br>
|
||||
<a href="https://www.mydns.jp/" target="_new" title="">MyDNS <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>（無料ダイナミックDNS）<br>
|
||||
インターネット接続回線（有線LANで接続）<br>
|
||||
静的サイトジェネレータ <a href="https://www.11ty.dev/" target="_new" title="">11ty <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> 及びブログテーマ <a href="https://github.com/dafiulh/vredeburg" target="_new" title="">Vredeburg <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></p>
|
||||
<h2>参考サイト</h2>
|
||||
<p><a href="https://samhobbs.co.uk/raspberry-pi-email-server" target="_new" title="">Sam Hobbs | Raspberry Pi Email Server <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a><br>
|
||||
英語でメールサーバのみの解説ではあるが、ステップごとにインストールや設定がうまくいっているかどうか確認を行うことができるようになっているため、長い作業の中でどこでミスをしたのか、または不具合が出ているのかがわかりやすい。また、設定をデフォルトから変更する箇所にそれぞれ設定の意味の説明があり、自分が何をしているのかがわかるため、ソフトウェアのアップデートで設定項目やその値に変更があり見本と齟齬が生じていても対処が容易である。わけもわからず言われた通り延々ソフトウェアのインストールと設定ファイルの書き換えを繰り返し、辟易しながら終わらせたものの結局動作せず問題のある個所も見当がつかないまま挫折、などという悲劇を起こしにくい、ナイスなサイト。</p>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says">
|
||||
WordPress と NextCloud の運用をやめた理由は実は別にあったりする...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
セキュリティアップデートが面倒だったのヨ！<br>
|
||||
仕事でもないのにあんなのやってられないワ！！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-10">
|
||||
|
||||
<div class="italic text-gray-700">Disqus comments only available for production</div>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</main>
|
||||
<footer class="mt-20 px-10 py-8 bg-gray-200">
|
||||
<div id="footer-badge"><a href="https://git.ocoge.club/" target=_new><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target=_new><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div>
|
||||
<div class="max-w-5xl mx-auto text-gray-700 text-center">
|
||||
© 2023 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>.
|
||||
Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a>
|
||||
using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/assets/js/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', (event) => {
|
||||
document.getElementsByTagName('html')[0].style.display='block';
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>受講生限定アカウントサービス | おこげ俱楽部</title>
|
||||
<meta name="title" content="受講生限定アカウントサービス | おこげ俱楽部">
|
||||
<meta name="description" content="『情報コース』受講者でご希望の方に、『おこげ倶楽部』オリジナルのメールアドレスと Git アカウントを進呈しております。">
|
||||
<meta name="keywords" content="ICT-Course,オコゲ,blockly,プログラミング,上野学習塾">
|
||||
<meta name="author" content="ocogeclub">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://ocoge.club/2022-05-13_account/">
|
||||
<link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png">
|
||||
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
|
||||
<script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="/assets/floatbox/floatbox.css" />
|
||||
<script src="/assets/floatbox/floatbox.js" defer></script>
|
||||
<link rel="stylesheet" href="/assets/css/ocmain.css">
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/footer.css">
|
||||
<link rel="stylesheet" href="/assets/css/post.css">
|
||||
<meta property="og:image" content="https://ocoge.club/assets/img/ogp_ocogeclub-duck.webp">
|
||||
<meta property="og:title" content="受講生限定アカウントサービス | おこげ俱楽部">
|
||||
<meta property="og:description" content="『情報コース』受講者でご希望の方に、『おこげ倶楽部』オリジナルのメールアドレスと Git アカウントを進呈しております。">
|
||||
<meta property="og:url" content="https://ocoge.club/2022-05-13_account/">
|
||||
<meta property="og:site_name" content="おこげ俱楽部">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@ocogeclub">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col h-screen bg-white text-gray-800 break-words">
|
||||
<header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500">
|
||||
<div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between">
|
||||
<div class="sm:mr-8">
|
||||
<a class="flex items-center" href="/">
|
||||
<span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span>
|
||||
</a>
|
||||
</div>
|
||||
<nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0">
|
||||
|
||||
<a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a>
|
||||
|
||||
<a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a>
|
||||
|
||||
<a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud/Mail</a>
|
||||
|
||||
<a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a>
|
||||
|
||||
</nav>
|
||||
<form id="search" action="/search" class="order-last sm:order-none flex-grow items-center justify-end hidden sm:block mt-6 sm:mt-0">
|
||||
<label class="visually-hidden" for="header-searchbox">記事タイトル/概要を検索 ...</label>
|
||||
<input type="text" id="header-searchbox" name="q" placeholder="記事タイトル/概要を検索 ..." class="w-full sm:max-w-xs bg-gray-200 border border-transparent float-right focus:bg-white focus:border-gray-300 focus:outline-none h-8 p-4 placeholder-gray-500 rounded text-gray-700 text-sm">
|
||||
</form>
|
||||
<div id="menu-toggle" class="flex items-center md:hidden text-gray-700 hover:text-teal-600 cursor-pointer sm:ml-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-7 lg:mx-6 mt-32 flex-grow">
|
||||
|
||||
|
||||
<article class="max-w-5xl mx-auto">
|
||||
<header class="mb-14">
|
||||
<h1 class="text-3xl text-center font-bold leading-normal text-gray-900 mt-0 mb-3">受講生限定アカウントサービス</h1>
|
||||
<div class="text-center"><i class="fa-regular fa-clock"></i> 2022年5月13日</div>
|
||||
|
||||
<div class="mt-3 text-center">
|
||||
|
||||
<a href="/tags/ICT-Course" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#ICT-Course</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-10 -mx-7 md:mx-0">
|
||||
<img class="w-full max-w-2xl mx-auto" src="/assets/img/ogp_ocogeclub-duck.webp" alt="This post thumbnail">
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div id="content" class="prose text-gray-800 max-w-none">
|
||||
<p>『情報コース』受講者でご希望の方に、『おこげ倶楽部』オリジナルのメールアドレスと Git サーバアカウントを進呈しております。</p>
|
||||
<h2>『おこげ倶楽部』メールアドレス</h2>
|
||||
<figure style="max-width: 400px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/rainloop.webp" title="RainLoop"><img loading="lazy" src="/assets/img/rainloop.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>お好きな名前@ocoge.club というメールアドレスを取得できます（※名前が使用済みでない場合に限ります）。また、画像のようなウェブメールクライアントをご用意していますので、特別なソフトウェアや設定をすることなしに、ウェブブラウザですぐにご利用になれます。</p>
|
||||
<h2>Git サーバ</h2>
|
||||
<figure style="max-width: 400px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/ocogit.webp" title="ocogIt"><img loading="lazy" src="/assets/img/ocogit.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
<blockquote>
|
||||
<p>Git（ギット）は、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである。( <a href="https://ja.wikipedia.org/wiki/Git" target="_new" title="Git | Wikipedia">Wikipedia <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> )</p>
|
||||
</blockquote>
|
||||
<p>コースで作成したプログラムソースなどの管理をすることができます。（Git についての緩い感じの解説は<a href="https://wa3.i-3-i.info/word12778.html" target="_new" title="">こちら <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>）</p>
|
||||
<h2>セキュリティ対策</h2>
|
||||
<p>常時SLL対応済み、不要ポート閉鎖など
|
||||
以下は、セキュリティチェックサイトでのスコア。</p>
|
||||
<h3>メール</h3>
|
||||
<figure style="max-width: 400px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/mailgrader.webp" title=""><img loading="lazy" src="/assets/img/mailgrader.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>POP3などはポートを閉じているため No Info となっているようです。<br>
|
||||
安心してご利用いただける範囲内である…と、思われます。</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-10">
|
||||
|
||||
<div class="italic text-gray-700">Disqus comments only available for production</div>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</main>
|
||||
<footer class="mt-20 px-10 py-8 bg-gray-200">
|
||||
<div id="footer-badge"><a href="https://git.ocoge.club/" target=_new><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target=_new><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div>
|
||||
<div class="max-w-5xl mx-auto text-gray-700 text-center">
|
||||
© 2023 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>.
|
||||
Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a>
|
||||
using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/assets/js/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', (event) => {
|
||||
document.getElementsByTagName('html')[0].style.display='block';
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,283 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>『オコゲ』マスコットのご紹介 | おこげ俱楽部</title>
|
||||
<meta name="title" content="『オコゲ』マスコットのご紹介 | おこげ俱楽部">
|
||||
<meta name="description" content="『オコゲ』のキャンバスにデフォルトで表示されるマスコットキャラクターをご紹介。">
|
||||
<meta name="keywords" content="オコゲ,タマちー＆ミミィ,オコゲ,blockly,プログラミング,上野学習塾">
|
||||
<meta name="author" content="ocogeclub">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://ocoge.club/2022-05-14_mascots/">
|
||||
<link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png">
|
||||
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
|
||||
<script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="/assets/floatbox/floatbox.css" />
|
||||
<script src="/assets/floatbox/floatbox.js" defer></script>
|
||||
<link rel="stylesheet" href="/assets/css/ocmain.css">
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/footer.css">
|
||||
<link rel="stylesheet" href="/assets/css/post.css">
|
||||
<meta property="og:image" content="https://ocoge.club/assets/img/ogp_tama-and-mimmy.webp">
|
||||
<meta property="og:title" content="『オコゲ』マスコットのご紹介 | おこげ俱楽部">
|
||||
<meta property="og:description" content="『オコゲ』のキャンバスにデフォルトで表示されるマスコットキャラクターをご紹介。">
|
||||
<meta property="og:url" content="https://ocoge.club/2022-05-14_mascots/">
|
||||
<meta property="og:site_name" content="おこげ俱楽部">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@ocogeclub">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col h-screen bg-white text-gray-800 break-words">
|
||||
<header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500">
|
||||
<div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between">
|
||||
<div class="sm:mr-8">
|
||||
<a class="flex items-center" href="/">
|
||||
<span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span>
|
||||
</a>
|
||||
</div>
|
||||
<nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0">
|
||||
|
||||
<a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a>
|
||||
|
||||
<a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a>
|
||||
|
||||
<a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud/Mail</a>
|
||||
|
||||
<a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a>
|
||||
|
||||
</nav>
|
||||
<form id="search" action="/search" class="order-last sm:order-none flex-grow items-center justify-end hidden sm:block mt-6 sm:mt-0">
|
||||
<label class="visually-hidden" for="header-searchbox">記事タイトル/概要を検索 ...</label>
|
||||
<input type="text" id="header-searchbox" name="q" placeholder="記事タイトル/概要を検索 ..." class="w-full sm:max-w-xs bg-gray-200 border border-transparent float-right focus:bg-white focus:border-gray-300 focus:outline-none h-8 p-4 placeholder-gray-500 rounded text-gray-700 text-sm">
|
||||
</form>
|
||||
<div id="menu-toggle" class="flex items-center md:hidden text-gray-700 hover:text-teal-600 cursor-pointer sm:ml-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-7 lg:mx-6 mt-32 flex-grow">
|
||||
|
||||
|
||||
<article class="max-w-5xl mx-auto">
|
||||
<header class="mb-14">
|
||||
<h1 class="text-3xl text-center font-bold leading-normal text-gray-900 mt-0 mb-3">『オコゲ』マスコットのご紹介</h1>
|
||||
<div class="text-center"><i class="fa-regular fa-clock"></i> 2022年5月13日</div>
|
||||
|
||||
<div class="mt-3 text-center">
|
||||
|
||||
<a href="/tags/オコゲ" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#オコゲ</a>
|
||||
|
||||
<a href="/tags/タマちー＆ミミィ" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#タマちー＆ミミィ</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-10 -mx-7 md:mx-0">
|
||||
<img class="w-full max-w-2xl mx-auto" src="/assets/img/ogp_tama-and-mimmy.webp" alt="This post thumbnail">
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div id="content" class="prose text-gray-800 max-w-none">
|
||||
<div class="box_stripe"><p>『オコゲ』のキャンバスにデフォルトで表示されるマスコットキャラクターのご紹介です。せっかくですから、本人たちから自己紹介をしてもらいましょう。</p></div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p>Mimmy</p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
まずはアタシからネ！アタシ、ミミィ！<br>
|
||||
カラダはウサギ、ココロは乙女！
|
||||
ヨロシクね！ウフフ！<br>
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="imgbox" style="background-color: #fee;">
|
||||
<p>ミミィ</p>
|
||||
<figure style="max-width: 150px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/mimmy_360.webp" title="Mimmy"><img loading="lazy" src="/assets/img/mimmy_360.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
</figcaption>
|
||||
</figure>
|
||||
ウサギのぬいぐるみ。顔はタマちーの手描き。
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
紹介文もアタシの顔もちょっと適当が過ぎるんじゃないかしらね？
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p>Tamachii</p>
|
||||
</div> <div class="chatting">
|
||||
<div class="think-l-bal-s"></div>
|
||||
<div class="think-l-bal-l"></div>
|
||||
<div class="tamathink">
|
||||
<p>
|
||||
マスコットキャラがいきなりオネェ全開って SEO 的にどうなんだろ…
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="imgbox" style="background-color: #fed;">
|
||||
<p>タマちー</p>
|
||||
<figure style="max-width: 200px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/tama_900.webp" title="Tamachii"><img loading="lazy" src="/assets/img/tama_900.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
</figcaption>
|
||||
</figure>
|
||||
『オコゲ』『おこげ倶楽部』メインマスコット。近所にある「玉木平神社」から名前を（勝手に）もらった、平環（たいら・たまき）という猫にしては立派な本名を持つ。「オコゲ猫のタマちー」。
|
||||
ウサギのぬいぐるみにミミィと名前を付けて大事（？）にしている。ミミィを触っていないと眠れない。触りすぎて顔がすり切れてしまい、自分で描きなおしたことをちょびっとだけ後悔している。
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div> <div class="chatting">
|
||||
<div class="think-l-bal-s"></div>
|
||||
<div class="think-l-bal-l"></div>
|
||||
<div class="tamathink">
|
||||
<p>
|
||||
わたしには<a href="https://www.google.co.jp/search?hl=ja&tbm=isch&q=%E4%BF%AE%E5%BE%A9%E5%A4%B1%E6%95%97" target="_new" title="">絵心がなかった <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>でござる…
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
アタシ本当に大事にされてるのかしら？かしら？
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
それにしてもアンタずいぶんと眠そうね！？<br>
|
||||
上の紹介文のところの絵とはだいぶ違うじゃない？
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says">
|
||||
ん…その撮影のときは…がんばった…
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
いい子ね！その調子でこれからも頑張んなさいよね！
|
||||
アタシはぬいぐるみだから動けなくてクタッとしてるけどね！
|
||||
その分おしゃべりで頑張るから皆さんよろしくね～
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_stripe"><p>このような手法は子供向けの学習書で使われるものだという認識だったのですが、最近はビジネスマン向けの入門サイトなどでも見かけるようになりました。そんなわけでウチも流れに乗ってみようかという感じでやってみました。<br>
|
||||
今後ともこの子たちをよろしくお願いいたします。</p></div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div> <div class="chatting">
|
||||
<div class="think-l-bal-s"></div>
|
||||
<div class="think-l-bal-l"></div>
|
||||
<div class="tamathink">
|
||||
<p>
|
||||
あ…わたし「自己」紹介してないや…
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div> <div class="chatting">
|
||||
<div class="think-l-bal-s"></div>
|
||||
<div class="think-l-bal-l"></div>
|
||||
<div class="tamathink">
|
||||
<p>
|
||||
…
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div> <div class="chatting">
|
||||
<div class="think-l-bal-s"></div>
|
||||
<div class="think-l-bal-l"></div>
|
||||
<div class="tamathink">
|
||||
<p>
|
||||
…まぁいっか…
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tsukkomi">いいのかーい</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-10">
|
||||
|
||||
<div class="italic text-gray-700">Disqus comments only available for production</div>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</main>
|
||||
<footer class="mt-20 px-10 py-8 bg-gray-200">
|
||||
<div id="footer-badge"><a href="https://git.ocoge.club/" target=_new><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target=_new><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div>
|
||||
<div class="max-w-5xl mx-auto text-gray-700 text-center">
|
||||
© 2023 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>.
|
||||
Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a>
|
||||
using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/assets/js/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', (event) => {
|
||||
document.getElementsByTagName('html')[0].style.display='block';
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,273 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>プチレッスン『タイプライターっぽいもの』その１ | おこげ俱楽部</title>
|
||||
<meta name="title" content="プチレッスン『タイプライターっぽいもの』その１ | おこげ俱楽部">
|
||||
<meta name="description" content="サンプルプログラム「タイプライターもどき」をもうちょっとだけタイプライターっぽくしてみましょう。">
|
||||
<meta name="keywords" content="オコゲ,プチレッスン,タマちー＆ミミィ,オコゲ,blockly,プログラミング,上野学習塾">
|
||||
<meta name="author" content="ocogeclub">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://ocoge.club/2022-05-14_petitlesson-01_typewriter-1/">
|
||||
<link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png">
|
||||
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
|
||||
<script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="/assets/floatbox/floatbox.css" />
|
||||
<script src="/assets/floatbox/floatbox.js" defer></script>
|
||||
<link rel="stylesheet" href="/assets/css/ocmain.css">
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/footer.css">
|
||||
<link rel="stylesheet" href="/assets/css/post.css">
|
||||
<meta property="og:image" content="https://ocoge.club/assets/img/ogp_typewriter.webp">
|
||||
<meta property="og:title" content="プチレッスン『タイプライターっぽいもの』その１ | おこげ俱楽部">
|
||||
<meta property="og:description" content="サンプルプログラム「タイプライターもどき」をもうちょっとだけタイプライターっぽくしてみましょう。">
|
||||
<meta property="og:url" content="https://ocoge.club/2022-05-14_petitlesson-01_typewriter-1/">
|
||||
<meta property="og:site_name" content="おこげ俱楽部">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@ocogeclub">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col h-screen bg-white text-gray-800 break-words">
|
||||
<header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500">
|
||||
<div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between">
|
||||
<div class="sm:mr-8">
|
||||
<a class="flex items-center" href="/">
|
||||
<span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span>
|
||||
</a>
|
||||
</div>
|
||||
<nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0">
|
||||
|
||||
<a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a>
|
||||
|
||||
<a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a>
|
||||
|
||||
<a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud/Mail</a>
|
||||
|
||||
<a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a>
|
||||
|
||||
</nav>
|
||||
<form id="search" action="/search" class="order-last sm:order-none flex-grow items-center justify-end hidden sm:block mt-6 sm:mt-0">
|
||||
<label class="visually-hidden" for="header-searchbox">記事タイトル/概要を検索 ...</label>
|
||||
<input type="text" id="header-searchbox" name="q" placeholder="記事タイトル/概要を検索 ..." class="w-full sm:max-w-xs bg-gray-200 border border-transparent float-right focus:bg-white focus:border-gray-300 focus:outline-none h-8 p-4 placeholder-gray-500 rounded text-gray-700 text-sm">
|
||||
</form>
|
||||
<div id="menu-toggle" class="flex items-center md:hidden text-gray-700 hover:text-teal-600 cursor-pointer sm:ml-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-7 lg:mx-6 mt-32 flex-grow">
|
||||
|
||||
|
||||
<article class="max-w-5xl mx-auto">
|
||||
<header class="mb-14">
|
||||
<h1 class="text-3xl text-center font-bold leading-normal text-gray-900 mt-0 mb-3">プチレッスン『タイプライターっぽいもの』その１</h1>
|
||||
<div class="text-center"><i class="fa-regular fa-clock"></i> 2022年5月15日</div>
|
||||
|
||||
<div class="mt-3 text-center">
|
||||
|
||||
<a href="/tags/オコゲ" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#オコゲ</a>
|
||||
|
||||
<a href="/tags/プチレッスン" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#プチレッスン</a>
|
||||
|
||||
<a href="/tags/タマちー＆ミミィ" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#タマちー＆ミミィ</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-10 -mx-7 md:mx-0">
|
||||
<img class="w-full max-w-2xl mx-auto" src="/assets/img/ogp_typewriter.webp" alt="This post thumbnail">
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div id="content" class="prose text-gray-800 max-w-none">
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p>ミミィ</p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
『オコゲ』Web体験版サンプルプログラムの「タイプライターもどき」をもうちょっとだけタイプライターっぽくしてみるわ！
|
||||
準備はいいかしら！？
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p>タマちー</p>
|
||||
</div><div class="chatting">
|
||||
<div class="says">
|
||||
ん…元記事はこれ、です…
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card"><article class="blogcard"><h4 class="blogcard__heading"><a class="blogcard__link" href="/2022-05-07_demo/">『オコゲ』Web 体験版 | おこげ俱楽部</a></h4><img loading="lazy" class="blogcard__image" src="/assets/img/raspberrycake_ogp.webp"><p class="blogcard__description">ブロックプログラミングを体験してみましょう。ハードウェアなどの制限から、Web体験版ではできないこともありますが、感触を確かめることはできます。</p><div class="blogcard__meta"><img loading="lazy" class="blogcard__logo" src="/assets/img/favicon.png"><span class="blogcard__publisher">おこげ俱楽部</span></div></article></div>
|
||||
<p>まず最初に、どこをどのように変更するか決めておきます。</p>
|
||||
<figure style="max-width: 400px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/typewriter.webp" title=""><img loading="lazy" src="/assets/img/typewriter.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>サンプルプログラムの記事にあるブロックはこれです。実行してみるとわかりますが、このプログラムでは、キーボードの入力が1行に1文字ずつ表示されます。<br>
|
||||
以下の記事では、このプログラムを1行に文字を横並びに行として表示、改行とついでにバックスペースで文字を削除できるように改造することにしましょう。</p>
|
||||
<p>このプログラムは永久にキーボードからの入力待ちをします。実行後は次のステップに行く前に <span style="color: #00bfff" class="text-color"><i class="fas fa-redo-alt"></i></span> をクリックしてページをリロードしておきましょう。</p>
|
||||
<h2>キー入力を変数に記憶させて表示する</h2>
|
||||
<p>『オコゲ』の黒板表示は1行ずつ表示することしかできません。そこで、キーボードから入力された文字を変数に代入して記憶してから、まとめて表示できるようにしましょう。</p>
|
||||
<p>変数とは、数字や文字を代入して保存しておくことができる領域のことです。変数には名前をつけて使います。「変数１」という名前の変数に「あいう」を記憶させてから、『「変数１」を表示しなさい』と命令すれば「あいう」が表示されます。変数の中身は必要に応じて何度でも書き換えることができます。</p>
|
||||
<h3>変数を作成する</h3>
|
||||
<figure style="max-width: 200px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/make_var.webp" title=""><img loading="lazy" src="/assets/img/make_var.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>まず、入力を記録する変数を作成します。「変数」カテゴリから「変数の作成…」をクリックします。</p>
|
||||
<figure style="max-width: 460px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/input_var_name.webp" title=""><img loading="lazy" src="/assets/img/input_var_name.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>ダイアログで変数の名前を入力します。ここでは「行」にします。</p>
|
||||
<h3>キー入力を変数に代入する</h3>
|
||||
<p>この状態で「変数」カテゴリを開くと、<img loading="lazy" class="inline" src="/assets/img/ptlesson_01-04.webp" style="height: 32px"> がありますので、これと <img loading="lazy" class="inline" src="/assets/img/ptlesson_01-05.webp" style="height: 28px"> を使って、変数「行」に変数「キー」の内容を代入するコードを作ります。黒板には「キー」ではなく「行」を表示するように変更します。</p>
|
||||
<figure style="max-width: 400px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/ptlesson_01-03.webp" title=""><img loading="lazy" src="/assets/img/ptlesson_01-03.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>これを実行しても、結果は変更前とまだ変わりありません。これは、変数「行」が1回分の「キー」しか覚えていないからです。では、変数「行」にキー入力を続けて記憶させるにはどのようにすれば良いのでしょうか。</p>
|
||||
<h3>変数に文字を追加して文字列を作成しよう</h3>
|
||||
<p>文字列とは、文字の並びや集まりのことです。文字列も変数に記憶させておくことができます。では変数「行」の後ろに「キー」を追加するコードを考えてみましょう。例えば、最初「行」が “a" で「キー」が “b" だったら、最後に「行」が “ab" になるような、そんなプログラムを作りましょう。</p>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
さ、初めての出題ね！すぐに答えを開かないで、自分で考えて実際にブロックを組んで実行してみるのヨ！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says">
|
||||
ヒントは見てもいいの...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p><span style="color: #ff0000" class="text-color"><i class="fas fa-hand-point-right">
|
||||
</i></span> ヒント：
|
||||
<img loading="lazy" class="inline" src="/assets/img/ptlesson_01-04.webp" style="height: 32px">
|
||||
<img loading="lazy" class="inline" src="/assets/img/ptlesson_01-05.webp" style="height: 28px">
|
||||
<img loading="lazy" class="inline" src="/assets/img/ptlesson_01-06.webp" style="height: 28px">
|
||||
<img loading="lazy" class="inline" src="/assets/img/ptlesson_01-07.webp" style="height: 28px">
|
||||
を使います。</p>
|
||||
<details class="lesson">
|
||||
<summary class="lesson"> <i class="fa-solid fa-pen-to-square"></i> レッスン：変数「行」に「キー」を追加しよう</summary>
|
||||
<div class="lesson"><div class="slide">
|
||||
<figure style="max-width: 286px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/ptlesson_01-08.webp" title=""><img loading="lazy" src="/assets/img/ptlesson_01-08.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>「追加する」という機能がないプログラミング言語を使う場合はこのような書き方をすることが多いです。分かりにくく感じる方は、式で考えるとすっきりするかもしれません。
|
||||
「行」＝「行」＋「キー」
|
||||
「行」と「キー」を連結して、その結果をまた「行」に戻す（代入する）というわけです。
|
||||
これで、変数「行」の中身をリセットしない限りはキー入力を「行」にためこんでおくことができるようになりました。このブロックは、次のように配置してください。</p>
|
||||
<figure style="max-width: 341px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/ptlesson_01-09.webp" title=""><img loading="lazy" src="/assets/img/ptlesson_01-09.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div></div>
|
||||
</details>
|
||||
<p>これを実行してスペースキーを押してみてください。<img loading="lazy" class="inline" src="/assets/img/petitlesson_01-10.webp" style="height: 32px"> と表示されたでしょうか。"undefined" は「未定義」という意味で、ここでは「行」という変数が未定義ですよ、ということになります。
|
||||
何が起きているかというと、プログラム実行後最初にキーボードを押したとき、プログラムはまず「行」と「キー」を連結しようとします。ところが、これより前にプログラムは「行」に対して何もしていません。つまり、このときプログラム的には「行」という入れ物はあっても、何が入っているのか分かっていない状態なのです。だからプログラムは「『行』？わからんなー」と答えているのです。これを避けるためには、次のように、最初に変数「行」は空っぽの文字列だよー、と決めてあげる必要があります。</p>
|
||||
<figure style="max-width: 320px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/petitlesson_01-11.webp" title=""><img loading="lazy" src="/assets/img/petitlesson_01-11.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>繰り返し処理の中で変数を使う場合、この「変数の初期化」をしないとちゃんと動かないことがよくあります。
|
||||
<span class="tsubuyaki">
|
||||
昔 C 言語で変数を宣言しただけだと中にゴミデータが入ったままで…いや、なんでもない
|
||||
</span><br>
|
||||
頭の片隅にでも入れておくといいかもしれません。</p>
|
||||
<p>では、実行してキーボードから「abcdefg」と入力してみましょう。</p>
|
||||
<figure style="max-width: 88px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/petitlesson_01-12.webp" title=""><img loading="lazy" src="/assets/img/petitlesson_01-12.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>しっかり変数にキー入力が蓄積されて行っているようですね！でもこれだとタイプライターとは言い難い挙動なので、1か所修正します。</p>
|
||||
<figure style="max-width: 350px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/petitlesson_01-13.webp" title=""><img loading="lazy" src="/assets/img/petitlesson_01-13.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>それっぽくなってきましたね？</p>
|
||||
<p>その２に続きます。
|
||||
（準備中）</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-10">
|
||||
|
||||
<div class="italic text-gray-700">Disqus comments only available for production</div>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</main>
|
||||
<footer class="mt-20 px-10 py-8 bg-gray-200">
|
||||
<div id="footer-badge"><a href="https://git.ocoge.club/" target=_new><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target=_new><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div>
|
||||
<div class="max-w-5xl mx-auto text-gray-700 text-center">
|
||||
© 2023 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>.
|
||||
Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a>
|
||||
using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/assets/js/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', (event) => {
|
||||
document.getElementsByTagName('html')[0].style.display='block';
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,371 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>『オコゲ』でぐーちょきぱーを機械学習 | おこげ俱楽部</title>
|
||||
<meta name="title" content="『オコゲ』でぐーちょきぱーを機械学習 | おこげ俱楽部">
|
||||
<meta name="description" content="『オコゲ』デスクトップ版の機能を動画でご紹介。サーマルカメラと TensorFlow を使ったインタラクティブでリアルタイムな機械学習。">
|
||||
<meta name="keywords" content="ICT-Course,動画,オコゲ,オコゲ,blockly,プログラミング,上野学習塾">
|
||||
<meta name="author" content="ocogeclub">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://ocoge.club/2022-05-16_tf-janken/">
|
||||
<link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png">
|
||||
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
|
||||
<script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="/assets/floatbox/floatbox.css" />
|
||||
<script src="/assets/floatbox/floatbox.js" defer></script>
|
||||
<link rel="stylesheet" href="/assets/css/ocmain.css">
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/footer.css">
|
||||
<link rel="stylesheet" href="/assets/css/post.css">
|
||||
<meta property="og:image" content="https://ocoge.club/assets/img/ogp_janken.webp">
|
||||
<meta property="og:title" content="『オコゲ』でぐーちょきぱーを機械学習 | おこげ俱楽部">
|
||||
<meta property="og:description" content="『オコゲ』デスクトップ版の機能を動画でご紹介。サーマルカメラと TensorFlow を使ったインタラクティブでリアルタイムな機械学習。">
|
||||
<meta property="og:url" content="https://ocoge.club/2022-05-16_tf-janken/">
|
||||
<meta property="og:site_name" content="おこげ俱楽部">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@ocogeclub">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col h-screen bg-white text-gray-800 break-words">
|
||||
<header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500">
|
||||
<div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between">
|
||||
<div class="sm:mr-8">
|
||||
<a class="flex items-center" href="/">
|
||||
<span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span>
|
||||
</a>
|
||||
</div>
|
||||
<nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0">
|
||||
|
||||
<a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a>
|
||||
|
||||
<a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a>
|
||||
|
||||
<a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud/Mail</a>
|
||||
|
||||
<a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a>
|
||||
|
||||
</nav>
|
||||
<form id="search" action="/search" class="order-last sm:order-none flex-grow items-center justify-end hidden sm:block mt-6 sm:mt-0">
|
||||
<label class="visually-hidden" for="header-searchbox">記事タイトル/概要を検索 ...</label>
|
||||
<input type="text" id="header-searchbox" name="q" placeholder="記事タイトル/概要を検索 ..." class="w-full sm:max-w-xs bg-gray-200 border border-transparent float-right focus:bg-white focus:border-gray-300 focus:outline-none h-8 p-4 placeholder-gray-500 rounded text-gray-700 text-sm">
|
||||
</form>
|
||||
<div id="menu-toggle" class="flex items-center md:hidden text-gray-700 hover:text-teal-600 cursor-pointer sm:ml-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-7 lg:mx-6 mt-32 flex-grow">
|
||||
|
||||
|
||||
<article class="max-w-5xl mx-auto">
|
||||
<header class="mb-14">
|
||||
<h1 class="text-3xl text-center font-bold leading-normal text-gray-900 mt-0 mb-3">『オコゲ』でぐーちょきぱーを機械学習</h1>
|
||||
<div class="text-center"><i class="fa-regular fa-clock"></i> 2022年5月16日</div>
|
||||
|
||||
<div class="mt-3 text-center">
|
||||
|
||||
<a href="/tags/ICT-Course" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#ICT-Course</a>
|
||||
|
||||
<a href="/tags/動画" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#動画</a>
|
||||
|
||||
<a href="/tags/オコゲ" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#オコゲ</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-10 -mx-7 md:mx-0">
|
||||
<img class="w-full max-w-2xl mx-auto" src="/assets/img/ogp_janken.webp" alt="This post thumbnail">
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div id="content" class="prose text-gray-800 max-w-none">
|
||||
<div class="box_stripe"><p>Raspberry Pi 専用デスクトップアプリ『オコゲ』は、Raspberry Pi の GPIO に直接アクセス<sup><a href="#1">1</a></sup>することができます。また、特定のセンサーに対応した専用ブロック<sup><a href="#2">2</a></sup>も用意されています。<br>
|
||||
ここでは、デスクトップ版『オコゲ』の目玉機能のひとつ、GPIO と TensorFlow.js<sup><a href="#3">3</a></sup> を使った「機械学習体験」をご紹介いたします。</p></div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p>タマちー</p>
|
||||
</div><div class="chatting">
|
||||
<div class="says">
|
||||
機械学習？目玉焼きの？
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p>ミミィ</p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
目玉機能ね！目玉といえるかどうかは保証できないけど、機械学習はコンピュータ界隈で今もっともホットな話題のひとつではあるわね！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<h2>機械学習による画像分類（ぐーちょきぱー）</h2>
|
||||
<p>一言で機械学習といっても、その内容は多岐に渡ります。『オコゲ』が実装するのは「画像の分類」です。<br>
|
||||
今回は赤外線アレイセンサ（サーマルカメラ）でとらえたじゃんけんのハンドポーズ（ぐー・ちょき・ぱー）を Raspberry Pi で学習してみることにしましょう。</p>
|
||||
<figure class="center"><img loading="lazy" src="/assets/img/grd-tns_dgst.gif">
|
||||
<figcaption>
|
||||
ぐーちょきぱーがわかるタマちー
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>なんかゲームとか作れそうですね。Raspberry Pi とあっちむいてほいとか勝てそうにないですね！</p>
|
||||
<h2>機械学習とは</h2>
|
||||
<blockquote>
|
||||
<p>機械学習とは、データを分析する方法の１つで、データから、「機械」（コンピューター）が自動で「学習し、データの背景にあるルールやパターンを発見する方法。近年では、学習した成果に基づいて「予測・判断」することが重視されるようになった。<span class="tsubuyaki"><a href="https://www.nri.com/jp/knowledge/glossary/lst/ka/machine_learning">機械学習 | 用語解説 | 野村総合研究所(NRI)</a></span></p>
|
||||
</blockquote>
|
||||
<p>Google で「機械学習」を検索してトップに表示される野村総研の文章を引用してみました。
|
||||
機械学習は「人工知能(AI)」を実現するためのデータ分析技術の１つで、人間や動物が経験を通して自然に学習するのと同様のことをコンピュータでもやろうというものです。
|
||||
本来コンピュータは高速で正確な演算が得意な半面、あまり融通が利きません。例えば、従来のコンピュータに「四角」という図形を教えるとすると</p>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/square.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
これは四角
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says">
|
||||
うん
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/parallelogram.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
これも四角
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says">
|
||||
うん
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/square.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
これは？
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says">
|
||||
四角
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/rectangle.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
じゃあこれは？
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div> <div class="chatting">
|
||||
<div class="think-l-bal-s"></div>
|
||||
<div class="think-l-bal-l"></div>
|
||||
<div class="tamathink">
|
||||
<p>
|
||||
…？<br>
|
||||
見たことない形だヨ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>すでに覚えたものと全く同じ「正方形」は認識できても、教わっていない「長方形」は理解できません。<br>
|
||||
機械学習の仕組みを組み込んだシステムでは同じように教える（学習させる）と</p>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/rectangle.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
これは？
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says">
|
||||
たぶん四角
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>この「たぶん」が重要で、この場合、コンピュータは正方形と平行四辺形から「四角」という図形の特徴を
|
||||
<span style="font-weight:bold; color:black">自分で勝手に</span>
|
||||
見つけ出し、長方形がその特徴を持っていると判定して「90％の確率で四角」などと答えます。このように学習したデータを使用して新しいデータに対して予測や判断を行うことを「推論」といいます。</p>
|
||||
<h2>AMG8833 8×8 赤外線アレイセンサ (Grid-EYE)</h2>
|
||||
<figure style="max-width: 211px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/grideye-module.webp" title=""><img loading="lazy" src="/assets/img/grideye-module.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p><a href="https://www.switch-science.com/catalog/3395/" target="_new" title="">Grid-EYE(AMG8833) <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> は、Panasonic が開発した縦横８ピクセル（64画素）の赤外線センサ（サーマルカメラ）です。I2C接続で利用することができ、記事トップのカバー写真のような簡単な回路で温度データを取得できます。温度データは64画素それぞれの温度で、次のようなものです。</p>
|
||||
<pre><code>13.25,13.25,18,16.75,16.5,15.75,14.25,12.25,12.75,14,20,20,19.25,17.25,15.25,13.25,14,15.25,21,22,21.25,19.75,15.25,13.25,15,19.25,22,22.5,21.75,19.25,14.25,13,14.75,20.75,23.25,23.25,22.5,17,13.75,13,14.5,18,23,23.5,21.75,15.25,13.25,12.5,14.5,15.75,21.25,23.5,20,15,13.5,13.25,18.25,17.75,21.75,24,20.75,15.25,14.5,14
|
||||
</code></pre>
|
||||
<p>これを温度によって色付けして描画することで次のような画像を得ることができます。</p>
|
||||
<figure class="center"><img loading="lazy" src="/assets/img/8x8hand_original.webp">
|
||||
<figcaption></figcaption>
|
||||
</figure>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div> <div class="chatting">
|
||||
<div class="think-l-bal-s"></div>
|
||||
<div class="think-l-bal-l"></div>
|
||||
<div class="tamathink">
|
||||
<p>
|
||||
見えないし
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="center"><img loading="lazy" src="/assets/img/8x8hand_nosmooth.webp">
|
||||
<figcaption></figcaption>
|
||||
</figure>
|
||||
<p>20倍に拡大してみました。これでも何が映っているのかなんとなくわかりますが、スムージングをかけることで少し見やすくなります。</p>
|
||||
<figure class="center"><img loading="lazy" src="/assets/img/8x8hand_smooth.webp">
|
||||
<figcaption></figcaption>
|
||||
</figure>
|
||||
<p>手と言われれば、手。ちなみに左下のちょっとだけ赤い部分は、筆者の頭が写り込んだものです。最初、天井に温度が高い部分があるのかと思って上を見たりしていましたw</p>
|
||||
<p><span class="tsubuyaki">ところで、こんな感じの映像をどこかで見たことがありませんか？<br>
|
||||
そう、<a href="https://www.nintendo.co.jp/switch/as3ma/traning/index.html?cat=yubi" target="_new" title="">これ <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>です。まさか Joy-Con にサーマルカメラが内蔵されていようとは。テレビCMを見て「おおお…」などと一人で盛り上がっていたのは内緒です。そのほか距離センサなどが同時に使用できるようになっている様子。ジャイロも入っているしホンマどえらいコントローラーやでぇ…</span></p>
|
||||
<h2>やってみる</h2>
|
||||
<p>プログラムは以下のようなものです。</p>
|
||||
<figure class="center"><img loading="lazy" src="/assets/img/grideye-tensor_blocks.webp">
|
||||
<figcaption>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>※ボタンの作成など、本質に関係のない一部のブロックは折り畳み／省略しています。</p>
|
||||
<p>センサで取得した画像はキャンバスに表示されるのようになっているので、これを「なし（手がかざされていない状態）」「ぐー」「ちょき」「ぱ」の４つのボタンを使って分類します。<br>
|
||||
キャンバス上の画像に対する推論は常時実行されていて、結果はマスコットキャラクターの横の吹き出しに表示されます。</p>
|
||||
<p>学習を行う様子は動画をご覧ください。</p>
|
||||
<p><video loading="lazy" controls="" src="/assets/img/grideye-tensorflow.mp4" style="margin: auto;"></video></p>
|
||||
<ol>
|
||||
<li>何も学習していない状態では「undefined」が表示される。センサーに手をかざしてじゃんけんの形を作っても反応なし</li>
|
||||
<li>手をかざさない状態を「なし」ボタンをクリックして学習させる（このとき画面には「じゃんけん…」と表示）</li>
|
||||
<li>同様にして「ぐー」「ちょき」「ぱ」を学習。いずれも２回クリックで正しい推論をするようになった。念のため３回クリック</li>
|
||||
<li>その後はハンドポーズを正しく答えることができるようになる</li>
|
||||
</ol>
|
||||
<p>なんということでしょう。たった3×4=12回のクリックでぐーちょきぱー判別の機械学習ができてしまいました。上のプログラムでは使われていませんが、学習したデータを保存・復元するブロックもありますので、育てた学習データを他のプログラムから呼び出して利用することができます。</p>
|
||||
<h2>ちょっと詳しく</h2>
|
||||
<p>『オコゲ』では機械学習ライブラリとして、Google が開発した <a href="https://www.tensorflow.org/" target="_new" title="">TensorFlow <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>（テンサーフロー）を利用しています。Google がこれをオープンソースとして公開したことで、機械学習を誰もがすぐに利用できるようになりました。Google 側もわかりやすいチュートリアルを用意したりして普及に余念がありません。</p>
|
||||
<p>しかし、機械学習を一からやろうとすると、大量（画像何千枚とかのレベル）のサンプルデータとそれを学習するための高い処理能力を持つコンピュータ、そして膨大な学習時間が必要です。Raspberry Pi のような非力な子はお呼びではありません。理論も難解で（<a href="https://ja.wikipedia.org/wiki/%E3%83%86%E3%83%B3%E3%82%BD%E3%83%AB" target="_new" title="">テンソル <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>って何さ？）、「ばあさんや、なんか流行りらしいからちょっと齧ってみようかね」というわけにはなかなかいきません。先人が作った機械学習のデータ（モデルと呼びます）を利用するという手もありますが、応用がききません。犬種を分類する学習済みモデルを猫に使うことはできないからです。</p>
|
||||
<p>そこで考案されたのが「転移学習 (Transfer Learning)」です。ある分野ですでに学習済みのモデルを別の分野での推論に転用して、少ないサンプルデータと学習時間で成果を出そうという手法です。言ってみれば成績の良い先輩からノートを借りてテスト勉強をするようなイメージです。
|
||||
『オコゲ』の機械学習ブロックは、この転移学習を利用して簡単お手軽に機械学習を行うことができるようになっています。</p>
|
||||
<p>今回のような「手のポーズの認識」であれば、そのまま使える学習済みモデルとして、Webカメラを使った <a href="https://github.com/tensorflow/tfjs-models/tree/master/handpose" target="_new" title="">MediaPipe Handpose <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>（または<a href="https://github.com/tensorflow/tfjs-models/tree/master/hand-pose-detection" target="_new" title="">こっち <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>）も利用できるだろうと思いますが、当たり前だけど手にしか反応しない（前述の「応用がきかない」）のと、Webカメラなので Raspberry Pi である必要がない、なにより「学習をさせる」という面白みがないのでここでは扱うのをやめました。サーマルカメラを使ったここで紹介したやり方なら、ちょっと離れたところから上半身が映るようにして例えば <a href="https://www.google.com/search?q=%E3%83%A4%E3%83%B3%E3%82%B0%E3%83%9E%E3%83%B3&client=firefox-b-d&channel=crow5&sxsrf=ALiCzsYBHeiV-1OPBaViMgeSnhYAEcV5sg:1652690019938&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjqqb-MzuP3AhUCad4KHUdKDN0Q_AUoAnoECAEQBA&biw=1006&bih=960&dpr=1" target="_new" title="">「ヤングマン」のポーズ <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>の認識などもできるかもしれません。</p>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
ポーズをとるのが恥ずかしくて試してないんですって！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div> <div class="chatting">
|
||||
<div class="think-l-bal-s"></div>
|
||||
<div class="think-l-bal-l"></div>
|
||||
<div class="tamathink">
|
||||
<p>
|
||||
誰も見てやしないのにね…
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2>注釈</h2>
|
||||
<p><small id="1">1. pigpio デーモンを利用するので厳密には直接ではないが...</small><br>
|
||||
<small id="2">2. 2022年５月現在、センサー専用ブロックは次の通り。<br>
|
||||
● ジェスチャーセンサー PAJ7620<br>
|
||||
● 温湿度センサー DHT11<br>
|
||||
● 温湿度気圧センサー BME280<br>
|
||||
● 赤外線アレイセンサ（サーマルカメラ）AMG8833</small><br>
|
||||
<small id="3">3. <a href="https://www.tensorflow.org/js?hl=ja" target="_new" title="">TensorFlow.js <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> は、JavaScript 上で利用できる TensorFlow 実装。<br>
|
||||
TensorFlow といえばプログラム言語は Python が定番だが、Raspberry Pi では最新の TensorFlow を使おうと思うと、できないこともないようではあるものの、環境構築やインストールなど、少々敷居が高い。ありていに言うと、面倒くさい。TensorFlow.js は、それ自体が JavaScript で書かれているため、ブラウザ上の JavaScript から簡単に扱うことができ、導入の手間もほとんどかからない。スクリプト言語で書かれているが故の速度的な問題も <a href="https://github.com/tensorflow/tfjs/tree/master/tfjs-backend-wasm" target="_new" title="">WebAssembly バックエンド <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> (wasm) でほぼ解決。そのまま使えるいくつもの有用な<a href="https://www.tensorflow.org/js/models?hl=ja" target="_new" title="">学習済みモデル <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>があらかじめ用意されているうえ、AI に触れたことのない Webフロントエンジニアを意識しているようで、初学者向けの平易なドキュメントも充実している。「画像の転移学習」にはステップバイステップの丁寧な<a href="https://codelabs.developers.google.com/codelabs/tensorflowjs-teachablemachine-codelab?hl=ja#0" target="_new" title="">チュートリアル <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>まで存在する。『オコゲ』を Blockly + Electron で開発してきたのは、もしかしたらこのためだったんじゃないかと思うほどの、あつらえたかのような環境であった。正味の話、前述の転移学習チュートリアルがなかったら機械学習ブロックの導入は諦めてたかもしれない。サンキューグーグル。
|
||||
</small></p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-10">
|
||||
|
||||
<div class="italic text-gray-700">Disqus comments only available for production</div>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</main>
|
||||
<footer class="mt-20 px-10 py-8 bg-gray-200">
|
||||
<div id="footer-badge"><a href="https://git.ocoge.club/" target=_new><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target=_new><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div>
|
||||
<div class="max-w-5xl mx-auto text-gray-700 text-center">
|
||||
© 2023 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>.
|
||||
Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a>
|
||||
using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/assets/js/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', (event) => {
|
||||
document.getElementsByTagName('html')[0].style.display='block';
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,278 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>『ゲーム電卓パイ』プロジェクト | おこげ俱楽部</title>
|
||||
<meta name="title" content="『ゲーム電卓パイ』プロジェクト | おこげ俱楽部">
|
||||
<meta name="description" content="Raspberry Pi と LCD キャラクタディスプレイモジュールで「ゲーム電卓」を再現してみる">
|
||||
<meta name="keywords" content="オコゲ,デスクトップアプリ版,オコゲ,blockly,プログラミング,上野学習塾">
|
||||
<meta name="author" content="ocogeclub">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://ocoge.club/2022-06-10_game-dentak/">
|
||||
<link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png">
|
||||
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
|
||||
<script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="/assets/floatbox/floatbox.css" />
|
||||
<script src="/assets/floatbox/floatbox.js" defer></script>
|
||||
<link rel="stylesheet" href="/assets/css/ocmain.css">
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/footer.css">
|
||||
<link rel="stylesheet" href="/assets/css/post.css">
|
||||
<meta property="og:image" content="https://ocoge.club/assets/img/ogp_game-dentak.webp">
|
||||
<meta property="og:title" content="『ゲーム電卓パイ』プロジェクト | おこげ俱楽部">
|
||||
<meta property="og:description" content="Raspberry Pi と LCD キャラクタディスプレイモジュールで「ゲーム電卓」を再現してみる">
|
||||
<meta property="og:url" content="https://ocoge.club/2022-06-10_game-dentak/">
|
||||
<meta property="og:site_name" content="おこげ俱楽部">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@ocogeclub">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col h-screen bg-white text-gray-800 break-words">
|
||||
<header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500">
|
||||
<div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between">
|
||||
<div class="sm:mr-8">
|
||||
<a class="flex items-center" href="/">
|
||||
<span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span>
|
||||
</a>
|
||||
</div>
|
||||
<nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0">
|
||||
|
||||
<a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a>
|
||||
|
||||
<a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a>
|
||||
|
||||
<a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud/Mail</a>
|
||||
|
||||
<a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a>
|
||||
|
||||
</nav>
|
||||
<form id="search" action="/search" class="order-last sm:order-none flex-grow items-center justify-end hidden sm:block mt-6 sm:mt-0">
|
||||
<label class="visually-hidden" for="header-searchbox">記事タイトル/概要を検索 ...</label>
|
||||
<input type="text" id="header-searchbox" name="q" placeholder="記事タイトル/概要を検索 ..." class="w-full sm:max-w-xs bg-gray-200 border border-transparent float-right focus:bg-white focus:border-gray-300 focus:outline-none h-8 p-4 placeholder-gray-500 rounded text-gray-700 text-sm">
|
||||
</form>
|
||||
<div id="menu-toggle" class="flex items-center md:hidden text-gray-700 hover:text-teal-600 cursor-pointer sm:ml-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-7 lg:mx-6 mt-32 flex-grow">
|
||||
|
||||
|
||||
<article class="max-w-5xl mx-auto">
|
||||
<header class="mb-14">
|
||||
<h1 class="text-3xl text-center font-bold leading-normal text-gray-900 mt-0 mb-3">『ゲーム電卓パイ』プロジェクト</h1>
|
||||
<div class="text-center"><i class="fa-regular fa-clock"></i> 2022年6月14日</div>
|
||||
|
||||
<div class="mt-3 text-center">
|
||||
|
||||
<a href="/tags/オコゲ" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#オコゲ</a>
|
||||
|
||||
<a href="/tags/デスクトップアプリ版" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#デスクトップアプリ版</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-10 -mx-7 md:mx-0">
|
||||
<img class="w-full max-w-2xl mx-auto" src="/assets/img/ogp_game-dentak.webp" alt="This post thumbnail">
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div id="content" class="prose text-gray-800 max-w-none">
|
||||
<div class="box_stripe"><p>CASIO のレトロガジェット「ゲーム電卓」を、『オコゲ』と LCD キャラクタディスプレイモジュールで作成します。<br>
|
||||
※ コード開発と記事は同時進行ですので、まったり更新＆内容変更有です。</p></div>
|
||||
<h2>「ゲーム電卓」とは</h2>
|
||||
<blockquote>
|
||||
<p>ゲーム電卓（ゲームでんたく）は、卓上電子計算機にコンピュータゲームの機能を盛り込んだ多機能化商品。1980年代の電子ゲーム流行の際に大手電卓メーカー等から発売された。 <a href="https://ja.wikipedia.org/wiki/%E3%82%B2%E3%83%BC%E3%83%A0%E9%9B%BB%E5%8D%93" target="_new" title="Wikipedia">Wikipedia | ゲーム電卓 <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></p>
|
||||
</blockquote>
|
||||
<p>ここでは、CASIO から発売された「デジタルインベーダー」SM880 の復刻版である SL-880 を指すこととします。プレイのイメージは、以下のサイトの動画をご覧ください。</p>
|
||||
<p><a href="https://www.casio.com/jp/basic-calculators/product.SL-880/" target="_new" title="">メーカー製品ページ <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a><br>
|
||||
<a href="https://www.casio.com/content/dam/casio/global/support/manuals/calculators/pdf/004-ja/s/SL-880_WA_JA.pdf" target="_new" title="">取扱説明書 <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a><br>
|
||||
<a href="https://kakakumag.com/houseware/?id=11983" target="_new" title="">価格.comマガジン <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></p>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p>ミミィ</p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
懐かしいヮ・・・<br>
|
||||
「AIM」キーと「FIRE」キーがユルユルになるまで遊んだものョ・・・ハッ
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p>タマちー</p>
|
||||
</div> <div class="chatting">
|
||||
<div class="think-l-bal-s"></div>
|
||||
<div class="think-l-bal-l"></div>
|
||||
<div class="tamathink">
|
||||
<p>
|
||||
ミミィって歳いくつなんだろ・・・
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2>準備</h2>
|
||||
<p>以下の記事に従ってデスクトップアプリ『オコゲ』の導入と設定を行ってください。</p>
|
||||
<div class="card"><article class="blogcard"><h4 class="blogcard__heading"><a class="blogcard__link" href="/2022-06-13_ocoge-desktop/">『オコゲ』デスクトップ | おこげ俱楽部</a></h4><img loading="lazy" class="blogcard__image" src="/assets/img/ogp_ocoge-desktop.webp"><p class="blogcard__description">Raspberry Pi デスクトップアプリ版『オコゲ』について</p><div class="blogcard__meta"><img loading="lazy" class="blogcard__logo" src="/assets/img/favicon.png"><span class="blogcard__publisher">おこげ俱楽部</span></div></article></div>
|
||||
<h2>ハードウェア</h2>
|
||||
<ul>
|
||||
<li>Raspberry Pi 4B (8GB)</li>
|
||||
<li><a href="https://akizukidenshi.com/catalog/g/gK-12238/" target="_new" title="">I2C 接続小型 LCD モジュール <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></li>
|
||||
<li><a href="https://akizukidenshi.com/catalog/g/gP-04118/" target="_new" title="">圧電サウンダ <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></li>
|
||||
<li><a href="https://www.google.com/search?q=b3f-1000&oq=b3f-1000&aqs=edge..69i57j0i512l2j0i30l2j0i5i30.6451j0j9&sourceid=chrome&ie=UTF-8" target="_new" title="">タクトスイッチ <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></li>
|
||||
</ul>
|
||||
<p>記事中では、これらの部品をブレッドボードとワイヤ類で接続して使用します。</p>
|
||||
<h2>回路構成</h2>
|
||||
<figure style="max-width: 300px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/game-dentak_fritzing.webp" title="ゲーム電卓パイ"><img loading="lazy" src="/assets/img/game-dentak_fritzing.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>以下は配線の一例です。</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>LCD キャラクタディスプレイ</th>
|
||||
<th>Raspberry Pi GPIO (BCM)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>A</td>
|
||||
<td>3V3（バックライト不要の場合は接続不要）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>VDD</td>
|
||||
<td>3V3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>RESET</td>
|
||||
<td>3V3 または 10kΩ でプルアップ</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>GND</td>
|
||||
<td>GND</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SDA</td>
|
||||
<td>22<sup>*</sup></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SCL</td>
|
||||
<td>23<sup>*</sup></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>K</td>
|
||||
<td>GND（バックライト不要の場合は接続不要）</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>* I2C バス１（GPIO2-3）を使用する場合、キャラクタディスプレイには<a href="https://akizukidenshi.com/catalog/g/gK-11354/" target="_new" title="">こちら <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>を使用</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>圧電サウンダ</th>
|
||||
<th>Raspberry Pi GPIO (BCM)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>片方</td>
|
||||
<td>20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>もう片方</td>
|
||||
<td>GND</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>タクトスイッチ</th>
|
||||
<th>Raspberry Pi GPIO (BCM)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>左</td>
|
||||
<td>26</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>右</td>
|
||||
<td>19</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>左右 GND</td>
|
||||
<td>GND</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says">
|
||||
次回に続く・・・
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
キャラクタディスプレイに文字を表示してみるわ！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card"><article class="blogcard"><h4 class="blogcard__heading"><a class="blogcard__link" href="/2022-06-21_aqm0802a/">AQM0802A に文字を表示してみる | おこげ俱楽部</a></h4><img loading="lazy" class="blogcard__image" src="/assets/img/ogp_aqm0802a.webp"><p class="blogcard__description">『ゲーム電卓パイ』プロジェクト～その２：LCD キャラクタディスプレイモジュール AQM0802A を試してみる</p><div class="blogcard__meta"><img loading="lazy" class="blogcard__logo" src="/assets/img/favicon.png"><span class="blogcard__publisher">おこげ俱楽部</span></div></article></div>
|
||||
</div>
|
||||
|
||||
<div class="mt-10">
|
||||
|
||||
<div class="italic text-gray-700">Disqus comments only available for production</div>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</main>
|
||||
<footer class="mt-20 px-10 py-8 bg-gray-200">
|
||||
<div id="footer-badge"><a href="https://git.ocoge.club/" target=_new><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target=_new><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div>
|
||||
<div class="max-w-5xl mx-auto text-gray-700 text-center">
|
||||
© 2023 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>.
|
||||
Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a>
|
||||
using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/assets/js/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', (event) => {
|
||||
document.getElementsByTagName('html')[0].style.display='block';
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,228 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>『オコゲ』デスクトップ | おこげ俱楽部</title>
|
||||
<meta name="title" content="『オコゲ』デスクトップ | おこげ俱楽部">
|
||||
<meta name="description" content="Raspberry Pi デスクトップアプリ版『オコゲ』について">
|
||||
<meta name="keywords" content="オコゲ,デスクトップアプリ版,オコゲ,blockly,プログラミング,上野学習塾">
|
||||
<meta name="author" content="ocogeclub">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://ocoge.club/2022-06-13_ocoge-desktop/">
|
||||
<link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png">
|
||||
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
|
||||
<script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="/assets/floatbox/floatbox.css" />
|
||||
<script src="/assets/floatbox/floatbox.js" defer></script>
|
||||
<link rel="stylesheet" href="/assets/css/ocmain.css">
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/footer.css">
|
||||
<link rel="stylesheet" href="/assets/css/post.css">
|
||||
<meta property="og:image" content="https://ocoge.club/assets/img/ogp_ocoge-desktop.webp">
|
||||
<meta property="og:title" content="『オコゲ』デスクトップ | おこげ俱楽部">
|
||||
<meta property="og:description" content="Raspberry Pi デスクトップアプリ版『オコゲ』について">
|
||||
<meta property="og:url" content="https://ocoge.club/2022-06-13_ocoge-desktop/">
|
||||
<meta property="og:site_name" content="おこげ俱楽部">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@ocogeclub">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col h-screen bg-white text-gray-800 break-words">
|
||||
<header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500">
|
||||
<div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between">
|
||||
<div class="sm:mr-8">
|
||||
<a class="flex items-center" href="/">
|
||||
<span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span>
|
||||
</a>
|
||||
</div>
|
||||
<nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0">
|
||||
|
||||
<a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a>
|
||||
|
||||
<a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a>
|
||||
|
||||
<a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud/Mail</a>
|
||||
|
||||
<a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a>
|
||||
|
||||
</nav>
|
||||
<form id="search" action="/search" class="order-last sm:order-none flex-grow items-center justify-end hidden sm:block mt-6 sm:mt-0">
|
||||
<label class="visually-hidden" for="header-searchbox">記事タイトル/概要を検索 ...</label>
|
||||
<input type="text" id="header-searchbox" name="q" placeholder="記事タイトル/概要を検索 ..." class="w-full sm:max-w-xs bg-gray-200 border border-transparent float-right focus:bg-white focus:border-gray-300 focus:outline-none h-8 p-4 placeholder-gray-500 rounded text-gray-700 text-sm">
|
||||
</form>
|
||||
<div id="menu-toggle" class="flex items-center md:hidden text-gray-700 hover:text-teal-600 cursor-pointer sm:ml-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-7 lg:mx-6 mt-32 flex-grow">
|
||||
|
||||
|
||||
<article class="max-w-5xl mx-auto">
|
||||
<header class="mb-14">
|
||||
<h1 class="text-3xl text-center font-bold leading-normal text-gray-900 mt-0 mb-3">『オコゲ』デスクトップ</h1>
|
||||
<div class="text-center"><i class="fa-regular fa-clock"></i> 2022年6月13日</div>
|
||||
|
||||
<div class="mt-3 text-center">
|
||||
|
||||
<a href="/tags/オコゲ" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#オコゲ</a>
|
||||
|
||||
<a href="/tags/デスクトップアプリ版" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#デスクトップアプリ版</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-10 -mx-7 md:mx-0">
|
||||
<img class="w-full max-w-2xl mx-auto" src="/assets/img/ogp_ocoge-desktop.webp" alt="This post thumbnail">
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div id="content" class="prose text-gray-800 max-w-none">
|
||||
<div class="iconbox">
|
||||
<span class="box-title"><i class="fa-solid fa-triangle-exclamation"></i></span>
|
||||
<p>
|
||||
このページで紹介するアプリは、限定的な環境において使用することを前提として素人が趣味で開発しているもので、不特定多数の方々の利用を想定したものではありません。ご了承くださいませ。
|
||||
</p>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p>ミミィ</p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
要するにちゃんと動かなくても文句言うなってことネ！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p>タマちー</p>
|
||||
</div> <div class="chatting">
|
||||
<div class="think-l-bal-s"></div>
|
||||
<div class="think-l-bal-l"></div>
|
||||
<div class="tamathink">
|
||||
<p>
|
||||
言い方・・・
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2>ダウンロードとインストール</h2>
|
||||
<p><a href="https://ocf.ltt.jp/" target="_new" title="">『オコゲ』ダウンロードページ <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>から最新版（最上部に表示されているもの）をダウンロードしてください。<br>
|
||||
ターミナルから次のようにインストールします。</p>
|
||||
<pre><code class="language-bash">$ sudo apt install ./ocoge_x.x.x_arm64.deb
|
||||
# x.x.x はバージョン番号
|
||||
</code></pre>
|
||||
<h2>アンインストール</h2>
|
||||
<p>ターミナルから次のように入力してください。</p>
|
||||
<pre><code class="language-bash">$ sudo apt remove ocoge
|
||||
</code></pre>
|
||||
<p>~/.config/ocoge に設定ファイルが残っていて気になる場合は手動で削除してください。</p>
|
||||
<h2>使い方</h2>
|
||||
<p>GPIO にアクセスするために、PIGPIO デーモンを起動しておきます。</p>
|
||||
<pre><code class="language-bash">$ sudo pigpiod
|
||||
</code></pre>
|
||||
<p>上記コマンドは、RPi を再起動するたびに実行する必要があります。<br>
|
||||
サービスとして有効にするには上記コマンドの代わりに、以下を実行してください。</p>
|
||||
<pre><code class="language-bash">$ sudo systemctl enable pigpiod
|
||||
$ sudo systemctl start pigpiod
|
||||
</code></pre>
|
||||
<p>『オコゲ』を実行するには、アプリケーションメニュー -> プログラミング -> ocoge で起動するか、ターミナルで ocoge と入力します。<br>
|
||||
基本的な使用方法は体験版やプチレッスンのページをご確認ください。</p>
|
||||
<div class="card"><article class="blogcard"><h4 class="blogcard__heading"><a class="blogcard__link" href="/2022-05-07_demo/">『オコゲ』Web 体験版 | おこげ俱楽部</a></h4><img loading="lazy" class="blogcard__image" src="/assets/img/raspberrycake_ogp.webp"><p class="blogcard__description">ブロックプログラミングを体験してみましょう。ハードウェアなどの制限から、Web体験版ではできないこともありますが、感触を確かめることはできます。</p><div class="blogcard__meta"><img loading="lazy" class="blogcard__logo" src="/assets/img/favicon.png"><span class="blogcard__publisher">おこげ俱楽部</span></div></article></div>
|
||||
<div class="card"><article class="blogcard"><h4 class="blogcard__heading"><a class="blogcard__link" href="/2022-05-14_petitlesson-01_typewriter-1/">プチレッスン『タイプライターっぽいもの』その１ | おこげ俱楽部</a></h4><img loading="lazy" class="blogcard__image" src="/assets/img/ogp_typewriter.webp"><p class="blogcard__description">サンプルプログラム「タイプライターもどき」をもうちょっとだけタイプライターっぽくしてみましょう。</p><div class="blogcard__meta"><img loading="lazy" class="blogcard__logo" src="/assets/img/favicon.png"><span class="blogcard__publisher">おこげ俱楽部</span></div></article></div>
|
||||
<h2>制限・制約</h2>
|
||||
<p>『オコゲ』の動作には開発者都合によるいくつかの制限・制約があります。これらに関して今後の変更・改善は予定されておりません。</p>
|
||||
<h3>I2C, シリアル接続は同時に１つまで</h3>
|
||||
<p><img loading="lazy" class="inline" src="/assets/img/block_serial_open.webp" style="height: 32px"> 及び <img loading="lazy" class="inline" src="/assets/img/block_i2c_open.webp" style="height: 32px"> のブロックは同時に１つの機器にしか接続できません。例えば、次のように</p>
|
||||
<figure class="center"><img loading="lazy" src="/assets/img/block_i2c_twin.webp">
|
||||
<figcaption>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>のようなブロックを実行した場合、アドレス 1 のデバイスに接続する前にアドレス 0 のデバイスとは自動的に切断されます。</p>
|
||||
<h3>センサー接続はそれぞれ同時に１つまで</h3>
|
||||
<p>センサーブロックは種類ごとにそれそれ１つまで接続可能です。例えば</p>
|
||||
<figure class="center"><img loading="lazy" src="/assets/img/block_i2c_mix.webp">
|
||||
<figcaption>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>は正常に動きますが、</p>
|
||||
<figure class="center"><img loading="lazy" src="/assets/img/block_bme280_twin.webp">
|
||||
<figcaption>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>は、アドレス 0x76 の機器への接続は自動的に切断され、0x77 への接続だけが残ります。</p>
|
||||
<h2>Tips</h2>
|
||||
<h3>安全な無限ループ</h3>
|
||||
<figure class="center"><img loading="lazy" src="/assets/img/block_infinit_loop.webp">
|
||||
<figcaption>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>上記のような無限ループを作って実行すると『オコゲ』が操作を受け付けなくなります（ウィンドウ右上の[X]ボタンで『オコゲ』アプリ自体を終了することはできます）。これを避けるには、<img loading="lazy" class="inline" src="/assets/img/block_wait_zero.webp" style="height: 32px"> を使って次のようにします。</p>
|
||||
<figure class="center"><img loading="lazy" src="/assets/img/block_safe_loop.webp">
|
||||
<figcaption>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>このようにすることで、可能な限り早くループを回しつつ、ユーザ入力を受け付けるタイミングを確保することができます。</p>
|
||||
<h3>I2C バスの変更</h3>
|
||||
<p>Raspberry Pi のデフォルトの I2C バス１（GPIO2-3）は内部で 1.8kΩ の抵抗によってプルアップされているため、プルアップ内蔵の I2C モジュールの一部が動作しない恐れがあります（<a href="https://akizukidenshi.com/catalog/faq/goodsfaq.aspx?goods=K-06795" target="_new" title="">例 <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>）。<br>
|
||||
実際やってみると大抵はそのままで問題なく動くのですが、内部プルアップされていないピンに I2C を割り当てることで不具合をあらかじめ回避することもできます。当サイトではバス６（GPIO22-23）を使用しています。</p>
|
||||
<p>I2Cバス６を有効化するには、/boot/config.txt に dtoverlay=i2c6,pins_22_23 を追記して再起動します。</p>
|
||||
<pre><code class="language-bash">$ echo 'dtoverlay=i2c6,pins_22_23' | sudo tee -a /boot/config.txt
|
||||
$ sudo reboot
|
||||
</code></pre>
|
||||
<p>※ I2C バス１を使用する場合は、「Raspberry Pi の設定」や raspi-config で「I2C を有効」に設定してください。</p>
|
||||
<p>●『オコゲ』の設定</p>
|
||||
<p>ワークスペース画面でキーボードから「Shift+Ctrl+M」を入力すると、隠されていたメニューバーが表示されます。「Settings」-> 「i2c bus」->「6」を選択し、I2C バスを変更します。</p>
|
||||
<figure class="center"><img loading="lazy" src="/assets/img/i2c-settings.webp">
|
||||
<figcaption>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>もう一度「Shift+Ctrl+M」を入力するとメニューバーが隠れます。</p>
|
||||
<h2>ソースコード</h2>
|
||||
<p>ソースコードは <a href="https://git.ocoge.club/ocoge.club/ocoge" target="_new" title="">ocogIt <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> で公開しています。</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-10">
|
||||
|
||||
<div class="italic text-gray-700">Disqus comments only available for production</div>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</main>
|
||||
<footer class="mt-20 px-10 py-8 bg-gray-200">
|
||||
<div id="footer-badge"><a href="https://git.ocoge.club/" target=_new><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target=_new><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div>
|
||||
<div class="max-w-5xl mx-auto text-gray-700 text-center">
|
||||
© 2023 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>.
|
||||
Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a>
|
||||
using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/assets/js/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', (event) => {
|
||||
document.getElementsByTagName('html')[0].style.display='block';
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,388 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>AQM0802A に文字を表示してみる | おこげ俱楽部</title>
|
||||
<meta name="title" content="AQM0802A に文字を表示してみる | おこげ俱楽部">
|
||||
<meta name="description" content="『ゲーム電卓パイ』プロジェクト～その２：LCD キャラクタディスプレイモジュール AQM0802A を試してみる">
|
||||
<meta name="keywords" content="オコゲ,デスクトップアプリ版,オコゲ,blockly,プログラミング,上野学習塾">
|
||||
<meta name="author" content="ocogeclub">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://ocoge.club/2022-06-21_aqm0802a/">
|
||||
<link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png">
|
||||
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
|
||||
<script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="/assets/floatbox/floatbox.css" />
|
||||
<script src="/assets/floatbox/floatbox.js" defer></script>
|
||||
<link rel="stylesheet" href="/assets/css/ocmain.css">
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/footer.css">
|
||||
<link rel="stylesheet" href="/assets/css/post.css">
|
||||
<meta property="og:image" content="https://ocoge.club/assets/img/ogp_aqm0802a.webp">
|
||||
<meta property="og:title" content="AQM0802A に文字を表示してみる | おこげ俱楽部">
|
||||
<meta property="og:description" content="『ゲーム電卓パイ』プロジェクト～その２：LCD キャラクタディスプレイモジュール AQM0802A を試してみる">
|
||||
<meta property="og:url" content="https://ocoge.club/2022-06-21_aqm0802a/">
|
||||
<meta property="og:site_name" content="おこげ俱楽部">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@ocogeclub">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col h-screen bg-white text-gray-800 break-words">
|
||||
<header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500">
|
||||
<div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between">
|
||||
<div class="sm:mr-8">
|
||||
<a class="flex items-center" href="/">
|
||||
<span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span>
|
||||
</a>
|
||||
</div>
|
||||
<nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0">
|
||||
|
||||
<a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a>
|
||||
|
||||
<a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a>
|
||||
|
||||
<a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud/Mail</a>
|
||||
|
||||
<a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a>
|
||||
|
||||
</nav>
|
||||
<form id="search" action="/search" class="order-last sm:order-none flex-grow items-center justify-end hidden sm:block mt-6 sm:mt-0">
|
||||
<label class="visually-hidden" for="header-searchbox">記事タイトル/概要を検索 ...</label>
|
||||
<input type="text" id="header-searchbox" name="q" placeholder="記事タイトル/概要を検索 ..." class="w-full sm:max-w-xs bg-gray-200 border border-transparent float-right focus:bg-white focus:border-gray-300 focus:outline-none h-8 p-4 placeholder-gray-500 rounded text-gray-700 text-sm">
|
||||
</form>
|
||||
<div id="menu-toggle" class="flex items-center md:hidden text-gray-700 hover:text-teal-600 cursor-pointer sm:ml-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-7 lg:mx-6 mt-32 flex-grow">
|
||||
|
||||
|
||||
<article class="max-w-5xl mx-auto">
|
||||
<header class="mb-14">
|
||||
<h1 class="text-3xl text-center font-bold leading-normal text-gray-900 mt-0 mb-3">AQM0802A に文字を表示してみる</h1>
|
||||
<div class="text-center"><i class="fa-regular fa-clock"></i> 2022年6月21日</div>
|
||||
|
||||
<div class="mt-3 text-center">
|
||||
|
||||
<a href="/tags/オコゲ" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#オコゲ</a>
|
||||
|
||||
<a href="/tags/デスクトップアプリ版" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#デスクトップアプリ版</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-10 -mx-7 md:mx-0">
|
||||
<img class="w-full max-w-2xl mx-auto" src="/assets/img/ogp_aqm0802a.webp" alt="This post thumbnail">
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div id="content" class="prose text-gray-800 max-w-none">
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p>ミミィ</p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
とにかく試しに動かしてみるわよ！<br>
|
||||
考えてるヒマがあったら手を動かすのよ手を！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p>タマちー</p>
|
||||
</div><div class="chatting">
|
||||
<div class="says">
|
||||
１行目に「ocoge」、２行目に「club」と表示してみよう・・・
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_stripe"><p>手順説明の下に『オコゲ』のブロックで組み立てたプログラムコードを畳んで置いてあります。クリックすると開きます。</p></div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
それとこの先の説明では16進数と2進数が何の説明もなく出てくるわ！<br>
|
||||
気になる人は <a href="https://wa3.i-3-i.info/word1610.html" target="_new" title="">16進数 <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>, <a href="https://wa3.i-3-i.info/word1606.html" target="_new" title="">2進数 <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> あたりを見てネ！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div> <div class="chatting">
|
||||
<div class="think-l-bal-s"></div>
|
||||
<div class="think-l-bal-l"></div>
|
||||
<div class="tamathink">
|
||||
<p>
|
||||
【<a href="https://wa3.i-3-i.info/index.html" target="_new" title="">「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>】<br>
|
||||
ユルくて好き・・・
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2>I2C アドレス</h2>
|
||||
<p>次のコマンドで確認します。</p>
|
||||
<pre><code class="language-bash">$ i2cdetect -y 6
|
||||
0 1 2 3 4 5 6 7 8 9 a b c d e f
|
||||
00: -- -- -- -- -- -- -- --
|
||||
10: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
|
||||
20: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
|
||||
30: -- -- -- -- -- -- -- -- -- -- -- -- -- -- 3e --
|
||||
40: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
|
||||
50: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
|
||||
60: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
|
||||
70: -- -- -- -- -- -- -- --
|
||||
</code></pre>
|
||||
<p>AQM0802A の I2C アドレスは 0x3e と分かりました。</p>
|
||||
<details class="lesson">
|
||||
<summary class="blockprogram"> <i class="fa-solid fa-computer-mouse"></i> 『オコゲ』ブロックプログラム：I2C デバイスを開く</summary>
|
||||
<div class="lesson"><div class="slide">
|
||||
<figure class="center"><img loading="lazy" src="/assets/img/game-dentak_i2copen.webp">
|
||||
<figcaption>
|
||||
GPIO を有効にして I2C デバイスに接続する
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>デバイスに限らず、何かに接続して使用可能な状態にすることをコンピュータ用語では「開く (open)」と表現します。</p>
|
||||
</div></div>
|
||||
</details>
|
||||
<h2>コマンド書き込み</h2>
|
||||
<p>レジスタ 0x00 にコマンドコード（１バイト）を書き込むことで、AQM0802A にコマンド（命令）を送信することができます。</p>
|
||||
<details class="lesson">
|
||||
<summary class="blockprogram"> <i class="fa-solid fa-computer-mouse"></i> 『オコゲ』ブロックプログラム：コマンドを書き込む</summary>
|
||||
<div class="lesson"><div class="slide">
|
||||
繰り返し使用するプログラムなので、関数として分離しておきます。
|
||||
<figure class="center"><img loading="lazy" src="/assets/img/game-dentak_func-command.webp">
|
||||
<figcaption>
|
||||
コマンド書き込み関数
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>コマンド書き込み毎に待ち時間が必要です。待ち時間の長さはコマンドの種類によって若干の違いがあるようですが、ここでは無視して１００分の１秒で統一します。</p>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
ちゃんと動いているから大丈夫！<br>
|
||||
たぶん！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
</details>
|
||||
<h2>データ書き込み</h2>
|
||||
<p>レジスタ 0x40 にバイトコードを書き込むことで、AQM0802A 内蔵の RAM (DDRAM/CGRAM) にデータを書き込むことができます。DDRAM にデータを書き込むと画面に文字を表示することができます。CGRAM は自作文字のデータを登録しておくことができます。</p>
|
||||
<details class="lesson">
|
||||
<summary class="blockprogram"> <i class="fa-solid fa-computer-mouse"></i> 『オコゲ』ブロックプログラム：データを書き込む</summary>
|
||||
<div class="lesson"><div class="slide">
|
||||
こちらも繰り返し使用するので関数にしておきます。
|
||||
<figure class="center"><img loading="lazy" src="/assets/img/game-dentak_func-data.webp">
|
||||
<figcaption>
|
||||
データ書き込み関数
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div></div>
|
||||
</details>
|
||||
<h2>初期化</h2>
|
||||
<p><a href="https://akizukidenshi.com/download/ds/xiamen/AQM0802.pdf" target="_new" title="">秋月電子のデータシート <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>に従って初期化します。</p>
|
||||
<p>以下のコマンドコードを、順にレジスタ 0x00 に書き込みます。</p>
|
||||
<ol>
|
||||
<li>0x38 (機能設定：表示行数とか文字の大きさとか)</li>
|
||||
<li>0x39 (拡張コマンドモード開始)</li>
|
||||
<li>0x14 (内蔵発振器周波数)</li>
|
||||
<li>0x70 (コントラスト)</li>
|
||||
<li>0x56 (3V動作)</li>
|
||||
<li>0x6c (フォロワ回路のオンオフと増幅率)</li>
|
||||
<li>0x38 (拡張コマンドモード終了)</li>
|
||||
<li>0x0c (ディスプレイオン・カーソルオフ)</li>
|
||||
<li>0x01 (ディスプレイクリア)</li>
|
||||
</ol>
|
||||
<details class="lesson">
|
||||
<summary class="blockprogram"> <i class="fa-solid fa-computer-mouse"></i> 『オコゲ』ブロックプログラム：AQM0802A を初期化</summary>
|
||||
<div class="lesson"><div class="slide">
|
||||
<figure class="center"><img loading="lazy" src="/assets/img/game-dentak_init.webp">
|
||||
<figcaption>
|
||||
初期化手順
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div></div>
|
||||
</details>
|
||||
<h2>文字表示</h2>
|
||||
<p>DDRAM にデータを書き込むと画面に文字を表示します。</p>
|
||||
<h3>DDRAM アドレスを指定</h3>
|
||||
<p>文字を表示するディスプレイ上の位置（２行目の３文字目とか）を指定します。</p>
|
||||
<p>（データシートコマンドコード表より）</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Instruction</th>
|
||||
<th style="text-align:center">DB7</th>
|
||||
<th style="text-align:center">DB6</th>
|
||||
<th style="text-align:center">DB5</th>
|
||||
<th style="text-align:center">DB4</th>
|
||||
<th style="text-align:center">DB3</th>
|
||||
<th style="text-align:center">DB2</th>
|
||||
<th style="text-align:center">DB1</th>
|
||||
<th style="text-align:center">DB0</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Set DDRAM address</td>
|
||||
<td style="text-align:center">1</td>
|
||||
<td style="text-align:center">AC6</td>
|
||||
<td style="text-align:center">AC5</td>
|
||||
<td style="text-align:center">AC4</td>
|
||||
<td style="text-align:center">AC3</td>
|
||||
<td style="text-align:center">AC2</td>
|
||||
<td style="text-align:center">AC1</td>
|
||||
<td style="text-align:center">AC0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>データシートではコマンドは8桁（8ビット）の2進数で書かれています。それぞれのビットに役割があり、最上位ビットを立てると DDRAM アドレス指定コマンドとして働きます。残りの７ビットでアドレス値を指定します。DDRAM アドレス値と表示位置の対応は次の通りです。（横の〇文字目を便宜上「列」と表現することにします）</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align:center"></th>
|
||||
<th style="text-align:center">1列目</th>
|
||||
<th style="text-align:center">2列目</th>
|
||||
<th style="text-align:center">3列目</th>
|
||||
<th style="text-align:center">4列目</th>
|
||||
<th style="text-align:center">5列目</th>
|
||||
<th style="text-align:center">6列目</th>
|
||||
<th style="text-align:center">7列目</th>
|
||||
<th style="text-align:center">8列目</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="text-align:center">１行目</td>
|
||||
<td style="text-align:center">0x00</td>
|
||||
<td style="text-align:center">0x01</td>
|
||||
<td style="text-align:center">0x02</td>
|
||||
<td style="text-align:center">0x03</td>
|
||||
<td style="text-align:center">0x04</td>
|
||||
<td style="text-align:center">0x05</td>
|
||||
<td style="text-align:center">0x06</td>
|
||||
<td style="text-align:center">0x07</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:center">２行目</td>
|
||||
<td style="text-align:center">0x40</td>
|
||||
<td style="text-align:center">0x41</td>
|
||||
<td style="text-align:center">0x42</td>
|
||||
<td style="text-align:center">0x43</td>
|
||||
<td style="text-align:center">0x44</td>
|
||||
<td style="text-align:center">0x45</td>
|
||||
<td style="text-align:center">0x46</td>
|
||||
<td style="text-align:center">0x47</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>以上から、ディスプレイ上の文字表示位置を指定するには以下のようにします。</p>
|
||||
<ul>
|
||||
<li>レジスタ 0x00 に、「0x80（最上位ビット） +（上の表のアドレス値）」を書き込む</li>
|
||||
</ul>
|
||||
<h3>文字表示</h3>
|
||||
<p>DDRAM アドレス指定コマンドを書き込んだのちにデータ書き込みを行うことで、指定した位置に文字を表示することができます。文字コードは以下の通りです。</p>
|
||||
<figure style="max-width: 400px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/game-dentak_character-patterns.webp" title="キャラクターパターン表"><img loading="lazy" src="/assets/img/game-dentak_character-patterns.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>コード <code>0010 0000</code> からコード <code>0111 1101</code> まで、すなわちキーボードで入力できる半角（1バイト）の英数字・記号の大部分は UTF-8 (ascii) のコードと一致していますので、表示したい文字列がこの範囲内であれば、そのままデータとして（レジスタ 0x40 へ）書き込めば良いでしょう。</p>
|
||||
<details class="lesson">
|
||||
<summary class="blockprogram"> <i class="fa-solid fa-computer-mouse"></i> 『オコゲ』ブロックプログラム：AQM0802A に文字を表示する</summary>
|
||||
<div class="lesson"><div class="slide">
|
||||
行と列を指定して文字列表示を行う関数を作成しましょう。
|
||||
<figure style="max-width: 800px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/game-dentak_func-dispchars.webp" title="文字列表示関数"><img loading="lazy" src="/assets/img/game-dentak_func-dispchars.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> 文字列表示関数
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>「行」と「列」は、内部的には０（ゼロ）から始まる数え方をするので、それぞれ１を引きます。</p>
|
||||
<p>大文字・小文字・記号などがちゃんと表示されるかどうか、表示位置指定の確認も含めて、１行目に「{ocoge}」、２行目は右に３文字ずらして４文字目から「CLUB!」と５秒間表示することにしましょう。</p>
|
||||
<figure class="center"><img loading="lazy" src="/assets/img/game-dentak_call-dispchars.webp">
|
||||
<figcaption>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>最後に、ディスプレイをオフにしてデバイスとの接続を切るなど後片付けをします。ディスプレイの表示をオフにするにはコマンド <code>0x08</code> を書き込みます。</p>
|
||||
<figure class="center"><img loading="lazy" src="/assets/img/game-dentak_okatazuke.webp">
|
||||
<figcaption>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div></div>
|
||||
</details>
|
||||
<h2>まとめ</h2>
|
||||
<p>今回作成したプログラムはこのようになりました。</p>
|
||||
<figure style="max-width: 400px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/game-dentak_display-characters.webp" title="AQM0802A に文字を表示してみるプログラム"><img loading="lazy" src="/assets/img/game-dentak_display-characters.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> AQM0802A に文字を表示してみるプログラム
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure style="max-width: 200px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/game-dentak_display-characters-result.webp" title="AQM0802A に文字を表示してみた結果"><img loading="lazy" src="/assets/img/game-dentak_display-characters-result.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> 実行結果
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>バックライトは点灯させていません。期待通りの動作をしているようです。メデタシ。<br>
|
||||
次回はゲームのルール確認と自作文字（UFO と残機表示）の作成をしましょう。</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-10">
|
||||
|
||||
<div class="italic text-gray-700">Disqus comments only available for production</div>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</main>
|
||||
<footer class="mt-20 px-10 py-8 bg-gray-200">
|
||||
<div id="footer-badge"><a href="https://git.ocoge.club/" target=_new><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target=_new><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div>
|
||||
<div class="max-w-5xl mx-auto text-gray-700 text-center">
|
||||
© 2023 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>.
|
||||
Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a>
|
||||
using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/assets/js/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', (event) => {
|
||||
document.getElementsByTagName('html')[0].style.display='block';
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,256 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>海外からいろいろ届いたよ | おこげ俱楽部</title>
|
||||
<meta name="title" content="海外からいろいろ届いたよ | おこげ俱楽部">
|
||||
<meta name="description" content="RP2040 ベースのマイクロコントローラユニットをいくつか買ってみました。">
|
||||
<meta name="keywords" content="RP2040,Pico,オコゲ,blockly,プログラミング,上野学習塾">
|
||||
<meta name="author" content="ocogeclub">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://ocoge.club/2022-07-26_rp2040/">
|
||||
<link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png">
|
||||
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
|
||||
<script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="/assets/floatbox/floatbox.css" />
|
||||
<script src="/assets/floatbox/floatbox.js" defer></script>
|
||||
<link rel="stylesheet" href="/assets/css/ocmain.css">
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/footer.css">
|
||||
<link rel="stylesheet" href="/assets/css/post.css">
|
||||
<meta property="og:image" content="https://ocoge.club/assets/img/ogp_rp2040boards.webp">
|
||||
<meta property="og:title" content="海外からいろいろ届いたよ | おこげ俱楽部">
|
||||
<meta property="og:description" content="RP2040 ベースのマイクロコントローラユニットをいくつか買ってみました。">
|
||||
<meta property="og:url" content="https://ocoge.club/2022-07-26_rp2040/">
|
||||
<meta property="og:site_name" content="おこげ俱楽部">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@ocogeclub">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col h-screen bg-white text-gray-800 break-words">
|
||||
<header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500">
|
||||
<div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between">
|
||||
<div class="sm:mr-8">
|
||||
<a class="flex items-center" href="/">
|
||||
<span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span>
|
||||
</a>
|
||||
</div>
|
||||
<nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0">
|
||||
|
||||
<a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a>
|
||||
|
||||
<a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a>
|
||||
|
||||
<a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud/Mail</a>
|
||||
|
||||
<a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a>
|
||||
|
||||
</nav>
|
||||
<form id="search" action="/search" class="order-last sm:order-none flex-grow items-center justify-end hidden sm:block mt-6 sm:mt-0">
|
||||
<label class="visually-hidden" for="header-searchbox">記事タイトル/概要を検索 ...</label>
|
||||
<input type="text" id="header-searchbox" name="q" placeholder="記事タイトル/概要を検索 ..." class="w-full sm:max-w-xs bg-gray-200 border border-transparent float-right focus:bg-white focus:border-gray-300 focus:outline-none h-8 p-4 placeholder-gray-500 rounded text-gray-700 text-sm">
|
||||
</form>
|
||||
<div id="menu-toggle" class="flex items-center md:hidden text-gray-700 hover:text-teal-600 cursor-pointer sm:ml-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-7 lg:mx-6 mt-32 flex-grow">
|
||||
|
||||
|
||||
<article class="max-w-5xl mx-auto">
|
||||
<header class="mb-14">
|
||||
<h1 class="text-3xl text-center font-bold leading-normal text-gray-900 mt-0 mb-3">海外からいろいろ届いたよ</h1>
|
||||
<div class="text-center"><i class="fa-regular fa-clock"></i> 2022年7月26日</div>
|
||||
|
||||
<div class="mt-3 text-center">
|
||||
|
||||
<a href="/tags/RP2040" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#RP2040</a>
|
||||
|
||||
<a href="/tags/Pico" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#Pico</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-10 -mx-7 md:mx-0">
|
||||
<img class="w-full max-w-2xl mx-auto" src="/assets/img/ogp_rp2040boards.webp" alt="This post thumbnail">
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div id="content" class="prose text-gray-800 max-w-none">
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p>ミミィ</p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
ちょっとRP2040マイクロコントローラユニット (MCU) を色々買ってみたワ！<br>
|
||||
RP2040 はラズベリーパイ財団が開発したマイクロコントローラで、Raspberry Pi Pico に搭載されているものヨ！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<blockquote>
|
||||
<p>マイクロコントローラとは、CPU(Central Processing Unit：中央処理装置)とメモリ等の周辺機能が１チップに集積された半導体の一つです。日本では、「マイコン」と呼ばれることもありますが、海外では通じない事が多いです。CPUは、ソフトウェアによるプログラムに従い演算や制御を行います。そのためにプログラムを格納するROMや演算データを一時記憶するRAMなどのメモリが周辺機能として内蔵されることが多く、その他にタイマやADコンバータと呼ばれる様々な機能も追加され現在では家電やOA機器、車載など多くのアプリケーションに採用されています。<a href="https://www.epson.jp/prod/semicon/products/micro_controller/about_mcu1.htm" target="_new" title="EPSON">マイクロコントローラ（MCU）とは？ - エプソン <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></p>
|
||||
</blockquote>
|
||||
<figure class="center"><img loading="lazy" src="/assets/img/rp2040boards.webp">
|
||||
<figcaption>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>MCU</th>
|
||||
<th>フラッシュ</th>
|
||||
<th>ピン数</th>
|
||||
<th>外寸<sup>1</sup></th>
|
||||
<th>USB</th>
|
||||
<th>価格</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td><a href="https://www.raspberrypi.com/documentation/microcontrollers/raspberry-pi-pico.html" target="_new" title="Raspberry Pi Foundation">Raspberry Pi Pico <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
<td>2MB</td>
|
||||
<td>20x2+3</td>
|
||||
<td>51×21mm</td>
|
||||
<td>micro</td>
|
||||
<td>527円<sup>2</sup></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Raspberry Pi Pico W</td>
|
||||
<td>2MB</td>
|
||||
<td>20x2+3</td>
|
||||
<td>51×21mm</td>
|
||||
<td>micro</td>
|
||||
<td>810円<sup>2</sup></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td><a href="https://www.waveshare.com/rp2040-zero.htm" target="_new" title="WAVESHSRE">Waveshare RP2040-Zero <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
<td>2MB</td>
|
||||
<td>9x2+5</td>
|
||||
<td>23.5x18mm</td>
|
||||
<td>Type-C</td>
|
||||
<td>517円<sup>3</sup></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td><a href="https://shop.pimoroni.com/products/tiny-2040?variant=39560012234835" target="_new" title="海賊ロボ忍者さる">PIMORONI Tiny 2040 <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
<td>8MB<sup>4</sup></td>
|
||||
<td>8x2+3</td>
|
||||
<td>21x18mm</td>
|
||||
<td>Type-C</td>
|
||||
<td>1,134円<sup>2</sup></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>RP2040 Black Board New Type</td>
|
||||
<td>4MB<sup>5</sup></td>
|
||||
<td>20x2+4</td>
|
||||
<td>53x23mm</td>
|
||||
<td>Type-C</td>
|
||||
<td>405円<sup>3</sup></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p><small id="1">1. 基板部のみの大きさ</small><br>
|
||||
<small id="2">2. PIMORONIの日本円表示価格 (送料別 - 小物なので800円くらい)</small><br>
|
||||
<small id="3">3. AliExpressの価格 (送料込・当方購入時の最低価格)</small><br>
|
||||
<small id="4">4. 2MB版もある</small><br>
|
||||
<small id="5">5. 16MB版もある (700円くらい) </small></p>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p>タマちー</p>
|
||||
</div><div class="chatting">
|
||||
<div class="says">
|
||||
1,2 はオリジナル、4 はイギリスの有名ベンダーの製品、3,5 は中華製なの・・・
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
中華製品は基盤の仕上げとか動作のクセとか、些細なところで大きなストレスを与えてくるのよネ！
|
||||
本質と違うところで苦労したくなければ中華は避けるべきヨ！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div> <div class="chatting">
|
||||
<div class="think-l-bal-s"></div>
|
||||
<div class="think-l-bal-l"></div>
|
||||
<div class="tamathink">
|
||||
<p>
|
||||
ヘンなモジュールで安く遊びたい変態さんには中華製超オススメ・・・
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
アンタ・・・
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_stripe"><p>
|
||||
ただ、オリジナルの Pico に全く問題がないのかというとそうでもなく、例えばリセットボタンがない、基盤の上面にピン番号が印刷されていない、USB 端子形状が micro USB であるなど、使い勝手の悪い部分があります。まあこの辺りは Raspberry Pi コンピュータも同様なので、そういう思想なのでしょう。<br>
|
||||
そういうわけで、現在当方では小さいサイズに Tiny 2040 、普通サイズに RP2040 Black Board New Type を使用中。どちらも、リセットボタン、ピン番号のシルク印刷、USB Type-C、大容量のフラッシュメモリ、フルカラーLED搭載。加えて後者は送込み400円のお陰で、やらかしてしまっても怖くないのがイイ。
|
||||
</p></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-10">
|
||||
|
||||
<div class="italic text-gray-700">Disqus comments only available for production</div>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</main>
|
||||
<footer class="mt-20 px-10 py-8 bg-gray-200">
|
||||
<div id="footer-badge"><a href="https://git.ocoge.club/" target=_new><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target=_new><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div>
|
||||
<div class="max-w-5xl mx-auto text-gray-700 text-center">
|
||||
© 2023 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>.
|
||||
Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a>
|
||||
using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/assets/js/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', (event) => {
|
||||
document.getElementsByTagName('html')[0].style.display='block';
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>ジェスチャーセンサ PAJ7620 を試す | おこげ俱楽部</title>
|
||||
<meta name="title" content="ジェスチャーセンサ PAJ7620 を試す | おこげ俱楽部">
|
||||
<meta name="description" content="ちょっと楽しそうなハンドジェスチャセンサモジュール PAJ7620 を入手したので、『オコゲ』を使って遊んでみました。">
|
||||
<meta name="keywords" content="オコゲ,デスクトップアプリ版,センサー,動画,オコゲ,blockly,プログラミング,上野学習塾">
|
||||
<meta name="author" content="ocogeclub">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://ocoge.club/2022-08-03_paj7620/">
|
||||
<link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png">
|
||||
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
|
||||
<script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="/assets/floatbox/floatbox.css" />
|
||||
<script src="/assets/floatbox/floatbox.js" defer></script>
|
||||
<link rel="stylesheet" href="/assets/css/ocmain.css">
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/footer.css">
|
||||
<link rel="stylesheet" href="/assets/css/post.css">
|
||||
<meta property="og:image" content="https://ocoge.club/assets/img/ogp_paj7620.webp">
|
||||
<meta property="og:title" content="ジェスチャーセンサ PAJ7620 を試す | おこげ俱楽部">
|
||||
<meta property="og:description" content="ちょっと楽しそうなハンドジェスチャセンサモジュール PAJ7620 を入手したので、『オコゲ』を使って遊んでみました。">
|
||||
<meta property="og:url" content="https://ocoge.club/2022-08-03_paj7620/">
|
||||
<meta property="og:site_name" content="おこげ俱楽部">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@ocogeclub">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col h-screen bg-white text-gray-800 break-words">
|
||||
<header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500">
|
||||
<div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between">
|
||||
<div class="sm:mr-8">
|
||||
<a class="flex items-center" href="/">
|
||||
<span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span>
|
||||
</a>
|
||||
</div>
|
||||
<nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0">
|
||||
|
||||
<a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a>
|
||||
|
||||
<a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a>
|
||||
|
||||
<a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud/Mail</a>
|
||||
|
||||
<a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a>
|
||||
|
||||
</nav>
|
||||
<form id="search" action="/search" class="order-last sm:order-none flex-grow items-center justify-end hidden sm:block mt-6 sm:mt-0">
|
||||
<label class="visually-hidden" for="header-searchbox">記事タイトル/概要を検索 ...</label>
|
||||
<input type="text" id="header-searchbox" name="q" placeholder="記事タイトル/概要を検索 ..." class="w-full sm:max-w-xs bg-gray-200 border border-transparent float-right focus:bg-white focus:border-gray-300 focus:outline-none h-8 p-4 placeholder-gray-500 rounded text-gray-700 text-sm">
|
||||
</form>
|
||||
<div id="menu-toggle" class="flex items-center md:hidden text-gray-700 hover:text-teal-600 cursor-pointer sm:ml-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-7 lg:mx-6 mt-32 flex-grow">
|
||||
|
||||
|
||||
<article class="max-w-5xl mx-auto">
|
||||
<header class="mb-14">
|
||||
<h1 class="text-3xl text-center font-bold leading-normal text-gray-900 mt-0 mb-3">ジェスチャーセンサ PAJ7620 を試す</h1>
|
||||
<div class="text-center"><i class="fa-regular fa-clock"></i> 2022年8月3日</div>
|
||||
|
||||
<div class="mt-3 text-center">
|
||||
|
||||
<a href="/tags/オコゲ" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#オコゲ</a>
|
||||
|
||||
<a href="/tags/デスクトップアプリ版" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#デスクトップアプリ版</a>
|
||||
|
||||
<a href="/tags/センサー" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#センサー</a>
|
||||
|
||||
<a href="/tags/動画" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#動画</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-10 -mx-7 md:mx-0">
|
||||
<img class="w-full max-w-2xl mx-auto" src="/assets/img/ogp_paj7620.webp" alt="This post thumbnail">
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div id="content" class="prose text-gray-800 max-w-none">
|
||||
<div class="box_stripe"><p>ちょっと楽しそうなハンドジェスチャセンサモジュール PAJ7620 を入手したので、『オコゲ』を使って遊んでみました。</p></div>
|
||||
<h2>PAJ7620 概要</h2>
|
||||
<ul>
|
||||
<li>9種類のジェスチャーを認識（上下左右、前後、時計回り・反時計回り、波）</li>
|
||||
<li>I2C インターフェース</li>
|
||||
<li>動作電圧：3.3V</li>
|
||||
<li>検出範囲：5～10cm</li>
|
||||
<li><a href="https://wiki.seeedstudio.com/Grove-Gesture_v1.0/#resources" target="_new" title="">データシート <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></li>
|
||||
</ul>
|
||||
<h2>配線</h2>
|
||||
<figure style="max-width: 200px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/paj7620.webp" title="ジェスチャーセンサー配線"><img loading="lazy" src="/assets/img/paj7620.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p>VIN→3.3V<br>
|
||||
GND→GND<br>
|
||||
SDA→GPIO2<br>
|
||||
SCL→GPIO3<br>
|
||||
INT→オープン</p>
|
||||
<h2>Raspberry Pi の設定</h2>
|
||||
<p><span style="font-size: 20px; color: #ff0000"><i class="fab fa-raspberry-pi"></i></span>メニュー→設定→Raspberry Piの設定→「インターフェース」タブで I2C を有効にしておく</p>
|
||||
<h2>『オコゲ』プログラム</h2>
|
||||
<figure style="max-width: 400px; margin: 0 auto;"><div class="floatbox"
|
||||
data-fb-options="colorTheme:silver" style="width: 100%;">
|
||||
<a href="/assets/img/gesture_blockprg.webp" title="『オコゲ』ブロックプログラム"><img loading="lazy" src="/assets/img/gesture_blockprg.webp" style="width: 100%;"></a></div>
|
||||
<figcaption>
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
</figcaption>
|
||||
</figure>
|
||||
<h3>動画サンプル</h3>
|
||||
<p>PAJ7620を『オコゲ』で使用している動画です。<br>
|
||||
※ 古い動画なので現在の『オコゲ』とは見た目が色々と異なっています。ご了承ください。</p>
|
||||
<figure class="youtube"><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/-JwvqsHIYU0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<figcaption>
|
||||
ジェスチャーセンサ PAJ7620 を試す
|
||||
</figcaption></figure>
|
||||
<p>いろいろ遊べそうな雰囲気。Raspberry Pi Zero をネットラジオ再生専用機にしたりしているので、ジェスチャ対応にしてみたら面白いかもしれない。</p>
|
||||
<p><span class="tsubuyaki">昔見たイギリス製SFテレビドラマ「SPACE: 1999」を思い出した。「The Last Enemy（邦題：宇宙戦艦ミサイル発射！）」というエピソードで、その宇宙戦艦「 サタゼウス 」のコントロールパネルがまさにこんな感じの非接触式ジェスチャ操作で、当時その未来的な雰囲気がチョーカッコイイと感じたのを覚えている。今見るとこれはこれで「レトロ未来感」が逆にカッコイイのだが。
|
||||
関係ないけどサタゼウスの乗組員が全員女性（全員女性の惑星と全員男性の惑星が戦争しているという設定w）で、これまた<a href="https://www.imdb.com/title/tt0706347/mediaviewer/rm1324681984" target="_new" title="IMBD">カッコイイ <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>のだった。リンク先の写真の直後、戦艦が爆破されてみんな死んじゃうけど。敵だったからネ</span></p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-10">
|
||||
|
||||
<div class="italic text-gray-700">Disqus comments only available for production</div>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</main>
|
||||
<footer class="mt-20 px-10 py-8 bg-gray-200">
|
||||
<div id="footer-badge"><a href="https://git.ocoge.club/" target=_new><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target=_new><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div>
|
||||
<div class="max-w-5xl mx-auto text-gray-700 text-center">
|
||||
© 2023 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>.
|
||||
Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a>
|
||||
using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/assets/js/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', (event) => {
|
||||
document.getElementsByTagName('html')[0].style.display='block';
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,249 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>おこげ倶楽部自宅サーバについて | おこげ俱楽部</title>
|
||||
<meta name="title" content="おこげ倶楽部自宅サーバについて | おこげ俱楽部">
|
||||
<meta name="description" content="ocoge.club は Raspberry Pi 自宅サーバにてホスティングされています。Webサーバ、メールサーバ稼働中。さらに...">
|
||||
<meta name="keywords" content="技術情報,オコゲ,blockly,プログラミング,上野学習塾">
|
||||
<meta name="author" content="ocogeclub">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://ocoge.club/2023-03-22_server/">
|
||||
<link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png">
|
||||
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
|
||||
<script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="/assets/floatbox/floatbox.css" />
|
||||
<script src="/assets/floatbox/floatbox.js" defer></script>
|
||||
<link rel="stylesheet" href="/assets/css/ocmain.css">
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/footer.css">
|
||||
<link rel="stylesheet" href="/assets/css/post.css">
|
||||
<meta property="og:image" content="https://ocoge.club/assets/img/opi-server.webp">
|
||||
<meta property="og:title" content="おこげ倶楽部自宅サーバについて | おこげ俱楽部">
|
||||
<meta property="og:description" content="ocoge.club は Raspberry Pi 自宅サーバにてホスティングされています。Webサーバ、メールサーバ稼働中。さらに...">
|
||||
<meta property="og:url" content="https://ocoge.club/2023-03-22_server/">
|
||||
<meta property="og:site_name" content="おこげ俱楽部">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@ocogeclub">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col h-screen bg-white text-gray-800 break-words">
|
||||
<header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500">
|
||||
<div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between">
|
||||
<div class="sm:mr-8">
|
||||
<a class="flex items-center" href="/">
|
||||
<span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span>
|
||||
</a>
|
||||
</div>
|
||||
<nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0">
|
||||
|
||||
<a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a>
|
||||
|
||||
<a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a>
|
||||
|
||||
<a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud/Mail</a>
|
||||
|
||||
<a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a>
|
||||
|
||||
</nav>
|
||||
<form id="search" action="/search" class="order-last sm:order-none flex-grow items-center justify-end hidden sm:block mt-6 sm:mt-0">
|
||||
<label class="visually-hidden" for="header-searchbox">記事タイトル/概要を検索 ...</label>
|
||||
<input type="text" id="header-searchbox" name="q" placeholder="記事タイトル/概要を検索 ..." class="w-full sm:max-w-xs bg-gray-200 border border-transparent float-right focus:bg-white focus:border-gray-300 focus:outline-none h-8 p-4 placeholder-gray-500 rounded text-gray-700 text-sm">
|
||||
</form>
|
||||
<div id="menu-toggle" class="flex items-center md:hidden text-gray-700 hover:text-teal-600 cursor-pointer sm:ml-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-7 lg:mx-6 mt-32 flex-grow">
|
||||
|
||||
|
||||
<article class="max-w-5xl mx-auto">
|
||||
<header class="mb-14">
|
||||
<h1 class="text-3xl text-center font-bold leading-normal text-gray-900 mt-0 mb-3">おこげ倶楽部自宅サーバについて</h1>
|
||||
<div class="text-center"><i class="fa-regular fa-clock"></i> 2023年3月22日</div>
|
||||
|
||||
<div class="mt-3 text-center">
|
||||
|
||||
<a href="/tags/技術情報" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#技術情報</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-10 -mx-7 md:mx-0">
|
||||
<img class="w-full max-w-2xl mx-auto" src="/assets/img/opi-server.webp" alt="This post thumbnail">
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div id="content" class="prose text-gray-800 max-w-none">
|
||||
<div class="box_stripe"><p>唐突ですが「<span class="mfb">押し入れで眠っている RPi を活用しようプロジェクト</span>」の一環として、ocoge.club のウェブサーバマシンは Raspberry Pi 3B+ へ変更となりました。</p></div>
|
||||
<p>ocoge.club は Raspberry Pi 自宅サーバ（上写真）にてホスティングされています。現在 Webサーバ、メールサーバが稼働しています。また、別マシン <a href="http://www.orangepi.org/html/hardWare/computerAndMicrocontrollers/details/orange-pi-3-LTS.html" target="_new" title="Orange Pi 3 LTS">Orange Pi 3 LTS <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> にクラウドサーバを入れてリバースプロキシを通した２台体制で運用しています。数千円で<s>購入できる</s>手のひらサイズのシングルボードコンピュータと3千円程度のSSDを使ってなかなか充実したネットサービスごっこwができます。</p>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p>タマちー</p>
|
||||
</div><div class="chatting">
|
||||
<div class="says">
|
||||
「おこげ俱楽部」は、軽量多目的 <s>Raspberry Pi</s> <a href="http://www.orangepi.org/" target="_new" title="Orange Pi">Orange Pi <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> サーバーとして絶賛改装中です...。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p>ミミィ</p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
市場でラズパイが枯渇している関係で、サーバのハードウェアを 4B(4GB) から、現状最も手に入りやすい中華<s>パチモン</s> <span title="シングルボードコンピュータ">SBC</span> の Orange Pi に変更したのよね！軽量化のために<span class="mfy"><a href="https://ja.wordpress.org" target="_new" title="シェア世界一の CMS">WordPress <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></span> をやめて <span class="mfg"><a href="https://jamstack.org" target="_new" title="ちょっと何言ってるか分からない">Jamstack <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></span> にするとかの対応中ヨ！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div> <div class="chatting">
|
||||
<div class="think-l-bal-s"></div>
|
||||
<div class="think-l-bal-l"></div>
|
||||
<div class="tamathink">
|
||||
<p>
|
||||
らずぱい売ってない... 困る...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
RSコンポーネンツの通販サイトに「11月入荷」とか書いてあるのよ！<br>
|
||||
鬼も笑えないわ！！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<h2>ハードウェア構成</h2>
|
||||
<ul>
|
||||
<li><a href="http://www.orangepi.org/Orange%20Pi%203%20LTS/index.html" target="_new" title="">Orange Pi 3 LTS <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></li>
|
||||
<li>Crucial SSD 120GB 2.5インチ (CT120BX500SSD1JP)</li>
|
||||
<li>Salcar USB-C 2.5インチ SATA HDD/SSDケース</li>
|
||||
</ul>
|
||||
<p>ケースは RPi 用を流用。ネジ穴が合わなかったので百均の耐震マットを小さく切って貼り付け。</p>
|
||||
<h2>ソフトウェア構成</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>種類</th>
|
||||
<th>名称</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>OS</td>
|
||||
<td><a href="http://www.orangepi.org/downloadresources/" target="_new" title="">Orange Pi3 LTS Debian Buster Server <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Webサーバ</td>
|
||||
<td><a href="https://nginx.org/en/" target="_new" title="">Nginx <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>サーバサイドインタプリタ</td>
|
||||
<td><a href="https://www.php.net/" target="_new" title="">PHP <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>データベース</td>
|
||||
<td><a href="https://www.sqlite.org/index.html" target="_new" title="">SQLite3 <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>メールサーバ (MTA)</td>
|
||||
<td><a href="http://www.postfix.org/" target="_new" title="">Postfix <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Webメールクライアント</td>
|
||||
<td><a href="https://www.rainloop.net/" target="_new" title="">Rainloop <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>POP/IMAP サーバ</td>
|
||||
<td><a href="https://www.dovecot.org/" target="_new" title="">Dovecot <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Git サーバ</td>
|
||||
<td><a href="https://gitea.io/" target="_new" title="">Gitea <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>このほか、スパムメール対策に <a href="https://spamassassin.apache.org/" target="_new" title="">SpamAssasin <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> であるとか証明書取得に <a href="https://letsencrypt.org/ja/" target="_new" title="">Let’s Encrypt (certbot) <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> であるとか</p>
|
||||
<h2>その他利用しているもの</h2>
|
||||
<p>独自ドメイン (ocoge.club)<br>
|
||||
<a href="https://www.mydns.jp/" target="_new" title="">MyDNS <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>（無料ダイナミックDNS）<br>
|
||||
インターネット接続回線（有線LANで接続）<br>
|
||||
静的サイトジェネレータ <a href="https://www.11ty.dev/" target="_new" title="">11ty <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> 及びブログテーマ <a href="https://github.com/dafiulh/vredeburg" target="_new" title="">Vredeburg <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></p>
|
||||
<h2>参考サイト</h2>
|
||||
<p><a href="https://samhobbs.co.uk/raspberry-pi-email-server" target="_new" title="">Sam Hobbs | Raspberry Pi Email Server <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a><br>
|
||||
英語でメールサーバのみの解説ではあるが、ステップごとにインストールや設定がうまくいっているかどうか確認を行うことができるようになっているため、長い作業の中でどこでミスをしたのか、または不具合が出ているのかがわかりやすい。また、設定をデフォルトから変更する箇所にそれぞれ設定の意味の説明があり、自分が何をしているのかがわかるため、ソフトウェアのアップデートで設定項目やその値に変更があり見本と齟齬が生じていても対処が容易である。わけもわからず言われた通り延々ソフトウェアのインストールと設定ファイルの書き換えを繰り返し、辟易しながら終わらせたものの結局動作せず問題のある個所も見当がつかないまま挫折、などという悲劇を起こしにくい、ナイスなサイト。</p>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says">
|
||||
WordPress と NextCloud の運用をやめた理由は実は別にあったりする...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
セキュリティアップデートが面倒だったのヨ！<br>
|
||||
仕事でもないのにあんなのやってられないワ！！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-10">
|
||||
|
||||
<div class="italic text-gray-700">Disqus comments only available for production</div>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</main>
|
||||
<footer class="mt-20 px-10 py-8 bg-gray-200">
|
||||
<div id="footer-badge"><a href="https://git.ocoge.club/" target=_new><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target=_new><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div>
|
||||
<div class="max-w-5xl mx-auto text-gray-700 text-center">
|
||||
© 2023 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>.
|
||||
Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a>
|
||||
using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/assets/js/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', (event) => {
|
||||
document.getElementsByTagName('html')[0].style.display='block';
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Page Not Found | おこげ俱楽部</title>
|
||||
<meta name="title" content="Page Not Found | おこげ俱楽部">
|
||||
<meta name="description" content="Ohiwa Code Generator - Portal">
|
||||
<meta name="keywords" content="オコゲ,blockly,プログラミング,上野学習塾">
|
||||
<meta name="author" content="ocogeclub">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://ocoge.club/404.html">
|
||||
<link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png">
|
||||
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
|
||||
<script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="/assets/floatbox/floatbox.css" />
|
||||
<script src="/assets/floatbox/floatbox.js" defer></script>
|
||||
<link rel="stylesheet" href="/assets/css/ocmain.css">
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/footer.css">
|
||||
|
||||
|
||||
<meta property="og:title" content="Page Not Found | おこげ俱楽部">
|
||||
<meta property="og:description" content="Ohiwa Code Generator - Portal">
|
||||
<meta property="og:url" content="https://ocoge.club/404.html">
|
||||
<meta property="og:site_name" content="おこげ俱楽部">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@ocogeclub">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col h-screen bg-white text-gray-800 break-words">
|
||||
<header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500">
|
||||
<div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between">
|
||||
<div class="sm:mr-8">
|
||||
<a class="flex items-center" href="/">
|
||||
<span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span>
|
||||
</a>
|
||||
</div>
|
||||
<nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0">
|
||||
|
||||
<a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a>
|
||||
|
||||
<a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a>
|
||||
|
||||
<a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud/Mail</a>
|
||||
|
||||
<a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a>
|
||||
|
||||
</nav>
|
||||
<form id="search" action="/search" class="order-last sm:order-none flex-grow items-center justify-end hidden sm:block mt-6 sm:mt-0">
|
||||
<label class="visually-hidden" for="header-searchbox">記事タイトル/概要を検索 ...</label>
|
||||
<input type="text" id="header-searchbox" name="q" placeholder="記事タイトル/概要を検索 ..." class="w-full sm:max-w-xs bg-gray-200 border border-transparent float-right focus:bg-white focus:border-gray-300 focus:outline-none h-8 p-4 placeholder-gray-500 rounded text-gray-700 text-sm">
|
||||
</form>
|
||||
<div id="menu-toggle" class="flex items-center md:hidden text-gray-700 hover:text-teal-600 cursor-pointer sm:ml-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-7 lg:mx-6 mt-32 flex-grow">
|
||||
|
||||
<div class="max-w-5xl mx-auto">
|
||||
|
||||
<div class="flex flex-col md:flex-row items-center">
|
||||
<div class="md:mr-9 text-gray-800"><svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-frown">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<path d="M16 16s-1.5-2-4-2-4 2-4 2"></path>
|
||||
<line x1="9" y1="9" x2="9.01" y2="9"></line>
|
||||
<line x1="15" y1="9" x2="15.01" y2="9"></line>
|
||||
</svg></div>
|
||||
<div class="mt-5 md:mt-0 text-center md:text-left text-gray-800">
|
||||
<h1 class="text-6xl font-medium mt-2 mb-5">404</h1>
|
||||
<h2 class="text-2xl text-gray-800 font-medium leading-snug mb-3 mt-0">Oops! It seems you are lost</h2>
|
||||
<p class="mb-4 md:mb-3 text-gray-600">The page you're looking for might have been removed had its name changed or is temporarily unavailable.</p>
|
||||
<a href="/" class="text-teal-600 font-semibold">Return to homepage</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<footer class="mt-20 px-10 py-8 bg-gray-200">
|
||||
<div id="footer-badge"><a href="https://git.ocoge.club/" target=_new><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target=_new><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div>
|
||||
<div class="max-w-5xl mx-auto text-gray-700 text-center">
|
||||
© 2023 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>.
|
||||
Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a>
|
||||
using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/assets/js/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', (event) => {
|
||||
document.getElementsByTagName('html')[0].style.display='block';
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>About Me | おこげ俱楽部</title>
|
||||
<meta name="title" content="About Me | おこげ俱楽部">
|
||||
<meta name="description" content="Ohiwa Code Generator - Portal">
|
||||
<meta name="keywords" content="オコゲ,blockly,プログラミング,上野学習塾">
|
||||
<meta name="author" content="ocogeclub">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://ocoge.club/about/">
|
||||
<link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png">
|
||||
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
|
||||
<script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="/assets/floatbox/floatbox.css" />
|
||||
<script src="/assets/floatbox/floatbox.js" defer></script>
|
||||
<link rel="stylesheet" href="/assets/css/ocmain.css">
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/footer.css">
|
||||
|
||||
|
||||
<meta property="og:title" content="About Me | おこげ俱楽部">
|
||||
<meta property="og:description" content="Ohiwa Code Generator - Portal">
|
||||
<meta property="og:url" content="https://ocoge.club/about/">
|
||||
<meta property="og:site_name" content="おこげ俱楽部">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@ocogeclub">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col h-screen bg-white text-gray-800 break-words">
|
||||
<header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500">
|
||||
<div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between">
|
||||
<div class="sm:mr-8">
|
||||
<a class="flex items-center" href="/">
|
||||
<span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span>
|
||||
</a>
|
||||
</div>
|
||||
<nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0">
|
||||
|
||||
<a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a>
|
||||
|
||||
<a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a>
|
||||
|
||||
<a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud/Mail</a>
|
||||
|
||||
<a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a>
|
||||
|
||||
</nav>
|
||||
<form id="search" action="/search" class="order-last sm:order-none flex-grow items-center justify-end hidden sm:block mt-6 sm:mt-0">
|
||||
<label class="visually-hidden" for="header-searchbox">記事タイトル/概要を検索 ...</label>
|
||||
<input type="text" id="header-searchbox" name="q" placeholder="記事タイトル/概要を検索 ..." class="w-full sm:max-w-xs bg-gray-200 border border-transparent float-right focus:bg-white focus:border-gray-300 focus:outline-none h-8 p-4 placeholder-gray-500 rounded text-gray-700 text-sm">
|
||||
</form>
|
||||
<div id="menu-toggle" class="flex items-center md:hidden text-gray-700 hover:text-teal-600 cursor-pointer sm:ml-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-7 lg:mx-6 mt-32 flex-grow">
|
||||
|
||||
<div class="max-w-5xl mx-auto">
|
||||
|
||||
<div class="flex flex-col items-center text-lg">
|
||||
|
||||
<a href="https://ocoge.club" target="_blank" rel="noopener">
|
||||
<img class="w-32 h-32 md:w-40 md:h-40 rounded-full" src="/assets/img/author.gif" width="128" height="128" alt="Author avatar">
|
||||
</a>
|
||||
|
||||
<div class="text-center mt-8">
|
||||
<h1 class="text-2xl font-medium text-gray-800 leading-relaxed mt-0 mb-1">
|
||||
<a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a>
|
||||
</h1>
|
||||
|
||||
<div class="text-gray-600">
|
||||
<a href="mailto:info@ocoge.club">info@ocoge.club</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<footer class="mt-20 px-10 py-8 bg-gray-200">
|
||||
<div id="footer-badge"><a href="https://git.ocoge.club/" target=_new><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target=_new><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div>
|
||||
<div class="max-w-5xl mx-auto text-gray-700 text-center">
|
||||
© 2023 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>.
|
||||
Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a>
|
||||
using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/assets/js/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', (event) => {
|
||||
document.getElementsByTagName('html')[0].style.display='block';
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
img.footer-img {
|
||||
display: unset !important;
|
||||
padding: 0px 2px;
|
||||
}
|
||||
|
||||
#footer-badge {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 2rem !important;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,44 @@
|
|||
body {
|
||||
font-family: Nunito, Kosugi Maru !important;
|
||||
}
|
||||
|
||||
body.bg-white {
|
||||
background-color: floralwhite;
|
||||
}
|
||||
|
||||
#site_title {
|
||||
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
|
||||
#site_title:hover {
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
#menu {
|
||||
margin-top: auto;
|
||||
filter: drop-shadow(1px 1px 1.5px rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
|
||||
#search {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
footer.bg-gray-200 {
|
||||
background-color: aliceblue;
|
||||
}
|
||||
|
||||
html {
|
||||
display: none;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
/* 透明 */
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
.zoom {
|
||||
overflow: hidden;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
}
|
||||
|
||||
.zoom img {
|
||||
overflow: hidden;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
-webkit-transition: .5s ease-in-out;
|
||||
transition: .5s ease-in-out;
|
||||
}
|
||||
|
||||
.zoom img:hover {
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.abr {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
.abr p.text-gray-600 {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
|
@ -0,0 +1,692 @@
|
|||
h1 {
|
||||
position: relative;
|
||||
padding: .3em;
|
||||
text-align: center;
|
||||
color: #e60 !important;
|
||||
}
|
||||
|
||||
h1::before,
|
||||
h1::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1::before {
|
||||
top: 0;
|
||||
border-top: 2px solid #f80;
|
||||
border-bottom: 1px solid #f80;
|
||||
}
|
||||
|
||||
h1::after {
|
||||
bottom: 0;
|
||||
border-top: 1px solid #f80;
|
||||
border-bottom: 2px solid #f80;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
padding: .1em .3em .1em 1.8em;
|
||||
background: #90CAF9;
|
||||
border-radius: 4px;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
h2:before,
|
||||
h2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
h2:before {
|
||||
top: -0.1em;
|
||||
left: 0.5em;
|
||||
width: 20px;
|
||||
height: 23px;
|
||||
padding: 5px 0 0 0;
|
||||
background: #1976D2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2:after {
|
||||
top: .35em;
|
||||
left: .5em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 10px solid;
|
||||
border-color: transparent #1976D2;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: brown !important;
|
||||
position: relative;
|
||||
padding: .1em .3em .1em 1.6em;
|
||||
}
|
||||
|
||||
h3::before,
|
||||
h3::after {
|
||||
position: absolute;
|
||||
content: "□";
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
color: #FBC02D;
|
||||
}
|
||||
|
||||
h3::before {
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
h3::after {
|
||||
left: 5.5px;
|
||||
top: 7.5px;
|
||||
}
|
||||
|
||||
|
||||
#content a {
|
||||
text-decoration: none !important;
|
||||
color: royalblue !important;
|
||||
}
|
||||
|
||||
#content a:hover {
|
||||
text-decoration: underline !important;
|
||||
color: royalblue !important;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
color: dimgray !important;
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#content p {
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#content ul,
|
||||
ol {
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size: unset;
|
||||
}
|
||||
|
||||
#content ul li {
|
||||
list-style: disc;
|
||||
padding-left: unset;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#content ol li {
|
||||
list-style: decimal;
|
||||
padding-left: unset;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#content li::before {
|
||||
content: unset;
|
||||
}
|
||||
|
||||
#content li :last-child {
|
||||
margin-bottom: unset;
|
||||
}
|
||||
|
||||
#content li :first-child {
|
||||
margin-top: unset;
|
||||
}
|
||||
|
||||
/* Youtube Embbed Video */
|
||||
figure.youtube {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
figure.youtube iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* floatbox */
|
||||
.floatbox img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.floatbox {
|
||||
margin: 8px auto !important;
|
||||
}
|
||||
|
||||
.balloon,
|
||||
.balloon_right {
|
||||
width: 100%;
|
||||
margin-top: 0.5em !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.balloon .faceicon {
|
||||
float: left;
|
||||
margin-right: -90px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.balloon .faceicon img,
|
||||
.balloon_right .faceicon_right img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: solid 3px #d7ebfe;
|
||||
}
|
||||
|
||||
.balloon .faceicon p,
|
||||
.balloon_right .faceicon_right p {
|
||||
text-align: center;
|
||||
top: -10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.balloon .chatting,
|
||||
.balloon_right .chatting {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.says {
|
||||
position: relative;
|
||||
margin: 5px 0 0 105px;
|
||||
padding: 17px 13px;
|
||||
border-radius: 12px;
|
||||
background: #FFF;
|
||||
border: solid 3px #d7ebfe;
|
||||
}
|
||||
|
||||
.says:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 34px;
|
||||
left: -20px;
|
||||
margin-top: -16px;
|
||||
border: 12px solid transparent;
|
||||
border-right: 12px solid #FFF;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.says:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: -24px;
|
||||
border: 12px solid transparent;
|
||||
border-right: 12px solid #d7ebfe;
|
||||
}
|
||||
|
||||
.says p,
|
||||
.says_right p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.balloon_right .faceicon_right {
|
||||
float: right;
|
||||
margin-right: 0px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.says_right {
|
||||
position: relative;
|
||||
margin: 5px 105px 0 0px;
|
||||
padding: 17px 13px;
|
||||
border-radius: 12px;
|
||||
background: #FFF;
|
||||
border: solid 3px #d7ebfe;
|
||||
}
|
||||
|
||||
.says_right:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 34px;
|
||||
right: -20px;
|
||||
margin-top: -16px;
|
||||
border: 12px solid transparent;
|
||||
border-left: 12px solid #FFF;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.says_right:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: -24px;
|
||||
border: 12px solid transparent;
|
||||
border-left: 12px solid #d7ebfe;
|
||||
}
|
||||
|
||||
/* costomize */
|
||||
.faceicon img,
|
||||
.faceicon_right img {
|
||||
margin: 0;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
border: solid 2px #d7ebfe !important;
|
||||
}
|
||||
|
||||
.balloon .faceicon,
|
||||
.balloon_right .faceicon_right {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.balloon,
|
||||
.balloon_right {
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.says {
|
||||
margin: 15px 0 0 115px;
|
||||
border: solid 2px #c99;
|
||||
background-color: #fed;
|
||||
width: fit-content;
|
||||
padding: 17px 24px;
|
||||
}
|
||||
|
||||
.says:before {
|
||||
left: -21px;
|
||||
border-right: 12px solid #fed;
|
||||
}
|
||||
|
||||
.says:after {
|
||||
border-right: 12px solid #c99;
|
||||
}
|
||||
|
||||
.says_right {
|
||||
margin: 15px 115px 0 auto;
|
||||
/* text-align: right; */
|
||||
border: solid 2px #c99;
|
||||
background-color: #fee;
|
||||
width: fit-content;
|
||||
padding: 17px 24px;
|
||||
}
|
||||
|
||||
.says_right:before {
|
||||
right: -21px;
|
||||
border-left: 12px solid #fee;
|
||||
}
|
||||
|
||||
.says_right:after {
|
||||
border-left: 12px solid #c99;
|
||||
}
|
||||
|
||||
.says_right p {
|
||||
width: fit-content !important;
|
||||
margin: auto !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.faceicon p,
|
||||
.faceicon_right p {
|
||||
font-size: small;
|
||||
margin: 0;
|
||||
top: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tamathink {
|
||||
position: relative;
|
||||
margin: 15px 0 0 145px;
|
||||
/* padding: 17px 13px; */
|
||||
border-radius: 12px;
|
||||
background: #fed;
|
||||
border: solid 2px #edc;
|
||||
width: fit-content;
|
||||
padding: 17px 24px;
|
||||
}
|
||||
|
||||
.tamathink p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.think-l-bal-s {
|
||||
/* display: inline-block; */
|
||||
position: relative;
|
||||
left: 96px;
|
||||
top: 28px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #fed;
|
||||
border: solid 2px #edc;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.think-l-bal-l {
|
||||
/* display: inline-block; */
|
||||
position: relative;
|
||||
left: 100px;
|
||||
top: 22px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: #fed;
|
||||
border: solid 2px #edc;
|
||||
float: left;
|
||||
}
|
||||
|
||||
summary.blockprogram {
|
||||
background-color: seagreen;
|
||||
}
|
||||
|
||||
summary.lesson {
|
||||
background-color: royalblue;
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
margin: auto;
|
||||
padding: .5em 1em;
|
||||
}
|
||||
|
||||
details.lesson {
|
||||
margin: 1em auto;
|
||||
padding: 0;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
details.lesson div.lesson {
|
||||
padding: .5em 1em;
|
||||
}
|
||||
|
||||
details.lesson[open] div.lesson {
|
||||
background-color: white;
|
||||
border: royalblue 1px solid;
|
||||
border-top: 0;
|
||||
animation: fadeIn 0.5s ease;
|
||||
}
|
||||
|
||||
/* @keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
} */
|
||||
|
||||
details.lesson[open] div.slide {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
animation: slideIn 0.5s ease;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Marker */
|
||||
span.mfy {
|
||||
background: linear-gradient(transparent 60%, yellow 60%) !important;
|
||||
}
|
||||
|
||||
span.mfr {
|
||||
background: linear-gradient(transparent 60%, pink 60%) !important;
|
||||
}
|
||||
|
||||
span.mfb {
|
||||
background: linear-gradient(transparent 60%, aqua 60%) !important;
|
||||
}
|
||||
|
||||
span.mfg {
|
||||
background: linear-gradient(transparent 60%, lightgreen 60%) !important;
|
||||
}
|
||||
|
||||
/* Blogcard */
|
||||
div.card {
|
||||
max-width: 800px;
|
||||
margin: 1em auto 2em;
|
||||
}
|
||||
|
||||
.blogcard {
|
||||
display: grid;
|
||||
grid-gap: .3rem 1rem;
|
||||
align-content: start;
|
||||
max-width: 35rem;
|
||||
max-height: 100px;
|
||||
color: #2c2d30;
|
||||
line-height: normal;
|
||||
background-color: white;
|
||||
width: fit-content;
|
||||
position: relative;
|
||||
top: 0;
|
||||
transition: all .3s linear !important;
|
||||
border-radius: .25rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blogcard:hover {
|
||||
top: -3px !important;
|
||||
box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.blogcard:hover img {
|
||||
opacity: 0.7;
|
||||
transition: all .3s linear !important;
|
||||
}
|
||||
|
||||
.blogcard::before {
|
||||
content: "";
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 4;
|
||||
width: .25rem;
|
||||
height: 100%;
|
||||
background: #e3e4e6;
|
||||
/* border-radius: .2rem; */
|
||||
}
|
||||
|
||||
.blogcard>* {
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
|
||||
/* .blogcard__heading,
|
||||
.blogcard__description {
|
||||
margin: 0 !important;
|
||||
} */
|
||||
|
||||
.blogcard__heading {
|
||||
line-height: 1.0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.blogcard__description {
|
||||
font-size: small;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.blogcard__link {
|
||||
text-decoration: none !important;
|
||||
color: #3081b7 !important;
|
||||
}
|
||||
|
||||
.blogcard__image {
|
||||
grid-column: 3 / 4;
|
||||
grid-row: 1 / 4;
|
||||
/* align-self: center; */
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
object-fit: cover;
|
||||
margin: 0 !important;
|
||||
border-radius: 0 .25rem .25rem 0;
|
||||
}
|
||||
|
||||
.blogcard__logo {
|
||||
max-width: 1rem;
|
||||
height: auto;
|
||||
margin: 4px 0 0 0 !important;
|
||||
|
||||
}
|
||||
|
||||
.blogcard__publisher {
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
.blogcard__meta {
|
||||
font-size: small;
|
||||
grid-row: 1 / auto;
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
grid-gap: .25rem;
|
||||
color: #a1a1a8;
|
||||
font-weight: bold;
|
||||
padding-top: 0px;
|
||||
margin-top: 2px !important;
|
||||
}
|
||||
|
||||
.blogcard+.blogcard {
|
||||
margin-block-start: 2rem;
|
||||
}
|
||||
|
||||
/* アイコン付きボックス */
|
||||
.iconbox {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
margin-top: 44px !important;
|
||||
padding: 0.5em 1em;
|
||||
border: solid 3px deeppink;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.iconbox .box-title {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: -40px;
|
||||
left: -3px;
|
||||
padding: 3px 9px;
|
||||
height: 40px;
|
||||
line-height: 25px;
|
||||
font-size: 32px;
|
||||
background: deeppink;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
.iconbox p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: solid 1px;
|
||||
border-color: lightgray;
|
||||
padding: 10px !important;
|
||||
font-size: initial;
|
||||
}
|
||||
|
||||
table {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
div.imgbox {
|
||||
max-width: 600px;
|
||||
margin: 24px auto;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
border: white solid 4px;
|
||||
}
|
||||
|
||||
div.imgbox p {
|
||||
font-size: larger;
|
||||
margin: auto;
|
||||
width: fit-content;
|
||||
font-weight: bold;
|
||||
color: magenta;
|
||||
}
|
||||
|
||||
p.tsukkomi {
|
||||
font-size: small;
|
||||
color: lightgray;
|
||||
margin-right: 0 !important;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.box_stripe {
|
||||
max-width: 800px;
|
||||
margin: 24px auto;
|
||||
padding: 1em 2em;
|
||||
background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px, #e9f4ff 3px, #e9f4ff 7px);
|
||||
background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px, #e9f4ff 3px, #e9f4ff 7px);
|
||||
}
|
||||
|
||||
.box_stripe p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img.inline {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
span.tsubuyaki {
|
||||
font-size: small;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
pre {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
figure.center {
|
||||
margin: auto;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
figure.center figcaption {
|
||||
margin: 8px auto auto;
|
||||
}
|
||||
|
||||
#disqus_thread {
|
||||
padding-top: 4px;
|
||||
border-top-style: solid;
|
||||
border-top-color: #eee;
|
||||
border-top-width: 2px;
|
||||
}
|
||||
|
||||
code::before {
|
||||
content: '' !important;
|
||||
}
|
||||
|
||||
code::after {
|
||||
content: '' !important;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: gainsboro;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
The MIT License
|
||||
|
||||
Copyright (c) 2021 Byron McGregor
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,108 @@
|
|||
var fb = self.fb || {};
|
||||
|
||||
fb.fbOptions = {
|
||||
|
||||
/*
|
||||
See the instructions for information about setting floatbox options.
|
||||
See the options reference for details about all the available options.
|
||||
*/
|
||||
|
||||
global: {
|
||||
activateMedia: true,
|
||||
autoGallery: false
|
||||
},
|
||||
|
||||
mobile: {
|
||||
showControlsText: false,
|
||||
showItemNumber: false,
|
||||
showPrint: false,
|
||||
numIndexLinks: 0,
|
||||
strictCentering: false,
|
||||
padding: 12,
|
||||
panelPadding: 4,
|
||||
navType: 'button',
|
||||
imageTransition: 'slide',
|
||||
preloadLimit: 1
|
||||
},
|
||||
|
||||
type: {
|
||||
image: {},
|
||||
video: {},
|
||||
html: {},
|
||||
// html settings apply to all 5 html sub-types that follow
|
||||
iframe: {},
|
||||
inline: {},
|
||||
ajax: {},
|
||||
direct: {},
|
||||
pdf: {
|
||||
mobile: { newWindow: true }
|
||||
}
|
||||
},
|
||||
|
||||
className: {
|
||||
modern: {
|
||||
colorTheme: 'silver',
|
||||
innerBorderColor: '#ccc',
|
||||
outerBorderColor: '#eee',
|
||||
innerBorder: 0,
|
||||
outerBorder: 6,
|
||||
padding: 0,
|
||||
panelPadding: 4,
|
||||
boxCornerRadius: 0,
|
||||
shadowType: 'hybrid',
|
||||
navType: 'overlay',
|
||||
captionPos: 'tc',
|
||||
caption2Pos: 'tc',
|
||||
infoLinkPos: 'tc',
|
||||
printLinkPos: 'tc',
|
||||
itemNumberPos: 'tl',
|
||||
newWindowLinkPos: 'tr',
|
||||
indexPos: 'tl',
|
||||
controlsPos: 'tr',
|
||||
overlayFadeTime: 0.3,
|
||||
resizeTime: 0.4,
|
||||
transitionTime: 0.5
|
||||
},
|
||||
transparent: {
|
||||
boxColor: 'transparent',
|
||||
contentBackgroundColor: 'transparent',
|
||||
shadowType: 'none',
|
||||
overlayOpacity: 0.75,
|
||||
captionPos: 'tc',
|
||||
controlsPos: 'tr',
|
||||
enableImageResize: false,
|
||||
outerBorder: 0,
|
||||
innerBorder: 0,
|
||||
zoomBorder: 0
|
||||
},
|
||||
naked: {
|
||||
boxCornerRadius: 0,
|
||||
showOuterClose: true,
|
||||
showClose: false,
|
||||
inFrameResize: false,
|
||||
showItemNumber: false,
|
||||
navType: 'overlay',
|
||||
showNavOverlay: true,
|
||||
caption: null,
|
||||
outerBorder: 0,
|
||||
innerBorder: 0,
|
||||
zoomBorder: 0,
|
||||
padding: 0,
|
||||
panelPadding: 0
|
||||
},
|
||||
fbInfo: { // applies to boxes opened from Info... links
|
||||
boxCornerRadius: 6,
|
||||
shadowSize: 8,
|
||||
padding: 18,
|
||||
overlayOpacity: 0.45,
|
||||
resizeTime: 0.3,
|
||||
fadeTime: 0,
|
||||
transitionTime: 0.3,
|
||||
overlayFadeTime: 0.3
|
||||
},
|
||||
fbTooltip: { // tooltip options
|
||||
},
|
||||
fbContext: { // contextBox options
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
.fbx.fbOverlay,.fbx.fbMain,.fbMain .fbx,.fbx.fbFloater,.fbx.fbSlowLoad{box-sizing:content-box;margin:0;padding:0;border:0 solid #000;overflow:visible;background:transparent none no-repeat 0 0;background-size:auto;text-shadow:none;transition-duration:0s;clear:both}
|
||||
.fbx.fbOverlay,.fbx.fbBackground,.fbx.fbLiner,.fbx.fbContent{position:absolute;left:0;top:0;width:100%;height:100%;outline-style:none}
|
||||
.fbx.fbContentWrapper,.fbx.fbTopPanel,.fbx.fbBottomPanel,.fbx.fbHeader,.fbx.fbFooter{position:absolute;left:0;right:0;outline-style:none}
|
||||
.fbx.fbOverlay{position:fixed}
|
||||
.fbx.fbMain{position:absolute;outline-style:none}
|
||||
.fbx.fbOverlay,.fbx.fbBackground,.fbx.fbLiner{background-repeat:repeat;overflow:hidden}
|
||||
i.fbIcon{position:relative;display:inline-block;font:normal 16px/1 monospace}
|
||||
i.fbIcon svg{height:1em;margin-bottom:-.2em;fill:currentColor;stroke:currentColor;pointer-events:none}
|
||||
.fbx.fbMain{text-align:left}
|
||||
.fbx.fbContentWrapper{direction:ltr;-webkit-overflow-scrolling:touch}
|
||||
.fbx.fbFloater,.fbx.fbSlowLoad{position:absolute}
|
||||
.fbMain span.fbx{cursor:default}
|
||||
.fbx.fbMain a{cursor:pointer}
|
||||
.fbMain a.fbx,.fbMain img.fbx,img.fbx{display:inline-block;white-space:nowrap;text-decoration:none;max-width:77777px;max-height:77777px;direction:ltr}
|
||||
.fbTopPanel .fbx,.fbBottomPanel .fbx,.fbx.fbDragger{user-select:none;-webkit-user-select:none}
|
||||
.fbx.fbTopPanel,.fbx.fbBottomPanel{display:inline-flex;align-items:center;font:normal 14px/18px Verdana,Helvetica,sans-serif}
|
||||
.fbx.fbCell{display:flex;flex-direction:column;flex:none}
|
||||
.fbx.fbCell > *{display:inline-block}
|
||||
.fbx.fbCell_tl,.fbx.fbCell_bl{text-align:left}
|
||||
.fbx.fbCell_tc,.fbx.fbCell_bc{text-align:center}
|
||||
.fbx.fbCell_tr,.fbx.fbCell_br{text-align:right}
|
||||
.fbx.fbClose,.fbx.fbNav,.fbx.fbPlayPause,.fbx.fbPrev,.fbx.fbNext,.fbx.fbPlay,.fbx.fbPause{margin:0 4px}
|
||||
.fbx.fbCaption,.fbx.fbCaption2,.fbx.fbNewWindow,.fbx.fbInfo,.fbx.fbPrint,.fbx.fbItemNumber{margin:0 6px}
|
||||
.fbx.fbNav,.fbx.fbPlayPause{white-space:nowrap;text-align:center}
|
||||
.fbx.fbItemNumber{font-size:.8em}
|
||||
.fbCaption a:link,.fbCaption a:visited,.fbCaption a:active,.fbCaption2 a:link,.fbCaption2 a:visited,.fbCaption2 a:active{color:inherit}
|
||||
.fbTopPanel a.fbx,.fbBottomPanel a.fbx{position:relative}
|
||||
.fbx.fbClose2{position:absolute}
|
||||
.fbClose2 .fbIcon{font-size:28px}
|
||||
.fbx.fbResizer{position:absolute;width:32px;height:32px;border-radius:0 0 8px 0;opacity:.45;text-align:center;background-color:#eee}
|
||||
.fbResizer .fbIcon{font-size:24px;line-height:1.3;color:#000}
|
||||
.fbx.fbDragger{position:absolute;cursor:nw-resize;line-height:1;right:0;bottom:0}
|
||||
.fbx a.fbPrevPanel,.fbx a.fbNextPanel{position:absolute;top:0;bottom:0;background-color:rgba(7,7,7,0)}
|
||||
.fbx a.fbPrevPanel{left:0}
|
||||
.fbx a.fbNextPanel{right:0}
|
||||
.fbx a.fbPrev2,.fbx a.fbNext2{position:absolute;background-color:#000;opacity:.45;padding:10px}
|
||||
.fbx a.fbPrev2{left:0;padding-left:5px;border-radius:0 3px 3px 0}
|
||||
.fbx a.fbNext2{right:0;padding-right:5px;border-radius:3px 0 0 3px}
|
||||
.fbPrev2 .fbIcon,.fbNext2 .fbIcon{font-size:26px;color:#fff}
|
||||
.fbx.fbIndex a{margin:0;padding:3px 0;text-decoration:none;display:inline-block}
|
||||
.fbIndex .fbCurrentIndex{font-weight:bold}
|
||||
.fbx.fbSpacer{position:absolute;text-align:center;min-width:1em;min-height:1em;cursor:default}
|
||||
.fbSpacer .fbIcon{display:table-cell;vertical-align:middle;width:inherit;height:inherit}
|
||||
.fbVid i{width:1em;height:1em;margin:0;padding:.1em .32em .11em .45em;color:#fff;background-color:#333;opacity:.6;text-align:center;border-radius:.2em;border:2px solid #ccc}
|
||||
.fbVid:hover i{background-color:#0b183b;opacity:.75}
|
||||
body .fbContext{cursor:help}
|
||||
a[class*="fbPop"]{display:inline-block}
|
||||
a[class*="fbPop"] img:first-child{position:absolute;left:0;top:-77777px;margin:0;padding:0;z-index:88888}
|
||||
.fbIndex a img{border:1px solid #555}
|
||||
body div.fbCycler{position:relative;max-width:100%}
|
||||
div.fbCycler > *{position:absolute;display:block;visibility:hidden;max-width:100%}
|
||||
div.fbCycler > :first-child{position:static;visibility:visible}
|
||||
div.fbCycler img,div.fbCycler a{display:inline-block;max-width:100%;height:auto;line-height:0}
|
||||
div.fbCycler span{display:block;position:relative;text-align:center;margin:auto}
|
||||
div.fbCycler p{position:absolute;visibility:visible;z-index:99}
|
||||
.fbCycler .fbCyclerControl{display:none;visibility:visible;position:relative;width:auto;min-width:4.8em;border-radius:5px;z-index:77;opacity:.6;background-color:#eee;font:normal 15px/21px "Comic Sans MS",sans-serif;color:#000;text-align:center;cursor:default;padding:0 .7em .1em;margin:0;border-width:0}
|
||||
.fbCyclerControl .fbIcon{font-size:17px;line-height:21px;padding-left:5px}
|
||||
.fbCycler .fbCyclerControl:hover{opacity:1}
|
||||
html.floatbox a.floatbox,html.floatbox div.floatbox a{pointer-events:none}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,17 @@
|
|||
// English (not used - for reference only)
|
||||
fb.data.strings = [
|
||||
"en",
|
||||
"Close (key: Esc)",
|
||||
"Prev (key: \u2190)",
|
||||
"Next (key: \u2192)",
|
||||
"Play (key: spacebar)",
|
||||
"Pause (key: spacebar)",
|
||||
"Resize (key: Page Up/Down)",
|
||||
"Image %1 of %2",
|
||||
"Page %1 of %2",
|
||||
"(%1 of %2)",
|
||||
"Info...",
|
||||
"Print...",
|
||||
"Open in a new window",
|
||||
"Pop-up content is blocked by this browser."
|
||||
];
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
// Japanese
|
||||
fb.data.strings = [
|
||||
"ja",
|
||||
"\u9589\u3058\u308b (\u30ad\u30fc\u30dc\u30fc\u30c9: Esc)",
|
||||
"\u524d (\u30ad\u30fc\u30dc\u30fc\u30c9: \u2190)",
|
||||
"\u6b21 (\u30ad\u30fc\u30dc\u30fc\u30c9: \u2192)",
|
||||
"\u904a\u3076 (\u30ad\u30fc\u30dc\u30fc\u30c9: \u30b9\u30da\u30fc\u30b9)",
|
||||
"\u4e00\u6642\u505c\u6b62 (\u30ad\u30fc\u30dc\u30fc\u30c9: \u30b9\u30da\u30fc\u30b9)",
|
||||
"\u30ea\u30b5\u30a4\u30ba (\u30ad\u30fc\u30dc\u30fc\u30c9: Page Up/Down)",
|
||||
"\u5199\u771f %1 \u306e %2",
|
||||
"\u30da\u30fc\u30b8 %1 \u306e %2",
|
||||
"(%1 \u306e %2)",
|
||||
"\u60c5\u5831...",
|
||||
"\u30d7\u30ea\u30f3\u30c8...",
|
||||
"\u3092\u958b\u304f\u65b0\u3057\u3044\u30a6\u30a3\u30f3\u30c9\u30a6\u3067",
|
||||
"\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u30b3\u30f3\u30c6\u30f3\u30c4\u306f\u3001\u3053\u306e\u30d6\u30e9\u30a6\u30b6\u306b\u30d6\u30ed\u30c3\u30af\u3055\u308c\u3066\u3044\u307e\u3059"
|
||||
];
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 B |
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,183 @@
|
|||
<!DOCTYPE html>
|
||||
<html style="background-color:#000;" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Video Player - Floatbox</title>
|
||||
<script>
|
||||
( function () {
|
||||
var
|
||||
$container,
|
||||
$player,
|
||||
posterPath;
|
||||
|
||||
function init () {
|
||||
var
|
||||
$mp4Source = document.createElement( 'source' ),
|
||||
$webmSource = document.createElement( 'source' ),
|
||||
params = fb.deserialize( location.search.substring( 1 ) ),
|
||||
mp4Path = params.source,
|
||||
webmPath = mp4Path.replace( /\.mp4\b/i, '.webm' ),
|
||||
autoPlay = params.autoplay != '0',
|
||||
esc = params.esc != 'false',
|
||||
tapState;
|
||||
|
||||
$container = fb.$( 'container' );
|
||||
$player = document.createElement( 'video' );
|
||||
posterPath = params.poster == 'null' ? null : params.poster || mp4Path.replace( /\.mp4\b/i, '.jpg' );
|
||||
$mp4Source.type = 'video/mp4';
|
||||
$mp4Source.src = mp4Path;
|
||||
$player.appendChild( $mp4Source );
|
||||
$webmSource.type = 'video/webm';
|
||||
$webmSource.src = webmPath;
|
||||
$player.appendChild( $webmSource );
|
||||
|
||||
fb.attr( $player, {
|
||||
id: 'fbPlayer',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
controls: '',
|
||||
playsinline: '',
|
||||
poster: autoPlay ? null : posterPath
|
||||
} );
|
||||
|
||||
fb.addEvent( window, 'message', messageHandler );
|
||||
fb.addEvent( $player, [ 'mousedown', 'touchstart', 'mouseup', 'touchend' ], onTap );
|
||||
fb.addEvent( $player, 'ended', onFinish );
|
||||
fb.addEvent( $webmSource, 'error', onError );
|
||||
if ( esc ) {
|
||||
fb.addEvent( document, 'keydown', onKey, true );
|
||||
}
|
||||
|
||||
$container.style.backgroundColor = params.bgcolor || 'transparent';
|
||||
$container.appendChild( $player );
|
||||
$player.tabIndex = 0;
|
||||
$container.tabIndex = -1;
|
||||
$container.focus();
|
||||
|
||||
if ( $player.canPlayType ) {
|
||||
if ( autoPlay ) {
|
||||
autoPlay = $player.play();
|
||||
if ( $player.paused !== false && !( 'Promise' in window && autoPlay instanceof Promise ) ) {
|
||||
fb.attr( $player, 'poster', posterPath );
|
||||
$player.load();
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
onError();
|
||||
}
|
||||
|
||||
function onTap ( e ) {
|
||||
if ( e.button || e.touches && e.touches[ 1 ] ) {
|
||||
tapState = null;
|
||||
}
|
||||
else if ( e.type == 'mousedown' || e.type == 'touchstart' ) {
|
||||
if ( tapState !== !!tapState && $player.offsetHeight - ( e.touches ? e.touches[ 0 ] : e ).clientY > 55 ) {
|
||||
tapState = $player.paused;
|
||||
}
|
||||
}
|
||||
else {
|
||||
setTimeout( function () {
|
||||
if ( $player.paused === tapState ) {
|
||||
if ( tapState ) {
|
||||
$player.play();
|
||||
}
|
||||
else {
|
||||
$player.pause();
|
||||
}
|
||||
}
|
||||
tapState = null;
|
||||
}, 77 );
|
||||
}
|
||||
}
|
||||
|
||||
function onKey ( e ) {
|
||||
if ( e.keyCode == 27 ) {
|
||||
fb.stopEvent( e );
|
||||
onFinish( 'esc' );
|
||||
}
|
||||
}
|
||||
|
||||
function onFinish ( msg ) {
|
||||
parent.postMessage( { 'event': msg.type || msg }, document.referrer );
|
||||
}
|
||||
|
||||
function onError () {
|
||||
var
|
||||
p = fb.select( 'p', $container, 0 ),
|
||||
a = fb.select( 'a', p, 0 );
|
||||
a.href = a.innerHTML = mp4Path;
|
||||
p.style.display = 'block';
|
||||
}
|
||||
} // init
|
||||
|
||||
function messageHandler ( e ) {
|
||||
// Receive instructions from core
|
||||
if ( e.data.action == 'load' ) {
|
||||
fb.attr( $player, 'poster', posterPath );
|
||||
$player.load();
|
||||
}
|
||||
}
|
||||
|
||||
function getParam ( name ) {
|
||||
name = name.replace( /\[/, '\\[' ).replace( /\]/, '\\]' );
|
||||
var
|
||||
regex = new RegExp( '[\\?&]' + name + '=([^&#]*)' ),
|
||||
match = regex.exec( location.search );
|
||||
return match ? decodeURIComponent( match[ 1 ].replace( /\+/g, ' ' ) ) : '';
|
||||
}
|
||||
|
||||
self.fbOptions = {
|
||||
scriptPath: getParam( 'fb' ),
|
||||
ready: [ init ]
|
||||
};
|
||||
|
||||
var script = document.createElement( 'script' );
|
||||
script.src = fbOptions.scriptPath;
|
||||
document.head.appendChild( script );
|
||||
|
||||
} )()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body, #container {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
background-color: #000;
|
||||
}
|
||||
p {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 7;
|
||||
width: 60%;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 24px auto;
|
||||
padding: 16px;
|
||||
border: 2px solid darkred;
|
||||
background-color: #fffacd;
|
||||
}
|
||||
video {
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container">
|
||||
<p>Uh-oh.<br />
|
||||
Video playback failed.<br />
|
||||
That's all we know.<br /><br />
|
||||
<a></a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
<!DOCTYPE html>
|
||||
<html style="background-color:#000;" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Video Player - Floatbox</title>
|
||||
<script>
|
||||
( function () {
|
||||
var
|
||||
$container,
|
||||
$player,
|
||||
posterPath;
|
||||
|
||||
function init () {
|
||||
var
|
||||
$mp4Source = document.createElement( 'source' ),
|
||||
$webmSource = document.createElement( 'source' ),
|
||||
params = fb.deserialize( location.search.substring( 1 ) ),
|
||||
mp4Path = params.source,
|
||||
webmPath = mp4Path.replace( /\.mp4\b/i, '.webm' ),
|
||||
autoPlay = params.autoplay != '0',
|
||||
esc = params.esc != 'false',
|
||||
tapState;
|
||||
|
||||
$container = fb.$( 'container' );
|
||||
$player = document.createElement( 'video' );
|
||||
posterPath = params.poster == 'null' ? null : params.poster || mp4Path.replace( /\.mp4\b/i, '.jpg' );
|
||||
$mp4Source.type = 'video/mp4';
|
||||
$mp4Source.src = mp4Path;
|
||||
$player.appendChild( $mp4Source );
|
||||
$webmSource.type = 'video/webm';
|
||||
$webmSource.src = webmPath;
|
||||
$player.appendChild( $webmSource );
|
||||
|
||||
fb.attr( $player, {
|
||||
id: 'fbPlayer',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
controls: '',
|
||||
playsinline: '',
|
||||
poster: autoPlay ? null : posterPath
|
||||
} );
|
||||
|
||||
fb.addEvent( window, 'message', messageHandler );
|
||||
fb.addEvent( $player, [ 'mousedown', 'touchstart', 'mouseup', 'touchend' ], onTap );
|
||||
fb.addEvent( $player, 'ended', onFinish );
|
||||
fb.addEvent( $webmSource, 'error', onError );
|
||||
if ( esc ) {
|
||||
fb.addEvent( document, 'keydown', onKey, true );
|
||||
}
|
||||
|
||||
$container.style.backgroundColor = params.bgcolor || 'transparent';
|
||||
$container.appendChild( $player );
|
||||
$player.tabIndex = 0;
|
||||
$container.tabIndex = -1;
|
||||
$container.focus();
|
||||
|
||||
if ( $player.canPlayType ) {
|
||||
if ( autoPlay ) {
|
||||
autoPlay = $player.play();
|
||||
if ( $player.paused !== false && !( 'Promise' in window && autoPlay instanceof Promise ) ) {
|
||||
fb.attr( $player, 'poster', posterPath );
|
||||
$player.load();
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
onError();
|
||||
}
|
||||
|
||||
function onTap ( e ) {
|
||||
if ( e.button || e.touches && e.touches[ 1 ] ) {
|
||||
tapState = null;
|
||||
}
|
||||
else if ( e.type == 'mousedown' || e.type == 'touchstart' ) {
|
||||
if ( tapState !== !!tapState && $player.offsetHeight - ( e.touches ? e.touches[ 0 ] : e ).clientY > 55 ) {
|
||||
tapState = $player.paused;
|
||||
}
|
||||
}
|
||||
else {
|
||||
setTimeout( function () {
|
||||
if ( $player.paused === tapState ) {
|
||||
if ( tapState ) {
|
||||
$player.play();
|
||||
}
|
||||
else {
|
||||
$player.pause();
|
||||
}
|
||||
}
|
||||
tapState = null;
|
||||
}, 77 );
|
||||
}
|
||||
}
|
||||
|
||||
function onKey ( e ) {
|
||||
if ( e.keyCode == 27 ) {
|
||||
fb.stopEvent( e );
|
||||
onFinish( 'esc' );
|
||||
}
|
||||
}
|
||||
|
||||
function onFinish ( msg ) {
|
||||
parent.postMessage( { 'event': msg.type || msg }, document.referrer );
|
||||
}
|
||||
|
||||
function onError () {
|
||||
var
|
||||
p = fb.select( 'p', $container, 0 ),
|
||||
a = fb.select( 'a', p, 0 );
|
||||
a.href = a.innerHTML = mp4Path;
|
||||
p.style.display = 'block';
|
||||
}
|
||||
} // init
|
||||
|
||||
function messageHandler ( e ) {
|
||||
// Receive instructions from core
|
||||
if ( e.data.action == 'load' ) {
|
||||
fb.attr( $player, 'poster', posterPath );
|
||||
$player.load();
|
||||
}
|
||||
}
|
||||
|
||||
function getParam ( name ) {
|
||||
name = name.replace( /\[/, '\\[' ).replace( /\]/, '\\]' );
|
||||
var
|
||||
regex = new RegExp( '[\\?&]' + name + '=([^&#]*)' ),
|
||||
match = regex.exec( location.search );
|
||||
return match ? decodeURIComponent( match[ 1 ].replace( /\+/g, ' ' ) ) : '';
|
||||
}
|
||||
|
||||
self.fbOptions = {
|
||||
scriptPath: getParam( 'fb' ),
|
||||
ready: [ init ]
|
||||
};
|
||||
|
||||
var script = document.createElement( 'script' );
|
||||
script.src = fbOptions.scriptPath;
|
||||
document.head.appendChild( script );
|
||||
|
||||
} )()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body, #container {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
background-color: #000;
|
||||
}
|
||||
p {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 7;
|
||||
width: 60%;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 24px auto;
|
||||
padding: 16px;
|
||||
border: 2px solid darkred;
|
||||
background-color: #fffacd;
|
||||
}
|
||||
video {
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container">
|
||||
<p>Uh-oh.<br />
|
||||
Video playback failed.<br />
|
||||
That's all we know.<br /><br />
|
||||
<a></a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 200 B |
Binary file not shown.
|
After Width: | Height: | Size: 136 B |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="135" height="20" role="img" aria-label="License: BY-SA 4.0"><title>License: BY-SA 4.0</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="135" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="68" height="20" fill="#555"/><rect x="68" width="67" height="20" fill="#ef9421"/><rect width="135" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><image x="5" y="3" width="14" height="14" xlink:href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRUY5NDIxIiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+Q3JlYXRpdmUgQ29tbW9uczwvdGl0bGU+PHBhdGggZD0iTTExLjk4MyAwYy0zLjI5MiAwLTYuMTkgMS4yMTctOC40MjggMy40ODVDMS4yNSA1LjgxOSAwIDguODQ0IDAgMTJjMCAzLjE4OSAxLjIxNyA2LjE0OCAzLjUyMiA4LjQ1QzUuODI3IDIyLjc1IDguODIyIDI0IDExLjk4MyAyNGMzLjE2IDAgNi4yMjItMS4yNSA4LjU5My0zLjU4M0MyMi44MTUgMTguMjE0IDI0IDE1LjI4NyAyNCAxMmMwLTMuMjU1LTEuMTg2LTYuMjE0LTMuNDU4LTguNDgzQzE4LjIzOCAxLjIxNyAxNS4yNzUgMCAxMS45ODMgMHptLjAzMyAyLjE3YzIuNyAwIDUuMTAzIDEuMDIgNi45OCAyLjg5MyAxLjg0MyAxLjg0MSAyLjgzIDQuMjc0IDIuODMgNi45MzcgMCAyLjY5Ni0uOTU0IDUuMDYzLTIuNzk4IDYuODcyLTEuOTQzIDEuOTA2LTQuNDQ0IDIuOTI2LTcuMDEyIDIuOTI2LTIuNjAxIDAtNS4wMzgtMS4wMTktNi45MTQtMi44OTMtMS44NzctMS44NzUtMi45My00LjM0LTIuOTMtNi45MDUgMC0yLjU5NyAxLjA1My01LjA2MyAyLjkzLTYuOTcgMS44NDQtMS44NzQgNC4yMTQtMi44NiA2LjkxNC0yLjg2ek04LjY4IDguMjc4QzYuNzIzIDguMjc4IDUuMTY1IDkuNjYgNS4xNjUgMTJjMCAyLjM4IDEuNDY1IDMuNzIyIDMuNTgxIDMuNzIyIDEuMzU4IDAgMi41MTYtLjc0NCAzLjE1NS0xLjg3NGwtMS40OTEtLjc1OGMtLjMzMy43OTgtLjgzOSAxLjAzNy0xLjQ3OCAxLjAzNy0xLjEwNSAwLTEuNjEtLjkxNy0xLjYxLTIuMTI2IDAtMS4yMS40MjYtMi4xMjcgMS42MS0yLjEyNy4zMiAwIC45Ni4xNzMgMS4zMzIuOTdsMS41OTctLjgzOGMtLjY4LTEuMjM2LTEuODM3LTEuNzI4LTMuMTgxLTEuNzI4em02LjkzMiAwYy0xLjk1NyAwLTMuNTE0IDEuMzgyLTMuNTE0IDMuNzIyIDAgMi4zOCAxLjQ2NCAzLjcyMiAzLjU4IDMuNzIyIDEuMzU5IDAgMi41MTYtLjc0NCAzLjE1NS0xLjg3NGwtMS40OS0uNzU4Yy0uMzMzLjc5OC0uODQgMS4wMzctMS40NzggMS4wMzctMS4xMDUgMC0xLjYxMS0uOTE3LTEuNjExLTIuMTI2IDAtMS4yMS40MjYtMi4xMjcgMS42MS0yLjEyNy4zMiAwIC45Ni4xNzMgMS4zMzIuOTdsMS41OTctLjgzOGMtLjY4LTEuMjM2LTEuODM3LTEuNzI4LTMuMTgxLTEuNzI4eiIvPjwvc3ZnPg=="/><text aria-hidden="true" x="435" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="410">License</text><text x="435" y="140" transform="scale(.1)" fill="#fff" textLength="410">License</text><text aria-hidden="true" x="1005" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="570">BY-SA 4.0</text><text x="1005" y="140" transform="scale(.1)" fill="#fff" textLength="570">BY-SA 4.0</text></g></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 904 B |
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 625 B |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="107" height="20" role="img" aria-label="Git: ocogeclub"><title>Git: ocogeclub</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="107" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="42" height="20" fill="#555"/><rect x="42" width="65" height="20" fill="#609926"/><rect width="107" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><image x="5" y="3" width="14" height="14" xlink:href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRjA1MDMyIiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+R2l0PC90aXRsZT48cGF0aCBkPSJNMjMuNTQ2IDEwLjkzTDEzLjA2Ny40NTJjLS42MDQtLjYwMy0xLjU4Mi0uNjAzLTIuMTg4IDBMOC43MDggMi42MjdsMi43NiAyLjc2Yy42NDUtLjIxNSAxLjM3OS0uMDcgMS44ODkuNDQxLjUxNi41MTUuNjU4IDEuMjU4LjQzOCAxLjlsMi42NTggMi42NmMuNjQ1LS4yMjMgMS4zODctLjA3OCAxLjkuNDM1LjcyMS43Mi43MjEgMS44ODQgMCAyLjYwNC0uNzE5LjcxOS0xLjg4MS43MTktMi42IDAtLjUzOS0uNTQxLS42NzQtMS4zMzctLjQwNC0xLjk5NkwxMi44NiA4Ljk1NXY2LjUyNWMuMTc2LjA4Ni4zNDIuMjAzLjQ4OC4zNDguNzEzLjcyMS43MTMgMS44ODMgMCAyLjYtLjcxOS43MjEtMS44ODkuNzIxLTIuNjA5IDAtLjcxOS0uNzE5LS43MTktMS44NzkgMC0yLjU5OC4xODItLjE4LjM4Ny0uMzE2LjYwNS0uNDA2VjguODM1Yy0uMjE3LS4wOTEtLjQyNC0uMjIyLS42LS40MDEtLjU0NS0uNTQ1LS42NzYtMS4zNDItLjM5Ni0yLjAwOUw3LjYzNiAzLjcuNDUgMTAuODgxYy0uNi42MDUtLjYgMS41ODQgMCAyLjE4OWwxMC40OCAxMC40NzdjLjYwNC42MDQgMS41ODIuNjA0IDIuMTg2IDBsMTAuNDMtMTAuNDNjLjYwNS0uNjAzLjYwNS0xLjU4MiAwLTIuMTg3Ii8+PC9zdmc+"/><text aria-hidden="true" x="305" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="150">Git</text><text x="305" y="140" transform="scale(.1)" fill="#fff" textLength="150">Git</text><text aria-hidden="true" x="735" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="550">ocogeclub</text><text x="735" y="140" transform="scale(.1)" fill="#fff" textLength="550">ocogeclub</text></g></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 304 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<body style="background-color: green;">
|
||||
<img src="./tama_ko.webp">
|
||||
</body>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 254 132.292" height="500" width="960">
|
||||
<defs/>
|
||||
<path d="M0 0h254v132.292H0z" fill="#ccc"/>
|
||||
<text y="70.535" x="83.615" font-size="18.521" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#666">
|
||||
<tspan y="70.535" x="83.615">No Image</tspan>
|
||||
</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 349 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="105" height="20" role="img" aria-label="ocogIt: Pages"><title>ocogIt: Pages</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="105" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="62" height="20" fill="#555"/><rect x="62" width="43" height="20" fill="magenta"/><rect width="105" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><image x="5" y="3" width="14" height="14" xlink:href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRjA1MDMyIiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+R2l0PC90aXRsZT48cGF0aCBkPSJNMjMuNTQ2IDEwLjkzTDEzLjA2Ny40NTJjLS42MDQtLjYwMy0xLjU4Mi0uNjAzLTIuMTg4IDBMOC43MDggMi42MjdsMi43NiAyLjc2Yy42NDUtLjIxNSAxLjM3OS0uMDcgMS44ODkuNDQxLjUxNi41MTUuNjU4IDEuMjU4LjQzOCAxLjlsMi42NTggMi42NmMuNjQ1LS4yMjMgMS4zODctLjA3OCAxLjkuNDM1LjcyMS43Mi43MjEgMS44ODQgMCAyLjYwNC0uNzE5LjcxOS0xLjg4MS43MTktMi42IDAtLjUzOS0uNTQxLS42NzQtMS4zMzctLjQwNC0xLjk5NkwxMi44NiA4Ljk1NXY2LjUyNWMuMTc2LjA4Ni4zNDIuMjAzLjQ4OC4zNDguNzEzLjcyMS43MTMgMS44ODMgMCAyLjYtLjcxOS43MjEtMS44ODkuNzIxLTIuNjA5IDAtLjcxOS0uNzE5LS43MTktMS44NzkgMC0yLjU5OC4xODItLjE4LjM4Ny0uMzE2LjYwNS0uNDA2VjguODM1Yy0uMjE3LS4wOTEtLjQyNC0uMjIyLS42LS40MDEtLjU0NS0uNTQ1LS42NzYtMS4zNDItLjM5Ni0yLjAwOUw3LjYzNiAzLjcuNDUgMTAuODgxYy0uNi42MDUtLjYgMS41ODQgMCAyLjE4OWwxMC40OCAxMC40NzdjLjYwNC42MDQgMS41ODIuNjA0IDIuMTg2IDBsMTAuNDMtMTAuNDNjLjYwNS0uNjAzLjYwNS0xLjU4MiAwLTIuMTg3Ii8+PC9zdmc+"/><text aria-hidden="true" x="405" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">ocogIt</text><text x="405" y="140" transform="scale(.1)" fill="#fff" textLength="350">ocogIt</text><text aria-hidden="true" x="825" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="330">Pages</text><text x="825" y="140" transform="scale(.1)" fill="#fff" textLength="330">Pages</text></g></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue